Pages

▼

Saturday, November 9, 2024

Creating a Modern Twist on a Classic: Building Space Invaders with JavaScript and HTML5 Canvas

 

Creating a Modern Twist on a Classic: Building Space Invaders with JavaScript and HTML5 Canvas

Game created by weelookang@gmail.com

link

Remember the thrill of playing Space Invaders on a classic arcade machine? The pixelated aliens descending menacingly, the frantic firing to save the planet, and the sheer joy of achieving a high score? What if you could recreate that excitement and share it with others through a game you built yourself?

In this blog post, we'll dive into how we crafted a modern version of Space Invaders using JavaScript and the HTML5 Canvas. Whether you're a seasoned developer or a coding enthusiast, join us on this exciting journey to bring a beloved classic back to life!

Table of Contents

  1. Introduction
  2. Setting Up the Canvas
  3. Designing the Game Elements
  4. Game Mechanics
  5. Adding Sound and Music
  6. Enhancing the Gameplay
  7. Displaying Scores and High Scores
  8. Final Touches and Optimization
  9. Conclusion
  10. Play the Game

Introduction

The idea was simple: recreate Space Invaders with a modern twist while preserving its nostalgic charm. Using JavaScript and the HTML5 Canvas, we set out to build a game that's not only fun to play but also educational for those interested in game development.

By the end of this post, you'll understand how the game works under the hood, and perhaps, you'll be inspired to create your own version or add new features!

Setting Up the Canvas

The HTML5 Canvas is a powerful tool for rendering graphics on the web. It's perfect for game development due to its flexibility and performance.

HTML Structure:

html
<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders Game Enhanced</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
            margin: 0 auto;
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <!-- Game scripts will go here -->
</body>
</html>

We start with a simple HTML structure, setting the body and canvas backgrounds to black to emulate the original arcade feel.

JavaScript Initialization:

javascript
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');

// Adjust canvas size to fit the screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

We obtain the canvas context and set its dimensions to match the browser window, ensuring a full-screen gaming experience.

Designing the Game Elements

Player Ships

We have two players, each controlling their own ship. The ships are simple triangular shapes drawn on the canvas.

Creating the Ship:

javascript
function createPlayerShip(color) {
    var shipCanvas = document.createElement('canvas');
    shipCanvas.width = 30;
    shipCanvas.height = 20;
    var shipCtx = shipCanvas.getContext('2d');

    shipCtx.fillStyle = color;
    shipCtx.beginPath();
    shipCtx.moveTo(15, 0);
    shipCtx.lineTo(30, 20);
    shipCtx.lineTo(0, 20);
    shipCtx.closePath();
    shipCtx.fill();

    return shipCanvas;
}

By drawing the ship on an off-screen canvas, we can reuse the image efficiently during rendering.

Invaders

The invaders are designed with a variety of shapes to represent different types, much like the original game.

Invader Types:

  • Small Invaders: Fast but with lower points.
  • Medium Invaders: Balanced in speed and points.
  • Large Invaders: Slower but with higher points.

Initializing Invaders:

javascript
function initInvaders() {
    invaders = [];
    for (var r = 0; r < invaderRows; r++) {
        for (var c = 0; c < invaderCols; c++) {
            var type, points;
            // Determine type and points based on row
            invaders.push({
                x: c * (invaderWidth + invaderPadding) + invaderOffsetLeft,
                y: r * (invaderHeight + invaderPadding) + invaderOffsetTop,
                width: invaderWidth,
                height: invaderHeight,
                status: 1,
                type: type,
                points: points
            });
        }
    }
}

We've increased the padding between invaders to make their unique shapes more distinguishable.

Shields

The shields provide protection for the players but can be destroyed by both invader and player bullets.

Initializing Shields:

javascript
function initShields() {
    shields = [];
    shieldPositions.forEach(function(x) {
        var shield = {
            x: x,
            y: shieldY,
            width: shieldWidth,
            height: shieldHeight,
            blocks: []
        };
        // Create grid blocks for each shield
        shields.push(shield);
    });
}

We've changed the shield color to teal for better visibility and aesthetics.

Game Mechanics

Movement and Controls

Players can control their ships using the keyboard or device tilt (on mobile).

Keyboard Controls:

  • Player 1: 'A' (Left), 'D' (Right), 'S' (Fire)
  • Player 2: Left Arrow (Left), Right Arrow (Right), Down Arrow (Fire)

Handling Input:

javascript
document.addEventListener('keydown', function(e) {
    keys[e.keyCode] = true;
});

document.addEventListener('keyup', function(e) {
    keys[e.keyCode] = false;
});

Shooting Mechanics

Players can shoot bullets to destroy invaders. We've implemented a rate limiter to prevent spamming.

Shooting Logic:

javascript
if (keys[player.controls.fire]) {
    if (!player.canShoot) {
        player.bullets.push({
            x: player.x + player.width / 2 - 2.5,
            y: player.y,
            width: 5,
            height: 10,
            speed: bulletSpeed
        });
        player.canShoot = true;
        setTimeout(function() {
            player.canShoot = false;
        }, 300);
        // Play shoot sound
    }
}

Collision Detection

Detecting collisions between bullets and invaders (or shields) is crucial for gameplay.

Collision Function:

javascript
function collision(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;
}

We use axis-aligned bounding box (AABB) collision detection for simplicity and efficiency.

Adding Sound and Music

Sound effects enhance the gaming experience by providing audio feedback.

Loading Audio Files:

javascript
var shootSound = new Audio('shoot.mp3');
var invaderHitSound = new Audio('invader_hit.mp3');
var playerHitSound = new Audio('player_hit.mp3');
var backgroundMusic = new Audio('background_music.mp3');
backgroundMusic.loop = true;

We play the background music when the player interacts with the game.

Starting Music on Interaction:

javascript
document.body.addEventListener('click', function() {
    backgroundMusic.play();
}, { once: true });

Enhancing the Gameplay

Two-Player Mode

We've implemented a two-player mode to increase the fun and competitiveness.

Prompting for Two-Player Mode:

javascript
var isTwoPlayer = confirm("Do you want to play in two-player mode?");

Both players have separate scores and lives, and the game continues until both are defeated.

Levels and Difficulty

As players destroy invaders, they progress through levels with increasing difficulty.

Increasing Difficulty:

javascript
if (invadersDestroyed == invaders.length) {
    level++;
    invaderSpeed += 0.5;
    initInvaders();
}

Invaders become faster, and their bullet frequency increases, keeping the game challenging.

Displaying Scores and High Scores

Scores are displayed prominently, with a high score list to encourage replayability.

Score Display:

javascript
// Player 1 Score on the left
ctx.textAlign = 'left';
ctx.fillText('Player 1: ' + pad(player1.score, 5), 20, 30);

// Total Score in the center
ctx.textAlign = 'center';
ctx.fillText('Total Score: ' + pad(totalScore, 5), canvas.width / 2, 30);

// Player 2 Score on the right
ctx.textAlign = 'right';
ctx.fillText('Player 2: ' + pad(player2.score, 5), canvas.width - 20, 30);

Top Scores Management:

javascript
var topScores = JSON.parse(localStorage.getItem('topScores')) || [];

function endGame() {
    // Prompt for names and save scores
    // Sort and display top scores
}

We use localStorage to persist high scores between sessions.

Final Touches and Optimization

To ensure smooth gameplay, we've optimized rendering and game loops.

Using requestAnimationFrame:

javascript
function gameLoop() {
    update();
    render();
    if (!gameOver) {
        requestAnimationFrame(gameLoop);
    }
}

This method synchronizes the game loop with the browser's refresh rate, providing a smoother experience.

Responsive Design:

We've added event listeners to handle window resizing, ensuring the game adapts to different screen sizes.

javascript
window.addEventListener('resize', function() {
    // Adjust canvas and game elements
});

Conclusion

Building this version of Space Invaders was both nostalgic and enlightening. It showcases how classic games can be reimagined with modern web technologies, making them accessible to a new generation of players.

We hope this journey inspires you to delve into game development or perhaps improve upon this game. The possibilities are endless when creativity meets code!

Play the Game

Ready to save the planet from the invading aliens? Click the link below to play the game:

Play Space Invaders Enhanced

Feel free to share your high scores and feedback! Let's keep the spirit of retro gaming alive together.

at

No comments:

Post a Comment