当前位置：首页 > JavaScript

js实现flybird

2026-02-01 16:39:09JavaScript

以下是使用JavaScript实现类似Flappy Bird游戏的几种方法，分为核心逻辑和关键代码片段：

游戏基础结构

创建HTML5 Canvas作为游戏画布，初始化基本元素：

<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
</script>

游戏角色与物理系统

实现小鸟的重力系统和跳跃控制：

let bird = {
  x: 50,
  y: canvas.height/2,
  width: 30,
  height: 30,
  velocity: 0,
  gravity: 0.5,
  jump: -10
};

function updateBird() {
  bird.velocity += bird.gravity;
  bird.y += bird.velocity;

  // 检测地面碰撞
  if(bird.y + bird.height > canvas.height) {
    bird.y = canvas.height - bird.height;
    bird.velocity = 0;
  }
}

document.addEventListener('keydown', (e) => {
  if(e.code === 'Space') {
    bird.velocity = bird.jump;
  }
});

障碍物生成系统

随机生成管道障碍物：

let pipes = [];
const pipeGap = 150;
const pipeWidth = 60;

function generatePipe() {
  const topHeight = Math.random() * (canvas.height - pipeGap - 100) + 50;
  pipes.push({
    x: canvas.width,
    topHeight,
    passed: false
  });
}

function updatePipes() {
  if(frameCount % 100 === 0) {
    generatePipe();
  }

  pipes.forEach(pipe => {
    pipe.x -= 2;
    // 绘制上下管道
    ctx.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);
    ctx.fillRect(pipe.x, pipe.topHeight + pipeGap, pipeWidth, canvas.height);
  });
}

碰撞检测系统

实现矩形碰撞检测逻辑：

function checkCollision() {
  // 检测与管道的碰撞
  for(let pipe of pipes) {
    if(
      bird.x < pipe.x + pipeWidth &&
      bird.x + bird.width > pipe.x &&
      (bird.y < pipe.topHeight || bird.y + bird.height > pipe.topHeight + pipeGap)
    ) {
      gameOver();
    }
  }
}

游戏循环与渲染

使用requestAnimationFrame实现游戏主循环：

let frameCount = 0;
let score = 0;

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  updateBird();
  updatePipes();
  checkCollision();
  drawScore();

  frameCount++;
  requestAnimationFrame(gameLoop);
}

function drawScore() {
  ctx.font = '24px Arial';
  ctx.fillText(`Score: ${score}`, 10, 30);
}