2D Side-Scrolling Game Camera in JavaScript Canvas

8 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

2D Side-Scrolling Game Camera in JavaScript Canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Action Arcade Game</title>
    <style>
        body { margin: 0; background: #111; overflow: hidden; }
        canvas { display: block; margin: 0 auto; background: #222; }
    </style>
</head>
<body>

// Game Settings
const WORLD_WIDTH = 3000; // Total size of the level
const VIEW_WIDTH = canvas.width;
const VIEW_HEIGHT = canvas.height;

// Player Object
const player = {
    x: 100,
    y: 400,
    width: 40,
    height: 40,
    speed: 5,
    vx: 0,
    vy: 0
};

// Camera Object
const camera = {
    x: 0,
    y: 0
};

// Keyboard Input Tracking
const keys = {};
window.addEventListener("keydown", e => keys[e.code] = true);
window.addEventListener("keyup", e => keys[e.code] = false);

// Game Loop
function update() {
    // 1. Handle Input
    if (keys["ArrowRight"] || keys["KeyD"]) player.vx = player.speed;
    else if (keys["ArrowLeft"] || keys["KeyA"]) player.vx = -player.speed;
    else player.vx = 0;

// 2. Move Player & Keep Inside World Bounds
    player.x += player.vx;
    if (player.x < 0) player.x = 0;
    if (player.x > WORLD_WIDTH - player.width) player.x = WORLD_WIDTH - player.width;

// 3. Update Camera to Follow Player (Centered)
    camera.x = player.x - VIEW_WIDTH / 2 + player.width / 2;
    
    // Clamp camera to map edges so it doesn't show empty space
    if (camera.x < 0) camera.x = 0;
    if (camera.x > WORLD_WIDTH - VIEW_WIDTH) camera.x = WORLD_WIDTH - VIEW_WIDTH;

// 4. Render Everything
    render();

requestAnimationFrame(update);
}

function render() {
    // Clear screen
    ctx.clearRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT);

// Save context state, then translate everything relative to the camera
    ctx.save();
    ctx.translate(-camera.x, -camera.y);

// --- DRAW WORLD OBJECTS HERE ---
    
    // Draw Background Grid (to visualize movement)
    ctx.strokeStyle = "#444";
    for(let i = 0; i < WORLD_WIDTH; i += 100) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, VIEW_HEIGHT);
        ctx.stroke();
    }

// Draw an Obstacle/Enemy in the world
    ctx.fillStyle = "red";
    ctx.fillRect(600, 380, 50, 60);
    ctx.fillRect(1400, 380, 50, 60);

// Draw Player
    ctx.fillStyle = "#00ffcc";
    ctx.fillRect(player.x, player.y, player.width, player.height);

// Restore context back to normal (screenspace)
    ctx.restore();

// --- DRAW UI / HUD HERE (Health bars, score) ---
    ctx.fillStyle = "white";
    ctx.font = "20px sans-serif";
    ctx.fillText(`World X: ${Math.floor(player.x)}`, 20, 40);
}

// Start Game Loop
requestAnimationFrame(update);
</script>

</body>
</html>

CSS

Comments 0

…

2D Side-Scrolling Game Camera in JavaScript Canvas

Recommended

Comments 0