小游戏
你是否想用HTML5 的canvas画布制作一个简单游戏?
如果答案是肯定的请往下看。
让我们一步一步讲解
1. 绘制画布
// Create the canvas
// canvas元素作为我们绘制的画布,我们可以在上面作画了。
var canvas = document.createElement("canvas");
// 获取画布的上线下文对象,可以使用上面挂载的api
var ctx = canvas.getContext("2d");
// 设置画布宽度
canvas.width = 512;
//设置画布高度
canvas.height = 480;
// 将画布添加到body元素后面,这样画布就会出现在页面中
document.body.appendChild(canvas);
首先我们需要绘制出一个canvas element
2. 载入图片
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
一个游戏是需要图形场景的,所以我们载入一些图片场景。
这里的bgReady变量用来标识图片是否载入,以便于我们知道是否可以在图片上绘制了。
如果图片还没有载入就绘制会出现错误(throw a DOM error)
我们这个游戏比较简单,但是它也有三个图形场景
背景
英雄
怪兽
3. 游戏对象
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
现在我们需要定义一些变量和对象来描述场景
hero英雄: 有speed描述移动速度,在canvas画布上就是每秒移动的像素点位移, 他还有自己的位置(x,y)
r monster 怪兽: 不会移动,所以只有位置
monstersCaught : 储存怪兽被抓住的次数
4. 玩家输入
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
现在是对玩家输入的处理。
需要注意的是在传统的web开发时候,用户启动输入时候就可以触发动画或者请求数据了。
但这里我们的游戏逻辑中,我们希望我们的游戏逻辑只存在于一个地方,以便对事情发生的时间和情况保持严格的控制。
因此,我们只想存储用户输入以供以后使用,而不是立即对其进行操作。
为此,我们只需要一个变量keysDown即可存储任何事件的keyCode。如果键代码位于对象中,则用户当前正在按该键。简单!
5. 更新对象
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
这是更新函数,每执行一次间隔就会调用一次。它要做的第一件事是检查向上,向下,向左和向右箭头键,查看用户是否按下了它们。如果是这样,英雄将朝相应的方向移动。
看起来有点奇怪,将修饰符modifier参数传递给了update。 您将看到在main函数中如何引用它,但让我首先在这里进行解释。 修饰符modifier是基于1的基于时间的数字。如果恰好经过了一秒,则该值将为1,并且英雄的速度将乘以1,这意味着他将在该秒内移动256个像素。 如果过去了半秒,则该值为0.5,英雄将在该时间内移动一半速度。 依此类推。 调用此函数的速度如此之快,以至于修改器值通常会非常低,但是使用此模式将确保英雄无论脚本运行多快(或多慢!)都将以相同的速度移动。
现在我们已经根据玩家的输入移动了英雄,我们可以检查它是否引起了任何事情。 如果与英雄和怪物发生碰撞,就是这样! 那几乎就是游戏。 我们计算比分(对MonstersCaught +1)并重置游戏。
6. 绘制对象
// Draw everything
var 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);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};
当您看到动作下降时,游戏会变得更加有趣,所以让我们将所有内容绘制到屏幕上。 首先,我们将背景图像绘制到画布上。 为英雄和怪物重复。 请注意,顺序很重要,因为绘制到画布上的任何图像都将绘制在其下方的像素上。 接下来,我们更改上下文中与如何绘制字体有关的一些属性,并调用fillText以显示玩家的得分。 由于我们没有任何复杂的动画或运动,因此我们完成了绘制。
接下来,我们更改上下文中与如何绘制字体有关的一些属性,并调用fillText以显示玩家的得分。由于我们没有任何复杂的动画或运动,因此我们完成了绘制。
7. 游戏主循环
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
游戏的主要循环是控制游戏流程的因素。 首先,我们要获取当前时间戳,以便我们可以计算增量(自上一个间隔以来经过了多少毫秒)。 通过除以1000(一秒中的毫秒数),可以获取要发送以进行更新的修饰符。 然后我们调用render并记录时间戳。
关于game loop 可以看看这篇文章:https://www.html5rocks.com/en/tutorials/casestudies/onslaught/#toc-the-game-loop
8. 关于循环的注意事项
不用担心,没有必要完全理解这一部分,但是我认为对循环代码的解释将是有益的
为了连续调用主要的游戏循环功能,本教程用于执行setInterval方法。 如今,通过requestAnimationFrame方法有一种更好的方法。
9. 开始游戏
// Let's play this game!
var then = Date.now();
reset();
main();
这是最后一个代码片段! 首先,我们设置时间戳(然后使用变量)作为种子。 然后我们调用reset来开始新的游戏/关卡。 (请记住,这将使英雄居中并将怪物随机放置,以供玩家查找。)
现在,您已经了解使用JavaScript操作canvas元素来开发游戏的基本原理,
后面文章我们将多介绍相关技巧和实例。
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
源码:
How to make a simple HTML5 Canvas game: https://github.com/lostdecade/simple_canvas_game
点“阅读原文”查看源代码