AI game creator

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

No:27258

114

←

Prev Next

→

Flappy bird
Developer User13574｜Date and time 23/12/5 21:13:13
Build time 84.499 sec｜Game capacity 3.215KB｜

Script

以下是使用JavaScript编写的一个简单的Flappy Bird游戏：

请注意，此游戏所需的`emozi_all/bird.png`图像文件应与HTML文件位于相同的目录中。你可以替换`emozi_all/bird.png`图像文件，使用符合你的需求的其他图片。这个游戏使用了一个简单的循环来不断更新鸟的位置和水管的位置，通过监听点击事件来使鸟跳跃，同时更新分数并检测游戏是否结束。希望这个Flappy Bird游戏能满足你的要求。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下是使用JavaScript编写的一个简单的Flappy Bird游戏：

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #gameCanvas {
            position: relative;
            border: 1px solid black;
            width: 320px;
            height: 480px;
            margin: 50px auto;
        }

.bird {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url('bird.png');
            background-size: cover;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
        }

.pipe {
            position: absolute;
            width: 80px;
            height: 320px;
            background-color: green;
            bottom: 0;
        }

.score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <div class="bird"></div>
        <div class="pipe"></div>
        <div class="score">0</div>
    </div>

let birdTop = 220;
            let birdLeft = 50;
            let pipeLeft = 320;
            let pipeTop = -320;
            let gravity = 2;
            let score = 0;
            let gameSpeed = 2;
            let isGameOver = false;

function startGame() {
                if (isGameOver) return;

birdTop += gravity;
                bird.style.top = birdTop + 'px';
                bird.style.left = birdLeft + 'px';

pipeLeft -= gameSpeed;
                pipe.style.left = pipeLeft + 'px';

if (pipeLeft === -80) {
                    pipeLeft = 320;
                    score++;
                    scoreDisplay.textContent = score;
                }

if (birdTop > 450 || (birdTop < pipeTop + 320 && birdLeft + 40 > pipeLeft && birdLeft < pipeLeft + 80)) {
                    gameOver();
                    return;
                }

requestAnimationFrame(startGame);
            }

function gameOver() {
                isGameOver = true;
                document.removeEventListener('click', jump);
                scoreDisplay.style.color = 'red';
            }

function jump() {
                if (birdTop > 20) birdTop -= 40;
            }

document.addEventListener('click', jump);
            startGame();
        });
    </script>
</body>
</html>
```

请注意，此游戏所需的`bird.png`图像文件应与HTML文件位于相同的目录中。你可以替换`bird.png`图像文件，使用符合你的需求的其他图片。

这个游戏使用了一个简单的循环来不断更新鸟的位置和水管的位置，通过监听点击事件来使鸟跳跃，同时更新分数并检测游戏是否结束。

希望这个Flappy Bird游戏能满足你的要求。