Running from a spikeball for all devices's game

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

No:17204

131

←

Prev Next

→

Running from a spikeball for all devices
Developer User7570｜Date and time 23/9/22 10:08:45
Build time 30.824 sec｜Game capacity 4.147KB｜

Script

Sure, here's a simple game where you have to control a character to avoid getting hit by a spikeball. It is implemented as a single HTML file, enclosed in script tags and written in JavaScript. The game can be played on any device, including smartphones, and utilizes pictograms for ease of understanding.

To play the game, you can simply copy the above code into a new HTML file and open it in any web browser. The player can control the character using the left and right arrow keys on their keyboard (or corresponding touch controls on a smartphone). The goal is to avoid getting hit by the spikeball and survive as long as possible. The score increases each time the spikeball passes below the bottom of the canvas. The game will end if the player collides with the spikeball, at which point the "Game Over" message will be displayed.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Spikeball Escape</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set up the player character
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            width: 40,
            height: 40,
            color: "blue",
            speed: 5
        };

// Set up the spikeball
        const spikeball = {
            x: Math.random() * (canvas.width - 50),
            y: 0,
            radius: 20,
            color: "red",
            speed: 2
        };

let score = 0;
        let isGameOver = false;

// Event listeners to handle player control
        document.addEventListener("keydown", movePlayer);

function movePlayer(event) {
            if (event.key === "ArrowLeft" && player.x > 0) {
                player.x -= player.speed;
            }
            if (event.key === "ArrowRight" && player.x + player.width < canvas.width) {
                player.x += player.speed;
            }
        }

// Game loop function
        function gameLoop() {
            if (!isGameOver) {
                update();
                draw();
                requestAnimationFrame(gameLoop);
            }
        }

// Update game components
        function update() {
            spikeball.y += spikeball.speed;

// Check for collision between player and spikeball
            if (
                player.x < spikeball.x + spikeball.radius &&
                player.x + player.width > spikeball.x - spikeball.radius &&
                player.y < spikeball.y + spikeball.radius &&
                player.y + player.height > spikeball.y - spikeball.radius
            ) {
                isGameOver = true;
            }

// Track score
            if (spikeball.y > canvas.height) {
                score++;
                spikeball.x = Math.random() * (canvas.width - 50);
                spikeball.y = 0;
            }
        }

// Draw game components
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

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

// Draw spikeball
            ctx.beginPath();
            ctx.arc(spikeball.x, spikeball.y, spikeball.radius, 0, Math.PI * 2);
            ctx.fillStyle = spikeball.color;
            ctx.fill();
            ctx.closePath();

// Display score
            ctx.font = "16px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 8, 20);

if (isGameOver) {
                ctx.font = "30px Arial";
                ctx.fillStyle = "red";
                ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
            }
        }

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