AI game creator

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

No:44861

←

Prev Next

→

Flappy bird
Developer User19491｜Date and time 24/2/19 12:15:38
Build time 8.101 sec｜Game capacity 2.574KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird Game</title>
<style>
    canvas {
        background-color: lightblue;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

document.addEventListener('keydown', function(event) {
        if(event.keyCode === 32) { // spacebar
            bird.velocity = jumpHeight;
        }
    });

function drawBird() {
        context.fillStyle = 'yellow';
        context.fillRect(bird.x, bird.y, bird.size, bird.size);
    }

function drawPipe(pipe) {
        context.fillStyle = 'green';
        context.fillRect(pipe.x, 0, pipe.width, pipe.gap);
        context.fillRect(pipe.x, pipe.gap + 150, pipe.width, canvas.height - pipe.gap - 150);
    }

function moveBird() {
        bird.velocity += bird.gravity;
        bird.y += bird.velocity;
    }

function endGame() {
        alert('Game Over! Score: ' + score);
        document.location.reload();
    }

function drawScore() {
        context.fillStyle = 'black';
        context.font = '20px Arial';
        context.fillText('Score: ' + score, 10, 30);
    }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBird();
        moveBird();
        movePipes();
        pipes.forEach(function(pipe) {
            drawPipe(pipe);
        });
        checkCollision();
        drawScore();
        requestAnimationFrame(draw);
    }

draw();

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