HTML5 游戏指南

Daniel X. Moore
Daniel X. Moore
X 首页

简介

您想使用 Canvas 和 HTML5 制作游戏吗？请按照本教程操作，您很快就能上手。

本教程假定您至少具备 JavaScript 的中级知识。

您可以先玩游戏，也可以直接跳转到文章并查看游戏的源代码。

创建画布

为了绘制内容，我们需要创建一个画布。由于本指南旨在让您轻松上手，因此我们将使用 jQuery。

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                      "' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

游戏循环

为了模拟流畅连续的游戏画面，我们希望游戏更新和重新绘制屏幕的速度略快于人脑和眼睛能够感知的速度。

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

目前，我们可以将 update 和 draw 方法留空。需要注意的重要一点是，setInterval() 会负责定期调用这些方法。

function update() { ... }
function draw() { ... }

Hello World

现在，我们已经有了游戏循环，接下来更新 draw 方法，以便实际在屏幕上绘制一些文本。

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

对于静态文本，这非常酷，但由于我们已经设置了游戏循环，因此应该能够非常轻松地让其移动。

var textX = 50;
var textY = 50;

function update() {
  textX += 1;
  textY += 1;
}

function draw() {
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

现在试试。如果您在跟着操作，它应该会移动，但同时也会保留之前在屏幕上绘制过的次数。请花一点时间猜测可能的原因。这是因为我们没有清除屏幕。 因此，我们将向 draw 方法添加一些屏幕清除代码。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

现在，您已经在屏幕上实现了一些文本移动，距离制作一款真正的游戏已经完成了一半。只需优化控件、改进游戏玩法、润色图形即可。好吧，也许只完成了制作一款真实游戏的 1/7 工作，但好消息是，本教程还有更多内容。

创建播放器

创建一个对象来存储玩家数据，并负责绘制等操作。在这里，我们使用简单的对象字面量创建一个玩家对象来存储所有信息。

var player = {
  color: "#00A",
  x: 220,
  y: 270,
  width: 32,
  height: 32,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  }
};

我们暂时使用一个简单的彩色矩形来表示玩家。绘制游戏时，我们将清除画布并绘制玩家。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

键盘控制

使用 jQuery 热键

jQuery Hotkeys 插件可大大简化跨浏览器的按键处理。 与其为无法解读的跨浏览器 keyCode 和 charCode 问题而烦恼，不如按如下方式绑定事件：

$(document).bind("keydown", "left", function() { ... });

不必担心哪些按键对应哪些代码的细节，这是一个巨大的优势。我们只希望能够说出诸如“当玩家按下向上按钮时，执行某项操作”之类的语句。jQuery Hotkeys 非常适合此用途。

玩家移动

JavaScript 处理键盘事件的方式完全是事件驱动的。这意味着没有用于检查密钥是否处于停用状态的内置查询，因此我们必须使用自己的查询。

您可能会问：“为什么不直接使用事件驱动方式处理按键？” 这是因为键盘重复率因系统而异，并且不受游戏循环时间的约束，因此游戏体验可能会因系统而异。为了打造一致的体验，请务必将键盘事件检测与游戏循环紧密集成。

好消息是，我添加了一个 16 行 JS 封装容器，可用于执行事件查询。该文件名为 key_status.js，您可以通过检查 keydown.left 等随时查询按键的状态。

现在，我们已经能够查询按键是否已按下，因此可以使用此简单的更新方法来移动玩家。

function update() {
  if (keydown.left) {
    player.x -= 2;
  }

  if (keydown.right) {
    player.x += 2;
  }
}

您可以试用一下。

您可能会注意到，播放器可以移出屏幕。我们来限制玩家的位置，使其保持在边界内。此外，播放器似乎有点慢，因此我们也将速度提高一下。

function update() {
  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

添加更多输入内容同样非常简单，因此我们来添加一些炮弹。

function update() {
  if (keydown.space) {
    player.shoot();
  }

  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

player.shoot = function() {
  console.log("Pew pew");
  // :) Well at least adding the key binding was easy...
};

添加更多游戏对象

子弹

现在，我们来真正添加炮弹。首先，我们需要一个集合来存储所有这些数据：

var playerBullets = [];

接下来，我们需要一个构造函数来创建子弹实例。

function Bullet(I) {
  I.active = true;

  I.xVelocity = 0;
  I.yVelocity = -I.speed;
  I.width = 3;
  I.height = 3;
  I.color = "#000";

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.active = I.active && I.inBounds();
  };

  return I;
}

当玩家开枪时，我们应创建一个子弹实例并将其添加到子弹集合中。

player.shoot = function() {
  var bulletPosition = this.midpoint();

  playerBullets.push(Bullet({
    speed: 5,
    x: bulletPosition.x,
    y: bulletPosition.y
  }));
};

player.midpoint = function() {
  return {
    x: this.x + this.width/2,
    y: this.y + this.height/2
  };
};

现在，我们需要将更新项目符号的操作添加到更新步骤函数。为防止项目集无限期填满，我们会过滤项目列表，使其仅包含有效的项目。这样一来，我们还可以移除与敌人相撞的子弹。

function update() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.update();
  });

  playerBullets = playerBullets.filter(function(bullet) {
    return bullet.active;
  });
}

最后一步是绘制子弹：

function draw() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.draw();
  });
}

敌人

现在，我们将以与添加子弹类似的方式添加敌人。

  enemies = [];

function Enemy(I) {
  I = I || {};

  I.active = true;
  I.age = Math.floor(Math.random() * 128);

  I.color = "#A2B";

  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
  I.y = 0;
  I.xVelocity = 0
  I.yVelocity = 2;

  I.width = 32;
  I.height = 32;

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);

    I.age++;

    I.active = I.active && I.inBounds();
  };

  return I;
};

function update() {
  ...

  enemies.forEach(function(enemy) {
    enemy.update();
  });

  enemies = enemies.filter(function(enemy) {
    return enemy.active;
  });

  if(Math.random() < 0.1) {
    enemies.push(Enemy());
  }
};

function draw() {
  ...

  enemies.forEach(function(enemy) {
    enemy.draw();
  });
}

加载和绘制图片

看着这些盒子四处飞舞很酷，但如果能看到它们的图片，就更酷了。在画布上加载和绘制图片通常是一件令人沮丧的事。为了避免这种痛苦和折磨，我们可以使用一个简单的实用程序类。

player.sprite = Sprite("player");

player.draw = function() {
  this.sprite.draw(canvas, this.x, this.y);
};

function Enemy(I) {
  ...

  I.sprite = Sprite("enemy");

  I.draw = function() {
    this.sprite.draw(canvas, this.x, this.y);
  };

  ...
}

碰撞检测

我们在屏幕上飞舞了这些内容，但它们之间没有互动。为了让所有对象都知道何时爆炸，我们需要添加某种碰撞检测。

我们使用一个简单的矩形碰撞检测算法：

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

我们需要检查一些冲突：

  1. 玩家子弹 => 敌舰
  2. 玩家 => 敌舰

我们来创建一个方法来处理碰撞，我们可以从 update 方法调用该方法。

function handleCollisions() {
  playerBullets.forEach(function(bullet) {
    enemies.forEach(function(enemy) {
      if (collides(bullet, enemy)) {
        enemy.explode();
        bullet.active = false;
      }
    });
  });

  enemies.forEach(function(enemy) {
    if (collides(enemy, player)) {
      enemy.explode();
      player.explode();
    }
  });
}

function update() {
  ...
  handleCollisions();
}

现在，我们需要向玩家和敌人添加爆炸方法。这会将其标记为要移除，并添加爆炸效果。

function Enemy(I) {
  ...

  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };

  return I;
};

player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

声音

为了完善体验，我们将添加一些美妙的音效。 与图片一样，在 HTML5 中使用声音可能有些麻烦，但得益于我们的神奇公式 sound.js，您可以非常轻松地使用声音。

player.shoot = function() {
  Sound.play("shoot");
  ...
}

function Enemy(I) {
  ...

  I.explode = function() {
    Sound.play("explode");
    ...
  }
}

虽然该 API 现在不会出现画面卡顿，但添加音效目前是导致应用崩溃的最快方式。音频中断或整个浏览器标签页崩溃的情况并不少见，因此请准备好纸巾。

Farewell

再次提醒一下，这是完整的游戏演示版。您也可以以 ZIP 文件的形式下载源代码。

希望您喜欢学习使用 JavaScript 和 HTML5 制作简单游戏的基础知识。通过在适当的抽象级别进行编程，我们可以避免 API 中较难的部分，并在面对未来的变化时保持弹性。

参考