HTML Canvas 游戏教程：用 JavaScript 创建一个简单游戏

这是一个简单的 HTML Canvas 游戏教程，演示了如何用 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);
};

这段代码没有错误。

游戏逻辑

这段代码创建了一个简单的捕捉怪物的游戏。玩家控制一个英雄，通过键盘控制英雄在画布上移动，并捕捉随机位置出现的怪物。

核心代码

update(modifier) 函数更新游戏状态，处理玩家输入，检测碰撞。
render() 函数绘制游戏画面，包括背景、英雄、怪物和得分。
main() 函数是游戏循环，不断调用 update() 和 render() 函数来更新游戏状态和绘制画面。

注意

需要在 HTML 文件中添加一个 canvas 元素，并确保图片文件 (images/background.png, images/hero.png, images/monster.png) 位于正确的位置。
此代码示例仅供学习使用，可以根据自己的需求进行修改和扩展。

更多学习资源

希望本教程对您有所帮助！祝您游戏开发愉快！