Classic Space Invaders Game with JavaScript Canvas

238 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Classic Space Invaders Game with JavaScript Canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Invaders</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #111;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }
        h1 {
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        #score-board {
            font-size: 20px;
            margin-bottom: 10px;
        }
        canvas {
            background-color: #000;
            border: 4px solid #333;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
        }
        .instructions {
            margin-top: 15px;
            color: #888;
            font-size: 14px;
        }
    </style>
</head>
<body>

<h1>SPACE INVADERS</h1>
    <div id="score-board">SCORE: <span id="score">0</span></div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div class="instructions">Use Left / Right Arrows to Move. Press SpaceBAR to Shoot.</div>

// Game Configuration
        let score = 0;
        let gameOver = false;
        let gameWon = false;

// Player configuration
        const player = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 60,
            width: 50,
            height: 30,
            speed: 6,
            dx: 0
        };

// Projectiles
        const bullets = [];
        const bulletSpeed = 7;

// Invaders grid definition
        const invaderRows = 4;
        const invaderCols = 9;
        const invaderWidth = 40;
        const invaderHeight = 30;
        const invaderPadding = 20;
        const invaderOffsetTop = 60;
        const invaderOffsetLeft = 50;
        
        let invaders = [];
        let invaderDirection = 1; // 1 = Right, -1 = Left
        let invaderSpeed = 1;
        const invaderDropDistance = 15;

// Initialize Invaders Layout
        function initInvaders() {
            invaders = [];
            for (let r = 0; r < invaderRows; r++) {
                for (let c = 0; c < invaderCols; c++) {
                    const invaderX = c * (invaderWidth + invaderPadding) + invaderOffsetLeft;
                    const invaderY = r * (invaderHeight + invaderPadding) + invaderOffsetTop;
                    invaders.push({
                        x: invaderX,
                        y: invaderY,
                        width: invaderWidth,
                        height: invaderHeight,
                        alive: true
                    });
                }
            }
        }

// Draw Player Ship (Retro Silhouette)
        function drawPlayer() {
            ctx.fillStyle = '#00FF00'; // Classic Green
            ctx.fillRect(player.x, player.y + 10, player.width, player.height - 10);
            ctx.fillRect(player.x + player.width / 2 - 5, player.y, 10, 10);
        }

// Draw Invaders (Alien Layouts)
        function drawInvaders() {
            ctx.fillStyle = '#FFFFFF';
            invaders.forEach(invader => {
                if (invader.alive) {
                    // Draw outer box body
                    ctx.fillRect(invader.x, invader.y, invader.width, invader.height);
                    // Clear inner areas to create a basic "alien eye" sprite look
                    ctx.clearRect(invader.x + 8, invader.y + 8, 6, 6);
                    ctx.clearRect(invader.x + invader.width - 14, invader.y + 8, 6, 6);
                }
            });
        }

// Draw Bullets
        function drawBullets() {
            ctx.fillStyle = '#FF5555';
            bullets.forEach(bullet => {
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });
        }

// Move Player and Boundary Checks
        function movePlayer() {
            player.x += player.dx;
            if (player.x < 0) player.x = 0;
            if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
        }

// Move Invaders & Handle Edge Shifting
        function moveInvaders() {
            let shiftDown = false;

// Check if any alien hit the boundary walls
            invaders.forEach(invader => {
                if (invader.alive) {
                    invader.x += invaderSpeed * invaderDirection;
                    if (invader.x + invader.width > canvas.width || invader.x < 0) {
                        shiftDown = true;
                    }
                }
            });

// If a wall is hit, reverse direction and push them down
            if (shiftDown) {
                invaderDirection *= -1;
                invaders.forEach(invader => {
                    invader.y += invaderDropDistance;
                    // Game over if invaders reach the player tier
                    if (invader.alive && invader.y + invader.height >= player.y) {
                        gameOver = true;
                    }
                });
            }
        }

// Update Bullet Tracking
        function updateBullets() {
            for (let i = bullets.length - 1; i >= 0; i--) {
                bullets[i].y -= bulletSpeed;
                // Splice bullets that escape the canvas screen boundaries
                if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                }
            }
        }

// AABB Axis-Aligned Bounding Box Collision Detection Strategy
        function checkCollisions() {
            for (let b = bullets.length - 1; b >= 0; b--) {
                for (let i = 0; i < invaders.length; i++) {
                    let bullet = bullets[b];
                    let invader = invaders[i];

if (invader.alive && bullet) {
                        if (bullet.x < invader.x + invader.width &&
                            bullet.x + bullet.width > invader.x &&
                            bullet.y < invader.y + invader.height &&
                            bullet.y + bullet.height > invader.y) {
                            
                            // Register Impact
                            invader.alive = false;
                            bullets.splice(b, 1);
                            score += 10;
                            scoreElement.textContent = score;
                            break;
                        }
                    }
                }
            }

// Evaluate remaining targets
            if (invaders.length > 0 && invaders.every(inv => !inv.alive)) {
                gameWon = true;
            }
        }

// Render States Display Text
        function drawStatusMessage(message) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#00FF00';
            ctx.font = '40px "Courier New"';
            ctx.textAlign = 'center';
            ctx.fillText(message, canvas.width / 2, canvas.height / 2);
            ctx.font = '20px "Courier New"';
            ctx.fillText("Press Spacebar to Restart", canvas.width / 2, canvas.height / 2 + 50);
        }

// Central Engine Execution Loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver && !gameWon) {
                movePlayer();
                moveInvaders();
                updateBullets();
                checkCollisions();

drawPlayer();
                drawInvaders();
                drawBullets();

requestAnimationFrame(gameLoop);
            } else if (gameOver) {
                drawStatusMessage("GAME OVER");
            } else if (gameWon) {
                drawStatusMessage("VICTORY!");
            }
        }

// Reset Engine Environment Variables
        function resetGame() {
            score = 0;
            gameOver = false;
            gameWon = false;
            scoreElement.textContent = score;
            player.x = canvas.width / 2 - 25;
            bullets.length = 0;
            initInvaders();
            gameLoop();
        }

// User Inputs Management Engine
        window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'Left') {
                player.dx = -player.speed;
            } else if (e.key === 'ArrowRight' || e.key === 'Right') {
                player.dx = player.speed;
            } else if (e.key === ' ' || e.code === 'Space') {
                e.preventDefault(); // Mute default window page scrolling mechanics
                if (gameOver || gameWon) {
                    resetGame();
                } else {
                    // Restrict user payload limits to a maximum concurrent projectile cap
                    if (bullets.length < 3) {
                        bullets.push({
                            x: player.x + player.width / 2 - 2,
                            y: player.y,
                            width: 4,
                            height: 15
                        });
                    }
                }
            }
        });

window.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'Left' || e.key === 'ArrowRight' || e.key === 'Right') {
                player.dx = 0;
            }
        });

// Bootstrap Core
        initInvaders();
        gameLoop();
    </script>
</body>
</html>

CSS

Comments 0

…

Classic Space Invaders Game with JavaScript Canvas

Recommended

Comments 0