A game where you can jump and you need to avoid spikes and your directly going to the left or right's game

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

No:44506

←

Prev Next

→

A game where you can jump and you need to avoid sp..ALL
Developer User19400｜Date and time 24/2/18 6:18:20
Build time 7.013 sec｜Game capacity 2.148KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Avoid!</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

let playerX = canvas.width / 2;
        let playerY = canvas.height - 50;
        let playerWidth = 50;
        let playerHeight = 50;
        let playerSpeed = 5;

let spikeX = Math.random() * (canvas.width - playerWidth);
        let spikeY = 0;
        let spikeWidth = 50;
        let spikeHeight = 50;
        let spikeSpeed = 5;

function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
        }

function drawSpike() {
            ctx.fillStyle = 'red';
            ctx.fillRect(spikeX, spikeY, spikeWidth, spikeHeight);
        }

function update() {
            spikeY += spikeSpeed;

if (spikeY >= canvas.height) {
                spikeX = Math.random() * (canvas.width - playerWidth);
                spikeY = 0;
            }

if (playerX < spikeX + spikeWidth && playerX + playerWidth > spikeX && playerY < spikeY + spikeHeight && playerY + playerHeight > spikeY) {
                alert('Game over!');
                playerX = canvas.width / 2;
                playerY = canvas.height - 50;
            }
        }

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

drawPlayer();
            drawSpike();
        }

function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft' && playerX > 0) {
                playerX -= playerSpeed;
            }

if (event.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
                playerX += playerSpeed;
            }
        });

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