Classic Arcade Shooter Game in JavaScript Canvas

HTML

CSS

JS

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score-element');

// Set canvas rendering size
canvas.width = 800;
canvas.height = 600;

// Game State
let score = 0;
let gameOver = false;
const keys = {};

// Player Setup
const player = {
    x: canvas.width / 2 - 25,
    y: canvas.height - 60,
    width: 50,
    height: 30,
    speed: 7,
    color: '#00ffcc'
};

// Arrays for tracking active elements
const bullets = [];
const enemies = [];

// Track keyboard inputs
window.addEventListener('keydown', (e) => keys[e.key] = true);
window.addEventListener('keyup', (e) => keys[e.key] = false);

// Fire single bullets on Space bar press
window.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Spacebar') {
        if (!gameOver) {
            bullets.push({
                x: player.x + player.width / 2 - 4,
                y: player.y,
                width: 8,
                height: 15,
                speed: 10,
                color: '#ff3366'
            });
        } else {
            resetGame();
        }
    }
});

// Enemy spawning configuration
function spawnEnemy() {
    if (gameOver) return;
    const size = Math.random() * (40 - 20) + 20; // Random sizes
    enemies.push({
        x: Math.random() * (canvas.width - size),
        y: -size,
        width: size,
        height: size,
        speed: Math.random() * (4 - 1.5) + 1.5,
        color: '#ffcc00'
    });
    // Schedule next spawn dynamically
    setTimeout(spawnEnemy, Math.random() * (1500 - 600) + 600);
}

// Axis-Aligned Bounding Box (AABB) Collision detection formula
function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

// Update game physics and positions
function update() {
    if (gameOver) return;

// Handle Player movement boundaries
    if ((keys['ArrowLeft'] || keys['a']) && player.x > 0) {
        player.x -= player.speed;
    }
    if ((keys['ArrowRight'] || keys['d']) && player.x < canvas.width - player.width) {
        player.x += player.speed;
    }

// Process Bullets (moving upward)
    for (let i = bullets.length - 1; i >= 0; i--) {
        bullets[i].y -= bullets[i].speed;
        // Clean up off-screen bullets to save system memory
        if (bullets[i].y + bullets[i].height < 0) {
            bullets.splice(i, 1);
        }
    }

// Process Enemies (moving downward)
    for (let i = enemies.length - 1; i >= 0; i--) {
        enemies[i].y += enemies[i].speed;

// Condition 1: Enemy reaches bottom edge -> Game Over
        if (enemies[i].y > canvas.height) {
            gameOver = true;
        }

// Condition 2: Enemy collides directly with the Player -> Game Over
        if (checkCollision(enemies[i], player)) {
            gameOver = true;
        }

// Condition 3: Bullet hits Enemy -> Destroy both & increment score
        for (let j = bullets.length - 1; j >= 0; j--) {
            if (checkCollision(bullets[i], bullets[j])) {
                enemies.splice(i, 1);
                bullets.splice(j, 1);
                score += 100;
                scoreElement.textContent = score;
                break; // Break out of inner loop since the enemy is gone
            }
        }
    }
}

// Render updated vectors onto the screen
function draw() {
    // Clear canvas frame before drawing next sequence
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Player
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw Bullets
    bullets.forEach(bullet => {
        ctx.fillStyle = bullet.color;
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });

// Draw Enemies
    enemies.forEach(enemy => {
        ctx.fillStyle = enemy.color;
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
    });

// Draw Game Over Screen overlay
    if (gameOver) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';
        ctx.font = '40px Courier New';
        ctx.textAlign = 'center';
        ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20);

ctx.font = '20px Courier New';
        ctx.fillText('Press SPACEBAR to Restart', canvas.width / 2, canvas.height / 2 + 30);
    }
}

// Master Loop executing up to 60fps+ depending on monitor refresh rates
function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

function resetGame() {
    bullets.length = 0;
    enemies.length = 0;
    score = 0;
    scoreElement.textContent = score;
    player.x = canvas.width / 2 - 25;
    gameOver = false;
}

// Start Game Entry Points
spawnEnemy();
gameLoop();

Classic Arcade Shooter Game in JavaScript Canvas

Recommended

Comments 0