JavaScript 中的 Flappy Bird 游戏(1)

📌 相关文章

📜 JavaScript 中的 Flappy Bird 游戏(1)

📅 最后修改于: 2023-12-03 15:16:09.131000 🧑 作者: Mango

JavaScript 中的 Flappy Bird 游戏

Flappy Bird

Flappy Bird 是一款经典的端游，由梁晓光于2013年开发并在移动设备上发布。这个游戏的操作简单，但令人上瘾。在游戏中，你需要控制一只小鸟穿越移动的管道，如果碰到管道或者落地就会游戏结束，目标是获得尽可能高的分数。

技术实现

Flappy Bird 游戏可以使用 JavaScript 来实现。以下是一个简单的 HTML/CSS/JavaScript 示例，实现了 Flappy Bird 游戏的基本功能。

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game {
      position: relative;
      border: 1px solid #000;
      width: 400px;
      height: 600px;
      margin: 0 auto;
      overflow: hidden;
    }
    #bird {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: yellow;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
    }
    .pipe {
      position: absolute;
      border: 1px solid #000;
      background-color: green;
      width: 80px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="bird"></div>
  </div>

  <script>
    const game = document.getElementById('game');
    const bird = document.getElementById('bird');
    let birdTop = 235;
    let gravity = 2;
    let isGameOver = false;

    function startGame() {
      if (isGameOver) return;
      birdTop -= gravity;
      bird.style.top = birdTop + 'px';
      requestAnimationFrame(startGame);
    }

    document.addEventListener('keydown', function(event) {
      if (event.code === 'Space') {
        birdTop += 40;
      }
    });

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

在这个示例中，我们使用了 HTML 来创建游戏窗口，并使用 CSS 来设置游戏元素的样式。JavaScript 代码通过监听按键事件来控制小鸟的移动，并使用动画帧（requestAnimationFrame）来实现小鸟的重力下落效果。

游戏规则

按空格键让小鸟向上飞行；
避免小鸟碰到管道或者落地；
管道每隔一段时间会移动一次；
每经过一个管道获得一分，显示在屏幕上。

进一步扩展

以上代码只是实现了 Flappy Bird 游戏的基本功能，你可以根据自己的兴趣和想法进一步扩展这个游戏，例如：

为小鸟和管道添加更多样式；
在小鸟飞过管道时播放音效；
添加游戏计时、分数统计等功能；
使用 Canvas 或者游戏引擎来实现更复杂的图形效果；
将游戏发布到 Web 或移动平台上。

希望这个 Flappy Bird 示例能帮助你了解如何使用 JavaScript 实现迷人的游戏！