简介
您想使用画布和 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);
目前,我们可以将更新方法和绘制方法留空。重要的是,setInterval()
会负责定期调用它们。
function update() { ... }
function draw() { ... }
Hello World
现在,我们已开始游戏循环,下面我们来更新绘制方法,以便在屏幕上实际绘制一些文本。
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);
}
快来试试吧!如果您按着学习进度,它应该会移动,但还会在屏幕上留下之前绘制的时间。请花点时间猜猜为什么会是这样。这是因为我们没有清除屏幕。 现在,我们在该绘制方法中添加一些屏幕清除代码。
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 热键插件可以大幅简化浏览器之间的按键操作。我们无需担心跨浏览器 keyCode
和 charCode
问题,而可以这样绑定事件:
$(document).bind("keydown", "left", function() { ... });
无需担心哪些键对应哪些代码的详细信息,这是一项非常大的成功。我们只希望能够这样说:“当玩家按下向上按钮时,执行特定操作”。jQuery 热键恰好可以满足这一要求。
玩家移动
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;
}
我们希望检查以下几种冲突:
- 玩家子弹 => 敌舰
- 玩家 => 敌方飞船
让我们创建一个可以从更新方法中调用的方法来处理冲突。
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 现在是无撕的,但添加声音目前是导致应用崩溃的最快方式。剪掉声音或破坏整个浏览器标签页的情况是很常见的,因此请准备好备妥的耳机。
告别
同样,您也可以观看完整的有效游戏演示。您还可以以 ZIP 格式下载源代码。
希望您喜欢学习使用 JavaScript 和 HTML5 制作简单游戏的基础知识。通过在适当的抽象级别进行编程,我们可以避开 API 中较难处理的部分,并能够灵活应对未来的变化。