当前位置：首页 > JavaScript

js实现flybird

2026-03-14 15:43:05JavaScript

实现Flappy Bird游戏的JavaScript方法

游戏基础结构

使用HTML5 Canvas创建游戏画布，定义游戏循环和基本框架。初始化画布并设置游戏状态变量。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let gameRunning = false;
let score = 0;

角色与物理系统

创建小鸟对象并实现重力效果。通过键盘或触摸事件控制小鸟跳跃。

js实现flybird

const 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) {
    gameOver();
  }
}

障碍物生成系统

随机生成上下管道组成的障碍物，并实现移动逻辑。

js实现flybird

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

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

function updatePipes() {
  for(let i = 0; i < pipes.length; i++) {
    pipes[i].x -= 2;

    // 检测碰撞
    if(
      bird.x + bird.width > pipes[i].x && 
      bird.x < pipes[i].x + pipeWidth && 
      (bird.y < pipes[i].topHeight || 
       bird.y + bird.height > pipes[i].topHeight + pipeGap)
    ) {
      gameOver();
    }

    // 计分
    if(!pipes[i].passed && bird.x > pipes[i].x + pipeWidth) {
      pipes[i].passed = true;
      score++;
    }
  }
}

游戏循环与渲染

实现主游戏循环，处理游戏逻辑和渲染画面。

function gameLoop() {
  if(!gameRunning) return;

  // 清屏
  ctx.fillStyle = 'skyblue';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 更新和渲染游戏元素
  updateBird();
  updatePipes();
  drawBird();
  drawPipes();
  drawScore();

  // 移除屏幕外的管道
  if(pipes.length > 0 && pipes[0].x < -pipeWidth) {
    pipes.shift();
  }

  // 定期生成新管道
  if(frames % 100 === 0) {
    generatePipe();
  }

  requestAnimationFrame(gameLoop);
  frames++;
}

控制与游戏状态

添加事件监听器并实现游戏状态管理。

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

function startGame() {
  gameRunning = true;
  score = 0;
  pipes.length = 0;
  bird.y = canvas.height/2;
  bird.velocity = 0;
  gameLoop();
}

function gameOver() {
  gameRunning = false;
  alert(`Game Over! Score: ${score}`);
}