AI game creator

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

No:16370

135

←

Prev Next

→

Flappy bird
Developer User7275｜Date and time 23/9/17 20:35:42
Build time 30.825 sec｜Game capacity 4.114KB｜

Script

Sure, here's an example of a simple implementation of the Flappy Bird game using HTML and JavaScript:

You can save this code in a file with the ".html" extension and open it in a web browser to play the Flappy Bird game on your smartphone or computer. The game consists of controlling the bird by tapping the screen or pressing any key on the keyboard to flap its wings and avoid colliding with the pipes. The goal is to get the highest score possible by passing through the gaps between the pipes.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple implementation of the Flappy Bird game using HTML and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            background: lightblue;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="flappyCanvas" width="400" height="400"></canvas>

let bird = { x: 50, y: canvas.height / 2, radius: 20, speedY: 0 };
        let gravity = 1;
        let pipes = [];
        let score = 0;

function drawBird() {
            ctx.beginPath();
            ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.closePath();
        }

function drawPipes() {
            for (let i = 0; i < pipes.length; i++) {
                let pipe = pipes[i];
                ctx.beginPath();
                ctx.rect(pipe.x, 0, pipe.width, pipe.height);
                ctx.rect(pipe.x, pipe.bottom, pipe.width, canvas.height - pipe.bottom);
                ctx.fillStyle = "green";
                ctx.fill();
                ctx.closePath();
            }
        }

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

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

bird.speedY += gravity;
            bird.y += bird.speedY;

if (bird.y + bird.radius > canvas.height || bird.y - bird.radius < 0) {
                gameOver();
                return;
            }

if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 150) {
                let pipeHeight = Math.random() * (canvas.height - 200) + 100;
                let pipe = { x: canvas.width, height: pipeHeight, bottom: pipeHeight + 100, width: 40 };
                pipes.push(pipe);
            }

for (let i = 0; i < pipes.length; i++) {
                let pipe = pipes[i];
                pipe.x -= 2;

if (pipe.x + pipe.width < 0) {
                    pipes.shift();
                    score++;
                }
            }

if (collisionDetection()) {
                gameOver();
                return;
            }

drawBird();
            drawPipes();
            drawScore();

requestAnimationFrame(update);
        }

function flap() {
            bird.speedY = -12;
        }

function gameOver() {
            alert("Game Over. Your score is: " + score);
            bird = { x: 50, y: canvas.height / 2, radius: 20, speedY: 0 };
            pipes = [];
            score = 0;
            update();
        }

document.addEventListener("keydown", flap);
        update();
    </script>
</body>
</html>
```