// 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();
}
};
// 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);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
你是否想用HTML5 的canvas画布制作一个简单游戏? 如果答案是肯定的请往下看。
让我们一步一步讲解
绘制画布
首先我们需要绘制出一个canvas element
载入图片
一个游戏是需要图形场景的,所以我们载入一些图片场景。
这里的bgReady变量用来标识图片是否载入,以便于我们知道是否可以在图片上绘制了。
如果图片还没有载入就绘制会出现错误(throw a DOM error)
我们这个游戏比较简单,但是它也有三个图形场景
游戏对象
现在我们需要定义一些变量和对象来描述场景
玩家输入
现在是对玩家输入的处理。
需要注意的是在传统的web开发时候,用户启动输入时候就可以触发动画或者请求数据了。 但这里我们的游戏逻辑中,我们希望我们的游戏逻辑只存在于一个地方,以便对事情发生的时间和情况保持严格的控制。
因此,我们只想存储用户输入以供以后使用,而不是立即对其进行操作。
为此,我们只需要一个变量keysDown即可存储任何事件的keyCode。如果键代码位于对象中,则用户当前正在按该键。简单!
更新对象
这是更新函数,每执行一次间隔就会调用一次。它要做的第一件事是检查向上,向下,向左和向右箭头键,查看用户是否按下了它们。如果是这样,英雄将朝相应的方向移动。
看起来有点奇怪,将修饰符modifier参数传递给了update。 您将看到在main函数中如何引用它,但让我首先在这里进行解释。 修饰符modifier是基于1的基于时间的数字。如果恰好经过了一秒,则该值将为1,并且英雄的速度将乘以1,这意味着他将在该秒内移动256个像素。 如果过去了半秒,则该值为0.5,英雄将在该时间内移动一半速度。 依此类推。 调用此函数的速度如此之快,以至于修改器值通常会非常低,但是使用此模式将确保英雄无论脚本运行多快(或多慢!)都将以相同的速度移动。
现在我们已经根据玩家的输入移动了英雄,我们可以检查它是否引起了任何事情。 如果与英雄和怪物发生碰撞,就是这样! 那几乎就是游戏。 我们计算比分(对MonstersCaught +1)并重置游戏。
绘制对象
当您看到动作下降时,游戏会变得更加有趣,所以让我们将所有内容绘制到屏幕上。 首先,我们将背景图像绘制到画布上。 为英雄和怪物重复。 请注意,顺序很重要,因为绘制到画布上的任何图像都将绘制在其下方的像素上。 接下来,我们更改上下文中与如何绘制字体有关的一些属性,并调用fillText以显示玩家的得分。 由于我们没有任何复杂的动画或运动,因此我们完成了绘制。
接下来,我们更改上下文中与如何绘制字体有关的一些属性,并调用fillText以显示玩家的得分。由于我们没有任何复杂的动画或运动,因此我们完成了绘制。
游戏主循环
游戏的主要循环是控制游戏流程的因素。 首先,我们要获取当前时间戳,以便我们可以计算增量(自上一个间隔以来经过了多少毫秒)。 通过除以1000(一秒中的毫秒数),可以获取要发送以进行更新的修饰符。 然后我们调用render并记录时间戳。
关于game loop 可以看看这篇文章: https://www.html5rocks.com/en/tutorials/casestudies/onslaught/#toc-the-game-loop
关于循环的注意事项
不用担心,没有必要完全理解这一部分,但是我认为对循环代码的解释将是有益的 为了连续调用主要的游戏循环功能,本教程用于执行setInterval方法。 如今,通过requestAnimationFrame方法有一种更好的方法。
开始游戏
这是最后一个代码片段! 首先,我们设置时间戳(然后使用变量)作为种子。 然后我们调用reset来开始新的游戏/关卡。 (请记住,这将使英雄居中并将怪物随机放置,以供玩家查找。)
现在,您已经了解使用JavaScript操作canvas元素来开发游戏的基本原理, 后面文章我们将多介绍相关技巧和实例。
源码:
How to make a simple HTML5 Canvas game