HTML Canvas 游戏教程：创建简单的捕捉游戏

这段代码没有问题，它是用来在 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// 用户按的是←
  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 创建一个简单的捕捉游戏。

• 首先，代码创建一个 Canvas 元素，并在其上绘制游戏画面。
• 然后，代码加载背景图片、英雄图片和怪物图片。
• 接着，代码定义了英雄和怪物对象，并添加了处理用户输入的代码，使用键盘控制英雄移动。
• 代码还包含了游戏重置功能，以及判断英雄是否捕捉到怪物的逻辑。
• 最后，代码使用 requestAnimationFrame 函数来实现游戏循环，不断更新游戏状态并渲染画面。

通过学习这段代码，你可以了解如何使用 HTML Canvas 创建简单的游戏，并掌握一些基本的 JavaScript 游戏开发技巧。