AI game creator

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

No:46597

←

Prev Next

→

Flappy bird
Developer User20148｜Date and time 24/2/25 9:48:31
Build time 6.618 sec｜Game capacity 2.224KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird Game</title>
    <style>
        canvas {
            background-color: #70c5ce;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="500"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const bird = new Image();
        bird.src = "bird.png";
        const pipeTop = new Image();
        pipeTop.src = "pipeTop.png";
        const pipeBottom = new Image();
        pipeBottom.src = "pipeBottom.png";

let birdX = 50;
        let birdY = 200;
        let gravity = 1;
        let score = 0;

let pipes = [
            {x: canvas.width, y: 0},
            {x: canvas.width + 200, y: 100},
            {x: canvas.width + 400, y: 50},
            {x: canvas.width + 600, y: 150}
        ];

document.addEventListener("keydown", () => {
            birdY -= 30;
        });

function draw() {
            ctx.fillStyle = "#87CEEB"; 
            ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(bird, birdX, birdY, 50, 50);
            birdY += gravity;

ctx.fillStyle = "#228B22"; 
            ctx.font = "30px Verdana";
            ctx.fillText("Score: " + score, 10, 40);

for(let i = 0; i < pipes.length; i++) {
                ctx.drawImage(pipeTop, pipes[i].x, pipes[i].y, 100, 300);
                ctx.drawImage(pipeBottom, pipes[i].x, pipes[i].y + 400, 100, 300);
                pipes[i].x -= 5;

if(pipes[i].x === 50) {
                    pipes.push({x: canvas.width, y: Math.floor(Math.random() * 200) - 200});
                }

if(birdX + 50 > pipes[i].x && birdX < pipes[i].x + 100 && (birdY < pipes[i].y + 300 || birdY + 50 > pipes[i].y + 400)) {
                    alert("Game Over! Your Score: " + score);
                    location.reload();
                }

if(pipes[i].x === 0) {
                    score++;
                }
            }

requestAnimationFrame(draw);
        }

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