Flappy Bird原理解析：用原生JavaScript构建一款怀旧游戏

2023-10-04 16:06:28

构建自己的 Flappy Bird 游戏：从头开始的全面指南

Flappy Bird 是一款风靡全球的经典街机游戏，它以令人上瘾的玩法和极具挑战性的障碍而出名。如果你一直梦想打造自己的 Flappy Bird 游戏，那么本教程将为你提供一步一步的指南，让你利用原生 JavaScript 实现这个目标。

1. 搭建游戏框架

HTML

首先，创建包含 JavaScript 文件的 HTML 文件：

<html>
<head>
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

JavaScript

接下来，在 JavaScript 文件中初始化游戏变量：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 600;

let gameSpeed = 5;
let gravity = 0.25;
let bird = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 30,
  height: 30,
  velocity: 0
};

2. 实现背景滚动

function scrollBackground() {
  ctx.drawImage(backgroundImg, -scrollOffset, 0, canvas.width, canvas.height);
  scrollOffset += gameSpeed;
}

3. 创建和移动管道

function createPipes() {
  ctx.drawImage(pipeNorthImg, pipeX, pipeY - pipeGap - pipeNorthImg.height, pipeWidth, pipeNorthImg.height);
  ctx.drawImage(pipeSouthImg, pipeX, pipeY + pipeGap, pipeWidth, pipeSouthImg.height);
  pipeX -= gameSpeed;
}

4. 控制小鸟

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    bird.velocity = -5;
  }
});

5. 碰撞检测

function checkCollision() {
  // 小鸟和管道
  // 小鸟和地面
}

6. 触屏事件

canvas.addEventListener('touchstart', (e) => {
  bird.velocity = -5;
});

7. 开始和结束面板

function drawStartPanel() {}
function drawEndPanel() {}

8. 得分统计

function updateScore() {}

代码示例

以下代码段提供了 JavaScript 文件的完整示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 600;

let gameSpeed = 5;
let gravity = 0.25;
let bird = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 30,
  height: 30,
  velocity: 0
};
let pipeX = canvas.width;
let pipeY = canvas.height / 2;
let pipeGap = 150;
let pipeWidth = 50;
let score = 0;
let gameOver = false;

function scrollBackground() {
  ctx.drawImage(backgroundImg, -scrollOffset, 0, canvas.width, canvas.height);
  scrollOffset += gameSpeed;
}

function createPipes() {
  ctx.drawImage(pipeNorthImg, pipeX, pipeY - pipeGap - pipeNorthImg.height, pipeWidth, pipeNorthImg.height);
  ctx.drawImage(pipeSouthImg, pipeX, pipeY + pipeGap, pipeWidth, pipeSouthImg.height);
  pipeX -= gameSpeed;
}

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

function checkCollision() {
  if (bird.x + bird.width > pipeX && bird.x < pipeX + pipeWidth &&
    bird.y < pipeY - pipeGap) {
    gameOver = true;
  } else if (bird.x + bird.width > pipeX && bird.x < pipeX + pipeWidth &&
    bird.y + bird.height > pipeY + pipeGap) {
    gameOver = true;
  } else if (bird.y + bird.height > canvas.height) {
    gameOver = true;
  }
}

function drawScore() {
  ctx.fillStyle = 'white';
  ctx.font = '20px Arial';
  ctx.fillText(`得分：${score}`, 10, 20);
}

function startPanel() {
  // 绘制开始面板
}

function endPanel() {
  // 绘制结束面板
}

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

  scrollBackground();
  createPipes();
  moveBird();
  checkCollision();
  drawScore();

  if (gameOver) {
    endPanel();
  } else {
    requestAnimationFrame(gameLoop);
  }
}

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    bird.velocity = -5;
  }
});

canvas.addEventListener('touchstart', (e) => {
  bird.velocity = -5;
});

startPanel();