AI game creator

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

No:49215

109

←

Prev Next

→

Flappy bird
Developer Kason Lucas｜Date and time 24/3/4 2:59:43
Build time 7.901 sec｜Game capacity 2.223KB｜

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

let birdX = 50;
        let birdY = 150;
        let gravity = 1;
        let velocity = 0;
        let pipe = [];

const birdImg = new Image();
        birdImg.src = 'bird.png';

const pipeNorthImg = new Image();
        pipeNorthImg.src = 'pipeNorth.png';

const pipeSouthImg = new Image();
        pipeSouthImg.src = 'pipeSouth.png';

document.addEventListener('keydown', () => {
            velocity = -10;
        });

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

velocity += gravity;
            birdY += velocity;

ctx.drawImage(birdImg, birdX, birdY, 50, 50);

if (birdY > canvas.height || birdY < 0) {
                alert('Game Over');
                birdY = 150;
                velocity = 0;
                pipe = [];
            }

for(let i = 0; i < pipe.length; i++) {
                pipe[i].x--;
                ctx.drawImage(pipeNorthImg, pipe[i].x, pipe[i].y, 50, 200);
                ctx.drawImage(pipeSouthImg, pipe[i].x, pipe[i].y + 300, 50, 200);

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

if(pipe[i].x === birdX && (birdY < pipe[i].y + 200 || birdY + 50 > pipe[i].y + 300)){
                    alert('Game Over');
                    birdY = 150;
                    velocity = 0;
                    pipe = [];
                }
            }

requestAnimationFrame(draw);
        }

pipe.push({x: canvas.width, y: Math.floor(Math.random() * 200) - 200});

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