Game where you are a cube and you are going through a level, you have to avoid spikes and get to the end of each screen, 1 spi,e per screen, get through 10 screens and you win the game's game

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

No:51954

←

Prev Next

→

Game where you are a cube and you are going throug..ALL
Developer User19162｜Date and time 24/3/17 6:23:11
Build time 6.952 sec｜Game capacity 2.182KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Spike Avoider Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

const playerSize = 20;
        let playerX = 50;
        let playerY = canvas.height / 2;

let spikeX = canvas.width - 50;
        let spikeY = canvas.height / 2;

let level = 0;

const movePlayer = (event) => {
            switch(event.key) {
                case 'ArrowUp':
                    playerY -= 5;
                    break;
                case 'ArrowDown':
                    playerY += 5;
                    break;
            }
        };

const checkCollision = () => {
            if(playerX + playerSize >= spikeX && playerX <= spikeX + playerSize && playerY + playerSize >= spikeY && playerY <= spikeY + playerSize) {
                level++;
                playerX = 50;
                spikeX = canvas.width - 50;
            }
        };

const draw = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'blue';
          illRect(playerX, playerY, playerSize, playerSize);

ctx.fillStyle = 'red';
            ctx.fillRect(spikeX, spikeY, playerSize, playerSize);
        };

const update = () => {
            checkCollision();

if(level === 10) {
                alert('Congratulations! You won the game!');
            } else {
                spikeX -= 2;

if(spikeX <= 0 - playerSize) {
                    spikeX = canvas.width - 50;
                    spikeY = Math.floor(Math.random() * (canvas.height - 20));
                }

draw();
                requestAnimationFrame(update);
            }
        };

document.addEventListener('keydown', movePlayer);

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