用jquery实现Flappy Bird小游戏

实现完整的 Flappy Bird 游戏是一个相对复杂的任务，但我可以为你提供一个基本的 jQuery 版本的 Flappy Bird 游戏的示例：

HTML 代码：

html
```
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="game-container">
    <div id="bird"></div>
    <div id="pipes-container"></div>
    <div id="score">Score: <span id="score-value">0</span></div>
    <button id="start-btn">Start</button>
  </div>

css
```
#game-container {
  position: relative;
  width: 400px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;
}

#bird {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: yellow;
  top: 50%;
  left: 50px;
  transform: translate(0, -50%);
}

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

#score {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
}

#start-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  padding: 10px 20px;
}
```
JavaScript 代码（script.js）：

javascript
```
$(document).ready(function() {
  var bird = $('#bird');
  var pipesContainer = $('#pipes-container');
  var scoreSpan = $('#score-value');
  var score = 0;
  var isGameRunning = false;
  var gameInterval;
  var birdSpeed = 5;
  var gravity = 0.5;
  var jumpStrength = 9;
  var pipeSpeed = 3;
  var pipeSpawnInterval = 1500;

function startGame() {
    isGameRunning = true;
    score = 0;
    scoreSpan.text(score);
    bird.css('top', '50%');
    pipesContainer.empty();

gameInterval = setInterval(function() {
      var birdTop = parseInt(bird.css('top'));
      var birdBottom = birdTop + bird.height();
      bird.css('top', birdTop + birdSpeed + 'px');
      birdSpeed += gravity;

var pipes = $('.pipe');
      pipes.each(function() {
        var pipe = $(this);
        var pipeLeft = parseInt(pipe.css('left'));
        pipe.css('left', pipeLeft - pipeSpeed + 'px');

if (pipeLeft + pipe.width() < 0) {
          pipe.remove();
        }

var pipeTop = parseInt(pipe.css('top'));
        var pipeBottom = pipeTop + pipe.height();

if (
          birdRight() >= pipeLeft &&
          birdLeft() <= pipeLeft + pipe.width() &&
          (birdBottom >= pipeBottom || birdTop <= pipeTop)
        ) {
          endGame();
        }

if (birdLeft() > pipeLeft + pipe.width() && !pipe.data('scored')) {
          pipe.data('scored', true);
          score++;
          scoreSpan.text(score);
        }
      });

if (birdBottom > $('#game-container').height() || birdTop < 0) {
        endGame();
      }
    }, 20);

setInterval(spawnPipes, pipeSpawnInterval);
  }

function endGame() {
    isGameRunning = false;
    clearInterval(gameInterval);
  }

function birdLeft() {
    return parseInt(bird.css('left'));
  }

function birdRight() {
    return birdLeft() + bird.width();
  }

function jump() {
    if (!isGameRunning) {
      return;
    }
    birdSpeed = -jumpStrength;
  }

function spawnPipes() {
    if (!isGameRunning) {
      return;
    }
    var pipeTopHeight = Math.floor(Math.random() * 200) + 50;
    var pipeBottomHeight = $('#game-container').height() - 200 - pipeTopHeight;

var pipeTop = $('<div class="pipe"></div>');
    pipeTop.css('top', '0');
    pipeTop.css('left', '400px');
    pipeTop.css('height', pipeTopHeight + 'px');
    pipesContainer.append(pipeTop);

var pipeBottom = $('<div class="pipe"></div>');
    pipeBottom.css('bottom', '0');
    pipeBottom.css('left', '400px');
    pipeBottom.css('height', pipeBottomHeight + 'px');
    pipesContainer.append(pipeBottom);
  }

$(document).keydown(function(e) {
    if (e.keyCode === 32) { // 空格键
      jump();
    }
  });

$('#start-btn').click(function() {
    startGame();
  });
});
```
请注意，这个示例是一个简化的 Flappy Bird 游戏，可能还需要进行进一步的优化和改进来提高游戏的体验和可玩性。你可以根据需要自行修改和扩展代码。