AI game creator

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

No:12990

136

←

Prev Next

→

Flappy bird
Developer User5672｜Date and time 23/8/25 20:08:55
Build time 36.615 sec｜Game capacity 3.551KB｜

Script

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

请确保将该文件保存为`.html`格式，并将鸟的图标和管道的图标作为`emozi_all/bird.png`和`emozi_chicken.png`放置在同一目录下，以便能够正确显示游戏元素。该游戏可通过点击屏幕或按下键盘任意键来控制鸟的跳跃，目标是使鸟通过管道的缝隙并获取尽可能高的分数。游戏会根据游戏逻辑自动处理跳跃、管道生成等操作，并且会在左上角显示当前的分数。当鸟撞到管道或掉落到屏幕底部时，游戏将自动结束。

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game-container {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid #000;
      overflow: hidden;
    }
    #bird {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url("bird.png"); /* 使用鸟的图标作为背景 */
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .pipe {
      position: absolute;
      width: 80px;
      height: 320px;
      background-image: url("pipe.png"); /* 使用管道的图标作为背景 */
    }
    #score {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 24px;
      color: #FFF;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="bird"></div>
    <div id="score">0</div>
  </div>
  <script>
    // 游戏逻辑代码
    var bird = document.getElementById('bird');
    var gameContainer = document.getElementById('game-container');
    var scoreElement = document.getElementById('score');
    var score = 0;
    var gravity = 0.5;
    var velocity = 0;
    var pipeGap = 120;
    var pipeFrequency = 2000;
    var gameSpeed = 1;
    var gameOver = false;

function jump() {
      velocity = -8; // 控制鸟的跳跃高度和速度
    }

function generatePipe() {
      if (!gameOver) {
        var pipePosition = Math.floor(Math.random() * 320) + 120;
        var bottomPipe = createPipe(pipePosition);
        var topPipe = createPipe(pipePosition - pipeGap);

gameContainer.appendChild(bottomPipe);
        gameContainer.appendChild(topPipe);

setTimeout(generatePipe, pipeFrequency);
      }
    }

function createPipe(pipePosition) {
      var pipeElement = document.createElement('div');
      pipeElement.className = 'pipe';
      pipeElement.style.left = '380px';
      pipeElement.style.bottom = pipePosition + 'px';
      return pipeElement;
    }

function movePipes() {
      var pipes = document.getElementsByClassName('pipe');

if (!gameOver) {
        for (var i = 0; i < pipes.length; i++) {
          var left = parseInt(pipes[i].style.left);
          pipes[i].style.left = left - gameSpeed + 'px';

if (left < -80) {
            pipes[i].parentNode.removeChild(pipes[i]);
          }

if (left > 200 && left < 280 && bird.offsetLeft === 120 && (bird.offsetTop < pipes[i].offsetTop - 40 || bird.offsetTop > pipes[i].offsetTop + 320)) {
            endGame();
          }

if (left === 120) {
            score++; // 更新分数
            scoreElement.textContent = score;
          }
        }

requestAnimationFrame(movePipes);
      }
    }

function endGame() {
      gameOver = true;
      // 游戏结束逻辑
    }

document.addEventListener('keydown', jump);
    document.addEventListener('click', jump);

generatePipe();
    movePipes();
  </script>
</body>
</html>
```

请确保将该文件保存为`.html`格式，并将鸟的图标和管道的图标作为`bird.png`和`pipe.png`放置在同一目录下，以便能够正确显示游戏元素。该游戏可通过点击屏幕或按下键盘任意键来控制鸟的跳跃，目标是使鸟通过管道的缝隙并获取尽可能高的分数。游戏会根据游戏逻辑自动处理跳跃、管道生成等操作，并且会在左上角显示当前的分数。当鸟撞到管道或掉落到屏幕底部时，游戏将自动结束。