Space Invaders

Game Introduction

Space Invaders is a classic arcade-style game where players control a spaceship at the bottom of the screen. The objective is to shoot down incoming alien invaders before they reach the bottom of the screen. The game challenges players' reflexes and coordination as they must dodge enemies while firing at them.

How the Game Works

Game Setup: The game uses an HTML <canvas> to render graphics and animate objects. A JavaScript function runs on the window's onload event to initialize the game.
Player Controls: The player can move the spaceship left or right and shoot bullets to destroy the enemies.
Game Loop: The game uses a loop to continuously update the positions of the player, enemies, and bullets. Each frame, it checks for collisions, updates scores, and renders the updated game state.
Collision Detection: The game checks for collisions between bullets and enemies, as well as between the player and enemies. If an enemy collides with the player, the game ends, and the final score is displayed.
Scoring: Players earn points for each enemy destroyed. The score is displayed at the top of the canvas.

Error Handling

Common Issues: If the game doesn't start, ensure that the JavaScript code is correctly pasted and that there are no syntax errors. Check for browser console errors (press F12 in most browsers) to diagnose any issues.

Debugging Tips: Use console.log() statements within the JavaScript code to track variable values and game state changes during execution. If the game runs too slowly or too quickly, adjust the frame rate or the movement speeds of the player and enemies.

Commands and Their Meanings

Command	Key	Meaning
Move Left	Arrow Left	Moves the spaceship to the left.
Move Right	Arrow Right	Moves the spaceship to the right.
Shoot	Spacebar	Fires a bullet from the spaceship.
Game Over	-	Triggered when an enemy collides with the player.

Conclusion

The Space Invaders game is a fun and engaging way to practice your JavaScript skills while creating interactive content. You can further enhance the game by adding more features, such as different enemy types, power-ups, or levels of difficulty. Experiment with the code to see how changes affect gameplay!

Space Invaders with Run Button

Space Invaders Game

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Invaders with Run Button</title>
    <style>
        body {
            background-color: black;
            color: white;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        textarea {
            width: 80%;
            height: 400px;
            font-family: monospace;
            padding: 10px;
            margin-bottom: 20px;
            background-color: #222;
            color: #00ff00;
            border: 1px solid #444;
        }
        .button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #0056b3;
        }
        canvas {
            border: 1px solid white;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<h1>Space Invaders Game</h1
      window.onload = function() {
    // Set up canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

canvas.width = 800;
    canvas.height = 600;

// Player object
    const player = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        speed: 7,
        bullets: [],
        shoot: function() {
            this.bullets.push({
                x: this.x + this.width / 2 - 2.5,
                y: this.y,
                width: 5,
                height: 10,
                speed: 5
            });
        }
    };

// Enemy object
    const enemies = [];
    function createEnemy() {
        enemies.push({
            x: Math.random() * (canvas.width - 50),
            y: 0,
            width: 50,
            height: 50,
            speed: 2 + Math.random() * 3
        });
    }

// Game loop variables
    let keys = [];
    let score = 0;
    let gameOver = false;

// Listen to keyboard events
    document.addEventListener('keydown', (e) => keys[e.key] = true);
    document.addEventListener('keyup', (e) => keys[e.key] = false);

// Main game loop
    function gameLoop() {
        if (gameOver) {
            ctx.fillStyle = 'red';
            ctx.font = '50px Arial';
            ctx.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2);
            ctx.font = '30px Arial';
            ctx.fillText(`Score: ${score}`, canvas.width / 2 - 70, canvas.height / 2 + 50);
            return;
        }

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Player movement
        if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;
        if (keys['ArrowRight'] && player.x + player.width < canvas.width) player.x += player.speed;
        if (keys[' '] && player.bullets.length < 10) player.shoot();

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

// Update and draw bullets
        player.bullets = player.bullets.filter(bullet => bullet.y > 0);
        player.bullets.forEach(bullet => {
            bullet.y -= bullet.speed;
            ctx.fillStyle = 'yellow';
            ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        });

// Create and draw enemies
        if (Math.random() < 0.02) createEnemy();
        enemies.forEach((enemy, index) => {
            enemy.y += enemy.speed;
            ctx.fillStyle = 'red';
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

// Check for collision with player
            if (
                enemy.x < player.x + player.width &&
                enemy.x + enemy.width > player.x &&
                enemy.y < player.y + player.height &&
                enemy.y + enemy.height > player.y
            ) {
                gameOver = true;
            }

// Check for bullet collision
            player.bullets.forEach((bullet, bIndex) => {
                if (
                    bullet.x < enemy.x + enemy.width &&
                    bullet.x + bullet.width > enemy.x &&
                    bullet.y < enemy.y + enemy.height &&
                    bullet.y + bullet.height > enemy.y
                ) {
                    enemies.splice(index, 1);
                    player.bullets.splice(bIndex, 1);
                    score++;
                }
            });
        });

// Score display
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.fillText(`Score: ${score}`, 10, 20);

requestAnimationFrame(gameLoop);
    }

gameLoop();
};

Space Invaders

Use arrow keys to move, space to shoot.

Html,css,java full course free

Search This Blog

Javascript #4

Space Invaders

Game Introduction

How the Game Works

Error Handling

Commands and Their Meanings

Conclusion

Space Invaders Game

Space Invaders

Comments

Post a Comment

Popular posts from this blog

Javascript #3 Revision and more

Why should you have to learn javascript ?

Javascript #2