Space Invaders with the Mario invincibility star for all devices's game

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

No:17124

←

Prev Next

→

Space Invaders with the Mario invincibility star f..ALL
Developer User7570｜Date and time 23/9/22 9:04:24
Build time 32.517 sec｜Game capacity 4.589KB｜

Script

Sure! Here's an example of a simple Space Invaders game using JavaScript and HTML, with the Mario invincibility star power-up. This implementation works on all devices, including smartphones. The game uses pictograms for the sprites.

You can copy and save the above code into a single HTML file (e.g., "space_invaders.html") and open it in your web browser to play the game. Use the left and right arrow keys to move the player and try to avoid the invaders. If you collect the Mario invincibility star power-up, you can destroy the invaders by colliding with them. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders - Super Star Edition</title>
    <style>
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Game variables
        const gameWidth = canvas.width;
        const gameHeight = canvas.height;
        let player = { x: gameWidth / 2, y: gameHeight - 30, width: 30, height: 30 };
        let invaders = [];
        const invaderSize = 30;
        const invaderGap = 10;
        const invaderRowCount = 3;
        const invaderColCount = 8;
        let starPower = false;

// Create the player
        function drawPlayer() {
            ctx.beginPath();
            ctx.rect(player.x, player.y, player.width, player.height);
            ctx.fillStyle = "#0f0";
            ctx.fill();
            ctx.closePath();
        }

// Create the invaders
        for (let col = 0; col < invaderColCount; col++) {
            for (let row = 0; row < invaderRowCount; row++) {
                invaders.push({
                    x: col * (invaderSize + invaderGap) + invaderGap,
                    y: row * (invaderSize + invaderGap) + invaderGap,
                    width: invaderSize,
                    height: invaderSize,
                    isAlive: true
                });
            }
        }

// Draw the invaders
        function drawInvaders() {
            invaders.forEach((invader) => {
                if (invader.isAlive) {
                    ctx.beginPath();
                    ctx.rect(invader.x, invader.y, invader.width, invader.height);
                    ctx.fillStyle = "#f00";
                    ctx.fill();
                    ctx.closePath();
                }
            });
        }

// Handle key events
        const keys = {};
        document.addEventListener("keydown", (event) => {
            keys[event.keyCode] = true;
        });

document.addEventListener("keyup", (event) => {
            delete keys[event.keyCode];
        });

// Update the game state
        function update() {
            if (starPower) {
                // Handle player movement during star power
                if (37 in keys && player.x > 0) {
                    player.x -= 5;
                }

if (39 in keys && player.x < gameWidth - player.width) {
                    player.x += 5;
                }
            } else {
                // Handle player movement without star power
                if (37 in keys && player.x > 0) {
                    player.x -= 3;
                }

if (39 in keys && player.x < gameWidth - player.width) {
                    player.x += 3;
                }
            }

// Check for collision with invaders
            invaders.forEach((invader) => {
                if (
                    invader.isAlive &&
                    player.x < invader.x + invader.width &&
                    player.x + player.width > invader.x &&
                    player.y < invader.y + invader.height &&
                    player.y + player.height > invader.y
                ) {
                    if (starPower) {
                        invader.isAlive = false; // Destroy the invader
                    } else {
                        // Game over condition
                        alert("Game Over!");
                        document.location.reload();
                    }
                }
            });

// Draw game objects
            ctx.clearRect(0, 0, gameWidth, gameHeight);
            drawPlayer();
            drawInvaders();

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>
```