HTML5 Canvas driving

Andreas Iosifelis — Mon, 08 Mar 2021 13:16:21 +0000

I thought I'd make a little driving agent with html5 canvas. This circle can be manipulated with the up, down, left and right keys. Maybe it'll give you some ideas for your next html5 canvas project. Have fun!

HTML

<canvas></canvas>

CSS

* {
   padding: 0;
   margin: 0;
}
html, body, canvas {
   position: fixed;
   width: 100%;
   height: 100%;
}

Javascript - Setup the canvas

const ctx = document.querySelector("canvas").getContext("2d");

window.onload = function () {
    try {
        ctx.W = document.documentElement.clientWidth;
        ctx.H = document.documentElement.clientHeight;
        ctx.keyState = {};
        ctx.keys = {
            LEFT: 37,
            UP: 38,
            RIGHT: 39,
            DOWN: 40,
            SPACE: 32,
        };
        ctx.frameCount = 0;
        ctx.mouseX = 0;
        ctx.mouseY = 0;
        ctx.mouseDown = false;

        ctx.randomNumber = function (min, max) {
            return Math.random() * (max - min) + min;
        };

        ctx.frame = function () {
            window.requestAnimationFrame(ctx.frame);
            ctx.fit();
            ctx.clearRect(0, 0, ctx.W, ctx.H);
            ctx.screen.update();
            ctx.screen.render();
            ctx.frameCount++;
        };

        ctx.fit = function () {
            ctx.W = document.documentElement.clientWidth;
            ctx.H = document.documentElement.clientHeight;
            ctx.canvas.width = ctx.W;
            ctx.canvas.height = ctx.H;
        };

        ctx.input = function () {
            document.body.onmousedown = function () {
                ctx.mouseDown = true;
            };

            document.body.onmouseup = function () {
                ctx.mouseDown = false;
            };

            document.body.ontouchstart = function () {
                ctx.mouseDown = true;
            };

            document.body.ontouchend = function () {
                ctx.mouseDown = true;
            };

            document.body.onmousemove = function (e) {
                ctx.mouseX = e.clientX;
                ctx.mouseY = e.clientY;
            };

            document.body.onkeydown = function (e) {
                ctx.keyState[e.keyCode] = true;
            };

            document.body.onkeyup = function (e) {
                delete ctx.keyState[e.keyCode];
            };
        };

        ctx.screen = new Screen();

        ctx.input();
        ctx.fit();
        ctx.frame();
    } catch (error) {
        console.error(error);
        console.error("Please provide a Screen constructor");
    }
};

Javascript - Driving code

function Screen() {
    this.circle = {
        x: ctx.W / 2,
        y: ctx.H / 2,
        r: 40,
    };
    this.wheel = {
        x: 0,
        y: 0,
        r: 10,
    };

    this.xv = 1.1;
    this.yv = 1.1;

    this.angle = 0;
    this.speed = 0.05;
}

Screen.prototype.render = function () {
    ctx.fillStyle = "#555555";
    ctx.fillRect(0, 0, ctx.W, ctx.H);

    ctx.beginPath();
    ctx.strokeStyle = "#ffffff";
    ctx.arc(this.circle.x, this.circle.y, this.circle.r, 0, Math.PI * 2);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = "#ffffff";
    ctx.arc(this.wheel.x, this.wheel.y, this.wheel.r, 0, Math.PI * 2);
    ctx.fill();
};

Screen.prototype.update = function () {
    this.wheel.x = this.circle.x + this.circle.r * Math.cos(this.angle);
    this.wheel.y = this.circle.y + this.circle.r * Math.sin(this.angle);
    if (ctx.keyState[ctx.keys.LEFT]) {
        this.angle -= this.speed;
    }
    if (ctx.keyState[ctx.keys.RIGHT]) {
        this.angle += this.speed;
    }

    if (ctx.keyState[ctx.keys.UP]) {
        this.circle.x += this.xv * Math.cos(this.angle);
        this.circle.y += this.yv * Math.sin(this.angle);
    }

    if (ctx.keyState[ctx.keys.DOWN]) {
        this.circle.x -= this.xv * Math.cos(this.angle);
        this.circle.y -= this.yv * Math.sin(this.angle);
    }
};

Finished Project

Take a look at the finished project here
https://codepen.io/aiosifelisl1/pen/mdOzRpY

Bundlephobia

Andreas Iosifelis — Thu, 25 Feb 2021 15:12:15 +0000

Find the cost of adding a npm package to your bundle

https://bundlephobia.com/