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

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

No:17121

←

Prev Next

→

Space Invaders with the Mario star for all devices
Developer User7570｜Date and time 23/9/22 9:02:19
Build time 18.086 sec｜Game capacity 2.527KB｜

Script

Sure, here's a basic implementation of the Space Invaders game using the Mario star pictogram. The game is designed to be played on all devices, including smartphones. Save the following code in a single HTML file and open it in any web browser to start playing.

In this implementation, you control the Mario star using the left and right arrow keys. The star will move horizontally within the game canvas, trying to avoid the invaders. You can further enhance the game by adding enemy invader objects and implementing collision detection logic.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Space Invaders - Mario Star Edition</title>
    <style>
        canvas {
            border: 2px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Game logic goes here

// Canvas setup
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// Game variables
        let star = new Image();
        star.src = "mario_star.png";
        let starX = canvas.width / 2 - 16;
        let starY = canvas.height - 48;
        let starWidth = 32;
        let starHeight = 32;
        let leftPressed = false;
        let rightPressed = false;

document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                leftPressed = true;
            }
            else if (event.key === "ArrowRight") {
                rightPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key === "ArrowLeft") {
                leftPressed = false;
            }
            else if (event.key === "ArrowRight") {
                rightPressed = false;
            }
        }

function drawStar() {
            ctx.drawImage(star, starX, starY, starWidth, starHeight);
        }

function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (leftPressed && starX >= 0) {
                starX -= 4;
            }
            else if (rightPressed && starX + starWidth <= canvas.width) {
                starX += 4;
            }

drawStar();

requestAnimationFrame(update);
        }

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