如何开发一个简单的HTML5画布游戏？
[javascript]查看纯文本
//创建画布
var canvas = document . createelement(" canvas ")；
var CTX = canvas . get context(" 2d ")；
帆布.宽度= 512；
canvas.height = 480
document . body . appendchild(canvas)；
我们需要做的第一件事是创建一个画布对象。可以用JavaScript或者HTML来做，非常简单。我这里用JS。创建画布后，我们可以获取它的上下文，设置大小并将其添加到当前文档中。
加载图片
[javascript]查看纯文本
//背景图像
var bgReady = false
var bgImage = new Image()；
bgImage.onload = function () {
bgReady = true
};
bgimage . src = " images/background . png "；
游戏需要图片，我们来加载一些图片。我想尽可能的简化，所以只用Image对象来做。当然，我也可以将加载图像的功能封装到一个类或任何其他形式中。代码中的BgReady用于标识图片是否已经完全加载。只有图片加载后，我们才能使用它。如果我们在加载完成之前绘制或渲染它，JS将报告一个DOM错误。
我们会用三张图片(背景，英雄，怪物)，每张图片都需要这样处理。
3.定义游戏中要使用的对象
[javascript]查看纯文本
//游戏对象
var hero = {
速度:256，//每秒移动像素
x: 0，
y: 0
};
var monster = {
x: 0，
y: 0
};
var monster catch = 0；
定义一些变量，后面会用到。英雄对象的speed属性表示英雄的移动速度(像素每秒)；怪物物体不动，所以只有一对坐标；monsters catched表示玩家抓到的怪物数量。
4.处理玩家输入
[javascript]查看纯文本
//处理键盘控件
var keydown = { }；
addEventListener("keydown "，函数(e) {
keys down[e . keycode]= true；
}，假)；
addEventListener("keyup "，函数(e) {
删除keydown[e . keycode]；
}，假)；
现在输入被处理了。(对于有web开发背景的人来说，这是目前为止第一个具有挑战性的部分。)对于普通网页，当用户开始打字时，可能需要立即开始播放动画或请求数据。但是在这里，我们希望游戏逻辑在一个单独的地方处理游戏中发生的事情。出于这个原因，我们需要保存用户输入供以后处理，而不是立即处理它。
我们通过简单地将对应于事件的键码存储在keysDown变量中来实现这一点。如果这个变量中有一个键码，就意味着用户当前正在按这个键。简单！
5.新游戏
[javascript]查看纯文本
//当玩家抓到怪物时重置游戏
var 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))；
};
通过调用重置函数开始一个新游戏。这个功能把英雄(也就是玩家角色)放在屏幕中间，然后随机选择一个位置放置怪物。
更新对象
[javascript]查看纯文本
//更新游戏对象
var update = function (modifier) {
if(38 in keydown){//玩家保持
hero.y -= hero.speed *修改器；
}
if(40 in keydown){//玩家按住
hero.y += hero.speed *修改器；
}
if(37 in keydown){//玩家持左
hero.x -= hero.speed *修改器；
}
if(39 in keydown){//玩家持权
hero.x += hero.speed *修改器；
}
//他们在接触吗？
如果(
hero.x & lt= (monster.x + 32)
& amp& ampmonster.x & lt= (hero.x + 32)
& amp& amphero.y & lt= (monster.y + 32)
& amp& ampmonster.y & lt= (hero.y + 32)
) {
++ monster scatter；
reset()；
}
};
这是更新功能，游戏会每隔一段时间调用一次。它做的第一件事是检查用户是否按下了上下左右箭头键。如果有，把我们的英雄往相应的方向移动。
Update有一个修饰符参数，看起来有点奇怪。你会在游戏的主要功能里看到，不过我先在这里说明一下。modifier参数是一个从1开始的时间相关数字。如果间隔刚好是1秒，那么它的值将是1，英雄移动的距离是256像素(英雄的速度是256像素/秒)；而如果间隔是0.5秒，它的值就是0.5，也就是英雄移动的距离是他速度的一半，以此类推。通常情况下，更新函数的调用间隔很短，所以修改器的值很小，但这样一来，无论代码执行的速度如何，都可以保证英雄的移动速度是一样的。
我们已经根据用户的输入移动了英雄，但我们也可以在移动英雄时检查它，以确定是否有其他事件。比如英雄是否与怪物相撞——当英雄与怪物相撞时，我们给玩家打分(monstersCaught加1)，重置游戏(称为重置功能)。
7.渲染对象
[javascript]查看纯文本
//画出一切
var render = function () {
如果(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 . fill text(" Goblins catched:"+monsters catched，32，32)；
};
当你能看到你的动作时，游戏会变得更有趣，所以让我们把它画在屏幕上。首先，我们把背景画到画布上，然后是英雄和怪物。注意顺序很重要，因为表面上的任何图片都会覆盖其下方的像素。
接下来是正文，略有不同。我们调用fillText函数来显示玩家的分数。因为不需要复杂的动画或者移动的文字，只要画出来就可以了。
8.游戏的主循环
[javascript]查看纯文本
//主游戏循环
var main = function () {
var now = date . now()；
var delta = now-then；
更新(delta/1000)；
render()；
那么=现在；
};
游戏的主循环用来控制游戏流程。首先，我们需要获得当前时间，这样我们就可以计算时间差(自上一个周期以来经过的时间)。然后计算modifier的值，给它更新(需要将delta除以1000，换算成毫秒)。最后，调用render并更新记录的时间。
有关游戏周期的更多信息，请参见“猛攻！竞技场案例研究”.
9.让我们开始游戏。
[javascript]查看纯文本
//我们来玩这个游戏吧！
reset()；
var then = date . now()；
setInterval(main，1)；//尽可能快地执行
快完成了，这是最后一段代码。第一次调用重置开始新游戏。请记住，这将中心的英雄和随机放置怪物。然后将开始时间保存到变量中，然后开始游戏的主循环。
好吧！(希望)你现在已经理解了在HTML5 Canvas中用JS开发游戏的基础。最好自己试试！