AI game creator

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

No:44959

←

Prev Next

→

a tunnel game
Developer User19517｜Date and time 24/2/19 19:30:34
Build time 12.73 sec｜Game capacity 1.896KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tunnel Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }

canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas width="400" height="600"></canvas>
<script>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const playerSize = 20;
const tunnelWidth = 100;
const tunnelSpeed = 5;
let playerX = canvas.width / 2 - playerSize / 2;
let tunnelY = canvas.height;
let tunnelX = Math.random() * (canvas.width - tunnelWidth);

function drawPlayer() {
    ctx.fillStyle = 'white';
    ctx.fillRect(playerX, canvas.height - playerSize, playerSize, playerSize);
}

function drawTunnel() {
    ctx.fillStyle = 'white';
    ctx.fillRect(tunnelX, tunnelY, tunnelWidth, canvas.height);
}

function moveTunnel() {
    tunnelY -= tunnelSpeed;
    if (tunnelY < 0) {
        tunnelY = canvas.height;
        tunnelX = Math.random() * (canvas.width - tunnelWidth);
    }
}

function checkCollision() {
    if (playerX < tunnelX + tunnelWidth && playerX + playerSize > tunnelX &&
        canvas.height - playerSize < tunnelY + canvas.height) {
        alert('Game Over! Your score: ' + Math.floor(tunnelY));
        tunnelY = canvas.height;
        tunnelX = Math.random() * (canvas.width - tunnelWidth);
    }
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawTunnel();
    moveTunnel();
    checkCollision();
    requestAnimationFrame(gameLoop);
}

gameLoop();

</script>
</body>
</html>
```