JavaScript Game Dev Cheat Sheet

📦 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);
    }
}