HTML Canvas 游戏开发教程：制作简单的捉怪游戏

使用 HTML Canvas 创建简单的捉怪游戏

本教程将带你一步步使用 HTML Canvas 创建一个简单的捉怪游戏。

1. 创建画布

首先，我们需要创建一个 HTML Canvas 元素，并获取其 2D 渲染上下文：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

2. 加载背景图片

接下来，我们需要加载背景图片，并使用 onload 事件监听图片加载完成：

let bgReady = false;
const bgImage = new Image();
bgImage.onload = function () {
  bgReady = true;
};
bgImage.src = 'images/background.png';

3. 加载英雄图片和怪物图片

类似地，我们也要加载英雄图片和怪物图片：

let heroReady = false;
const heroImage = new Image();
heroImage.onload = function () {
  heroReady = true;
};
heroImage.src = 'images/hero.png';

let monsterReady = false;
const monsterImage = new Image();
monsterImage.onload = function () {
  monsterReady = true;
};
monsterImage.src = 'images/monster.png';

4. 定义游戏对象

现在，我们定义英雄和怪物的游戏对象：

const hero = {
  speed: 256, // 每秒移动的像素数
  x: 0,
  y: 0,
};
const monster = {
  x: 0,
  y: 0,
};

let monstersCaught = 0;

5. 处理用户输入

为了控制英雄的移动，我们需要监听键盘事件：

const keysDown = {};
addEventListener('keydown', function (e) {
  keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
  delete keysDown[e.keyCode];
}, false);

6. 重置游戏对象

每次游戏开始或玩家捕捉到怪物后，我们需要重置游戏对象的位置：

const reset = function () {
  hero.x = canvas.width / 2;
  hero.y = canvas.height / 2;

  // 把怪物放到画布的任意位置
  monster.x = 32 + (Math.random() * (canvas.width - 64));
  monster.y = 32 + (Math.random() * (canvas.height - 64));
};

7. 更新游戏对象的状态

在游戏循环中，我们需要根据用户输入来更新游戏对象的状态：

const update = function (modifier) {
  if (38 in keysDown) { // 用户按的是↑
    hero.y -= hero.speed * modifier;
  }
  if (40 in keysDown) { // 用户按的是↓
    hero.y += hero.speed * modifier;
  }
  if (37 in keysDown) { // 用户按的是←
  hero.x -= hero.speed * modifier;
}
  if (39 in keysDown) { // 用户按的是→
    hero.x += hero.speed * modifier;
  }

  // 判断是否接触到怪物
  if (
    hero.x <= (monster.x + 32)
    && monster.x <= (hero.x + 32)
    && hero.y <= (monster.y + 32)
    && monster.y <= (hero.y + 32)
  ) {
    ++monstersCaught;
    reset();
  }
};

8. 渲染物体

在每次游戏循环中，我们需要渲染游戏中的所有物体：

const render = function () {
  if (bgReady) {
    ctx.drawImage(bgImage, 0, 0);
  }
  if (heroReady) {
    ctx.drawImage(heroImage, hero.x, hero.y);
  }
  if (monsterReady) {
    ctx.drawImage(monsterImage, monster.x, monster.y);
  }

  // 显示分数
  ctx.fillStyle = 'rgb(250, 250, 250)';
  ctx.font = '24px Helvetica';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillText('Goblins caught: ' + monstersCaught, 32, 32);
};

9. 主游戏循环

最后，我们创建主游戏循环，并在每次循环中更新游戏状态和渲染游戏画面：

const main = function () {
  const now = Date.now();
  const delta = now - then;

  update(delta / 1000);
  render();

  then = now;
  requestAnimationFrame(main);
};

// 兼容不同浏览器的 requestAnimationFrame
const w = window;
const requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// 开始游戏
let then = Date.now();
reset();
main();

10. 重置游戏按钮

我们还可以添加一个重置游戏按钮：

const resetButton = document.createElement('button');
resetButton.textContent = 'Reset Game';
resetButton.addEventListener('click', function() {
  monstersCaught = 0;
  reset();
});
document.body.appendChild(resetButton);

现在，你已经成功创建了一个简单的捉怪游戏！你可以根据自己的想法添加更多功能，例如添加不同的怪物类型、增加分数系统等。

总结

本教程介绍了如何使用 HTML Canvas 创建简单的捉怪游戏，并讲解了相关代码的实现细节。希望这能帮助你更好地理解 HTML Canvas 的应用和游戏开发的基本流程。

其他建议

在代码开头加上注释，解释变量和函数的作用。
可以使用 CSS 来美化游戏界面。
可以添加更多游戏功能，例如添加不同的怪物类型、增加分数系统、添加音效等。
可以使用第三方库来简化游戏开发流程。