Canvas是HTML5的杀手锏，帮你轻松实现Flappy Bird

前端

2023-12-14 07:48:47

如何使用 HTML5 Canvas 创建令人着迷的 Flappy Bird 游戏

在数字游戏不断发展的时代，掌握自主创建游戏的技能变得至关重要。本文将带你踏上一个激动人心的旅程，学习如何利用 HTML5 Canvas 标签，打造一款风靡全球的经典游戏——Flappy Bird。

准备材料

踏上这段旅程，你需要准备以下材料：

文本编辑器（如 Sublime Text 或 Visual Studio Code）
网络浏览器（如 Chrome 或 Firefox）
HTML、CSS 和 JavaScript 的基础知识

动手操作

步骤 1：创建 HTML 文件

开启你的文本编辑器，创建一个名为 "FlappyBird.html" 的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="script.js"></script>
</body>
</html>

步骤 2：创建 CSS 文件

接下来，创建一个 "style.css" 的 CSS 文件，并添加以下代码：

canvas {
  border: 1px solid black;
}

步骤 3：创建 JavaScript 文件

最后，创建一个 "script.js" 的 JavaScript 文件，并输入以下代码：

// HTML5 Canvas API
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Flappy Bird 小鸟
var bird = {
  x: 100,
  y: 100,
  width: 20,
  height: 20,
  speedY: 0,
  gravity: 0.5
};

// 管道
var pipes = [];

// 分数
var score = 0;

// 游戏更新
function update() {
  // 更新小鸟状态
  bird.speedY += bird.gravity;
  bird.y += bird.speedY;

  // 更新管道位置
  for (var i = 0; i < pipes.length; i++) {
    pipes[i].x -= 2;

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

  // 删除超出屏幕的管道
  for (var i = 0; i < pipes.length; i++) {
    if (pipes[i].x + pipes[i].width < 0) {
      pipes.splice(i, 1);
    }
  }

  // 随机生成新管道
  if (Math.random() < 0.01) {
    var pipe = {
      x: canvas.width,
      y: Math.random() * (canvas.height - 200),
      width: 50,
      height: 200
    };
    pipes.push(pipe);
  }

  // 更新分数
  if (bird.x > pipes[pipes.length - 1].x + pipes[pipes.length - 1].width) {
    score++;
  }

  // 绘制场景
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#000000";
  ctx.fillRect(bird.x, bird.y, bird.width, bird.height);

  for (var i = 0; i < pipes.length; i++) {
    ctx.fillStyle = "#00FF00";
    ctx.fillRect(pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
  }

  ctx.fillStyle = "#FFFFFF";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 10, 20);
}

// 游戏结束
function gameOver() {
  alert("游戏结束！你的分数为 " + score);
  document.location.reload();
}

// 按键事件处理
function handleKeyDown(e) {
  if (e.keyCode === 32) {
    bird.speedY = -5;
  }
}

// 事件监听
document.addEventListener("keydown", handleKeyDown);

// 游戏主循环
setInterval(update, 1000 / 60);