✦ JVDesignStudio · No Sign-Up Required

JavaScript Game Dev Cheat Sheet

A one-page printable reference for variables, the Canvas API, game loops, keyboard input, collision detection and common patterns for building browser games with vanilla JS. Pin it next to your monitor!

📦 Variables & Types

let health = 100;
const playerName = "Pip";
let speed = 4.5;
let isAlive = true;

typeof health;  // "number"

const msg = `Score: ${score}`;

Use const by default, let when a value needs to change. Template literals use backticks with ${}.

🖌️ Canvas Basics

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

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ffd166";
ctx.fillRect(x, y, 32, 32);

const img = new Image();
img.src = "player.png";
ctx.drawImage(img, x, y);

🔄 Game Loop

let lastTime = 0;

function loop(timestamp) {
    const deltaTime = (timestamp - lastTime) / 1000;
    lastTime = timestamp;

    update(deltaTime);
    draw();

    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

deltaTime keeps movement speed consistent regardless of frame rate.

⌨️ Keyboard Input

const keys = {};

window.addEventListener("keydown", (e) => {
    keys[e.key] = true;
});
window.addEventListener("keyup", (e) => {
    keys[e.key] = false;
});

if (keys["ArrowRight"]) player.x += speed;
if (keys[" "]) player.jump();

📐 Collision Detection

function isColliding(a, b) {
    return (
        a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y
    );
}

if (isColliding(player, enemy)) {
    player.health -= 10;
}

This is AABB (axis-aligned bounding box) overlap a fast rectangle vs rectangle check.

🗂️ Arrays & Objects

enemies.push(new Enemy(x, y));

const alive = enemies.filter(e => e.hp > 0);

const positions = enemies.map(e => e.x);

enemies.forEach(e => e.update(dt));

enemies = enemies.filter(e => !e.dead);

filter, map and forEach are the bread and butter of managing lists of game entities.

🏗️ Functions & Classes

class Player {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.hp = 100;
    }

    update(dt) {
        this.x += this.vx * dt;
    }

    draw(ctx) {
        ctx.fillRect(this.x, this.y, 32, 32);
    }
}

🎯 Common Patterns

// A complete minimal game loop
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const player = { x: 50, y: 50, w: 32, h: 32, vx: 0 };
const keys = {};

window.addEventListener("keydown", e => keys[e.key] = true);
window.addEventListener("keyup",   e => keys[e.key] = false);

let lastTime = 0;

function update(dt) {
    player.vx = keys["ArrowRight"] ? 200 : keys["ArrowLeft"] ? -200 : 0;
    player.x += player.vx * dt;
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#ffd166";
    ctx.fillRect(player.x, player.y, player.w, player.h);
}

function loop(timestamp) {
    const dt = (timestamp - lastTime) / 1000;
    lastTime = timestamp;
    update(dt);
    draw();
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

update() moves game state forward, draw() renders it, and requestAnimationFrame keeps the loop running in sync with the browser's refresh rate.

Want to build a whole game?

Follow one of our free step-by-step workshops in the Workshop hub.

🔧 Browse Workshops →