用jquery实现Flappy Bird小游戏

封面图 • 2025-10-14 • jQuery

下面是一个使用 **jQuery** 实现的简化版 **Flappy Bird** 游戏示例。这个游戏包括：

- 一个“小鸟”（用 `<div>` 表示）
- 管道（用多个 `<div>` 表示）
- 障碍物碰撞检测
- 简单的重力效果
- 空格键控制小鸟跳跃

---

## 🕹️ Flappy Bird（jQuery 版本）

### ✅ 功能说明：
- 按空格键让小鸟向上飞
- 小鸟受重力影响下落
- 管道从右向左移动
- 碰撞管道或地面则游戏结束
- 显示得分

---

## 📁 HTML + CSS + jQuery 代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Flappy Bird - jQuery 版</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #70c5ce;
      font-family: sans-serif;
    }
    #game {
      position: relative;
      width: 800px;
      height: 400px;
      margin: 20px auto;
      background: #70c5ce;
      border: 2px solid #fff;
    }
    #bird {
      position: absolute;
      width: 30px;
      height: 30px;
      background: yellow;
      border-radius: 50%;
      top: 185px;
      left: 100px;
    }
    .pipe {
      position: absolute;
      width: 50px;
      background: green;
    }
    .top {
      height: 100px;
      bottom: 0;
    }
    .bottom {
      height: 200px;
      top: 300px;
    }
    #score {
      text-align: center;
      font-size: 24px;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<div id="game">
  <div id="bird"></div>
</div>
<div id="score">Score: 0</div>

let birdY = 185;
  let velocity = 0;
  let gravity = 0.5;
  let isGameOver = false;
  let score = 0;

// 创建管道
  function createPipe() {
    const pipeTop = $('<div>').addClass('pipe top').css({
      left: '800px',
      height: Math.floor(Math.random() * 150) + 50
    });

const pipeBottom = $('<div>').addClass('pipe bottom').css({
      left: '800px',
      top: parseInt(pipeTop.css('height')) + 50
    });

game.append(pipeTop, pipeBottom);

// 移动管道
    function movePipe(pipe) {
      let pos = parseInt(pipe.css('left'));
      if (pos < -50) {
        pipe.remove();
        score++;
        scoreDisplay.text("Score: " + score);
      } else {
        pipe.css('left', pos - 2);
        requestAnimationFrame(() => movePipe(pipe));
      }
    }

movePipe(pipeTop);
    movePipe(pipeBottom);
  }

// 每秒创建一个管道
  setInterval(createPipe, 1500);

// 控制小鸟
  $(document).keydown(function(e) {
    if (e.code === 'Space') {
      velocity = -8;
    }
  });

// 游戏循环
  function gameLoop() {
    if (isGameOver) return;

velocity += gravity;
    birdY += velocity;
    bird.css('top', birdY);

// 地面碰撞
    if (birdY > 370) {
      endGame();
    }

// 管道碰撞检测
    $('.pipe').each(function() {
      const pipeLeft = parseInt($(this).css('left'));
      const pipeWidth = 50;
      const birdLeft = parseInt(bird.css('left'));
      const birdRight = birdLeft + 30;

if (pipeLeft < birdRight && pipeLeft + pipeWidth > birdLeft) {
        // 检查是否在顶部或底部管道中
        const pipeHeight = parseInt($(this).css('height'));
        const birdTop = parseInt(bird.css('top'));
        const birdBottom = birdTop + 30;

if ((birdBottom > 300 && birdTop < 300) || (birdBottom > pipeHeight && birdTop < pipeHeight)) {
          endGame();
        }
      }
    });

requestAnimationFrame(gameLoop);
  }

function endGame() {
    isGameOver = true;
    alert("Game Over! Score: " + score);
    location.reload();
  }

gameLoop();
</script>

</body>
</html>
```

---

## 🧠 说明

- **`birdY` 和 `velocity`**：模拟小鸟的垂直位置和速度。
- **`gravity`**：模拟重力，使小鸟不断下落。
- **`createPipe()`**：随机生成上下两个管道。
- **`gameLoop()`**：主游戏循环，处理小鸟运动、碰撞检测等。
- **`endGame()`**：当小鸟碰到地面或管道时触发。

---

## 🚀 扩展建议

你可以进一步扩展这个小游戏：

- 添加音效（使用 `<audio>` 标签）
- 增加动画效果（如小鸟翅膀扇动）
- 支持触摸屏操作（移动端适配）
- 添加开始/暂停按钮
- 使用 Canvas 替代 Div 实现更流畅的游戏体验

---

如果你需要我帮你把这个游戏改造成 **Canvas 版本** 或 **添加更多功能**，欢迎继续提问！