HTML Canvas 游戏开发入门：捕捉小怪兽游戏示例

以下是使用 HTML Canvas 创建一个简单的捕捉小怪兽游戏的示例代码：

// 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);
};

console.log('Goblins caught: ' + monstersCaught);

这段代码演示了如何使用 HTML Canvas 创建一个简单的捕捉小怪兽游戏，涵盖了游戏开发的各个环节，包括创建游戏画布、加载资源、处理用户输入、更新游戏状态以及渲染游戏画面。

具体步骤如下：

创建一个 HTML canvas 元素：使用 document.createElement('canvas') 创建一个 canvas 元素，并设置其宽度和高度。
加载背景图片：使用 Image 对象加载背景图片，并监听图片加载完成事件。
加载英雄图片：类似于加载背景图片，加载英雄图片。
加载怪物图片：类似于加载背景图片，加载怪物图片。
定义游戏对象：定义英雄和怪物对象，包括其位置、速度等属性。
处理用户输入：监听键盘事件，记录用户按下的按键。
重置游戏对象：当游戏开始或玩家捕捉到怪物时，重置游戏对象的位置。
更新游戏对象的状态：根据用户输入，更新游戏对象的坐标。
渲染物体：将游戏对象绘制到 canvas 上。
主游戏循环：不断更新游戏状态和渲染游戏画面。
允许用户点击按钮来重置游戏：添加一个重置游戏按钮，点击按钮可以重置游戏状态。
如果出现错误，打印错误信息：添加错误处理机制，以便在程序出现错误时打印错误信息。

这段代码只是简单的游戏示例，可以根据自己的需求进行扩展，例如增加更多游戏元素、设计游戏关卡、添加音效等。