Recrea a space invaders's game

Click here for free DL of the app version that can save data.

No:40461

←

Prev Next

→

Recrea a space invaders
Developer User18058｜Date and time 24/2/3 1:03:36
Build time 15.995 sec｜Game capacity 3.781KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Invaders</title>
    <style>
        canvas {
            border: 2px solid #000;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

var player = {
            x: (canvas.width - 32) / 2,
            y: canvas.height - 64,
            width: 32,
            height: 32
        };

// Create invaders
        for (var i = 0; i < 10; i++) {
            invaders.push({
                x: i * 50 + 10,
                y: 0,
                width: 32,
                height: 32,
                direction: 1
            });
        }

// Keyboard event listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// Player movement
        var rightPressed = false;
        var leftPressed = false;

function keyDownHandler(event) {
            if (event.keyCode == 39) {
                rightPressed = true;
            } else if (event.keyCode == 37) {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.keyCode == 39) {
                rightPressed = false;
            } else if (event.keyCode == 37) {
                leftPressed = false;
            }
        }

// Game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
            movePlayer();
            drawInvaders();

requestAnimationFrame(gameLoop);
        }

// Player drawing
        function drawPlayer() {
            ctx.beginPath();
            ctx.rect(player.x, player.y, player.width, player.height);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// Player movement
        function movePlayer() {
            if (rightPressed && player.x < canvas.width - player.width) {
                player.x += playerSpeed;
            } else if (leftPressed && player.x > 0) {
                player.x -= playerSpeed;
            }
        }

// Invaders drawing
        function drawInvaders() {
            for (var i = 0; i < invaders.length; i++) {
                ctx.beginPath();
                ctx.rect(invaders[i].x, invaders[i].y, invaders[i].width, invaders[i].height);
                ctx.fillStyle = "#ff0000";
                ctx.fill();
                ctx.closePath();

invaders[i].x += 2 * invaders[i].direction;

// Reverse direction when invaders reach the canvas borders
                if (invaders[i].x + invaders[i].width > canvas.width || invaders[i].x < 0) {
                    invaders[i].direction *= -1;
                    invaders[i].y += 32;
                }

// Detect collision between player and invaders
                if (player.x < invaders[i].x + invaders[i].width &&
                    player.x + player.width > invaders[i].x &&
                    player.y < invaders[i].y + invaders[i].height &&
                    player.y + player.height > invaders[i].y) {
                    // Game over logic here (e.g., stop game loop, show game over message)
                    // ...
                }
            }
        }

// Start game loop
        gameLoop();
    </script>
</body>
</html>