HTML Canvas 游戏开发教程：简单捕获怪物游戏

这段代码展示了一个简单的捕获怪物游戏，使用 HTML Canvas 实现。代码分步解释了游戏开发的基本流程，包括：

创建 Canvas 元素： 使用 document.createElement('canvas') 创建一个 Canvas 元素，并获取 2D 绘图上下文。
加载图片： 使用 Image 对象加载背景、英雄和怪物图片，并在图片加载完成后设置相应标志位。
定义游戏对象： 定义英雄和怪物对象，包括位置、速度等属性。
处理用户输入： 使用 addEventListener 监听键盘事件，记录用户按下的按键。
重置游戏对象： 定义 reset 函数，重置英雄和怪物的位置，并将捕获的怪物数量清零。
更新游戏状态： 定义 update 函数，根据用户输入更新英雄的位置，并检测是否捕获到怪物。
渲染物体： 定义 render 函数，根据游戏状态绘制背景、英雄、怪物和分数。
主游戏循环： 使用 requestAnimationFrame 实现游戏循环，在每次循环中更新游戏状态和渲染画面。
重置按钮： 创建一个重置按钮，点击按钮后重置游戏状态。
错误处理： 使用 window.onerror 处理 JavaScript 错误。

代码示例：

// 1. 创建一个 HTML canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// 2. 加载背景图片
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';

// 4. 加载怪物图片
let monsterReady = false;
const monsterImage = new Image();
monsterImage.onload = function () {
  monsterReady = true;
};
monsterImage.src = 'images/monster.png';

// 5. 定义游戏对象
const hero = {
  speed: 256, // 每秒移动的像素数
  x: 0,
  y: 0,
};
const monster = {
  x: 0,
  y: 0,
};

let monstersCaught = 0;

// 6. 处理用户输入
const keysDown = {};
addeventListener('keydown', function (e) {
  keysDown[e.keyCode] = true;
}, false);
addeventListener('keyup', function (e) {
  delete keysDown[e.keyCode];
}, false);

// 7. 重置游戏对象
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));
};
// 8. 更新游戏对象的状态
const update = function (modifier) {
  if (keysDown[38]) { // 用户按的是↑
    hero.y -= hero.speed * modifier;
  }
  if (keysDown[40]) { // 用户按的是↓
    hero.y += hero.speed * modifier;
  }
  if (keysDown[37]) { // 用户按的是←
    hero.x -= hero.speed * modifier;
  }
  if (keysDown[39]) { // 用户按的是→
    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();
  }
};
// 9. 渲染物体
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);
};

// 10. 主游戏循环
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();
// 11. 允许用户点击按钮来重置游戏
const resetButton = document.createElement('button');
resetButton.textContent = 'Reset Game';
resetButton.addEventListener('click', function() {
  monstersCaught = 0;
  reset();
});
document.body.appendChild(resetButton);

// 12. 如果出现错误，打印错误信息
window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, 'at', source, lineno, colno);
};

这段代码没有错误，它是一个完整的 HTML Canvas 游戏代码，可以用来学习游戏开发的基本概念。

希望这个教程对您有所帮助！如果您有任何问题，请随时提问。