如何开发一个简单的html5小游戏

创建画布

// Create the canvas

var canvas = document.createElement("canvas")

var ctx = canvas.getContext("2d")

canvas.width = 512

canvas.height = 480

document.body.appendChild(canvas)

首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。

准备图片

// 背景图片

var bgReady = false

var bgImage = new Image()

bgImage.onload = function () {

bgReady = true

}

bgImage.src = "images/background.png"

游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。

整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。

游戏对象

// 游戏对象

var hero = {

speed: 256, // 每秒移动的像素

x: 0,

y: 0

}

var monster = {

x: 0,

y: 0

}

var monstersCaught = 0

现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。

处理用户的输入

// 处理按键

var keysDown = {}

addEventListener("keydown", function (e) {

keysDown[e.keyCode] = true

}, false)

addEventListener("keyup", function (e) {

delete keysDown[e.keyCode]

}, false)

现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。

为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。

开始一轮游戏

// 当用户抓住一只怪物后开始新一轮游戏

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))

}

reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。

更新对象

// 更新游戏对象的属性

var update = function (modifier) {

if (38 in keysDown) { // 用户按的是↑

hero.y -= hero.speed * modifier

}

if (40 in keysDown) { // 用户按的是↓

hero.y += hero.speed * modifier

}

if (37 in keysDown) { // 用户按的是←

hero.x -= hero.speed * modifier

}

if (39 in keysDown) { // 用户按的是→

hero.x += hero.speed * modifier

}

// 英雄与怪物碰到了么？

if (

hero.x <= (monster.x + 32)

&&monster.x <= (hero.x + 32)

&&hero.y <= (monster.y + 32)

&&monster.y <= (hero.y + 32)

) {

++monstersCaught

reset()

}

}

这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。

有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。

现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。

渲染物体

// 画出所有物体

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)

}

// 计分

ctx.fillStyle = "rgb(250, 250, 250)"

ctx.font = "24px Helvetica"

ctx.textAlign = "left"

ctx.textBaseline = "top"

ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32)

}

之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。

这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！

主循环函数

// 游戏主函数

var main = function () {

var now = Date.now()

var delta = now - then

update(delta / 1000)

render()

then = now

// 立即调用主函数

requestAnimationFrame(main)

}

上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。

关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。

关于循环的进一步解释

// requestAnimationFrame 的浏览器兼容性处理

var w = window

requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame

如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的

为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。

启动游戏！

// 少年，开始游戏吧！

var then = Date.now()

reset()

main()

总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。

到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)

Feel free to repost but keep the link to this page please!

用HTML5制作一款小游戏首先肯定得学会HTML，然后推荐可以考虑先去学习别人的成品游戏，借鉴甚至模仿出来，再去构思自己的游戏就很简单了，我目前就在云创动力华中区学习游戏制作，感觉用HTML5制作游戏真的并不难。

1. 创建一个Canvas对象

[javascript] view plaincopy

// Create the canvas

var canvas = document.createElement("canvas")

var ctx = canvas.getContext("2d")

canvas.width = 512

canvas.height = 480

document.body.appendChild(canvas)

我们首先要做的是创建一个canvas对象。可以用JavaScript或HTML来做，都非常简单。此处我用的是JS。当创建了canvas之后，我们就可以获取它的上下文对象（context）、设置尺寸，并且把它加到当前文档中。

2. 载入图片

[javascript] view plaincopy

// Background image

var bgReady = false

var bgImage = new Image()

bgImage.onload = function () {

bgReady = true

}

bgImage.src = "images/background.png"

游戏需要图像，所以让我们载入一些图片吧。我想尽量简单化，所以只用了Image对象来做，当然，还可以将载入图像的功能封装成一个类或别的任何形式。代码中的bgReady用来标识图片是否已完全载入，只有当图片载入完成后，我们才能使用它，如果在载入完成前就对其进行绘制或渲染，JS将会报一个DOM error的错误。

我们会用到三张图片（背景、英雄、怪物），每张图片都需要这样处理。

3. 定义游戏要使用的对象

[javascript] view plaincopy

// 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属性表示英雄的移动速度（像素/秒）；monster对象不会移动，所以仅仅具有一对坐标；monstersCaught表示玩家抓住的怪物数量。

4. 处理玩家输入

[javascript] view plaincopy

// Handle keyboard controls

var keysDown = {}

addEventListener("keydown", function (e) {

keysDown[e.keyCode] = true

}, false)

addEventListener("keyup", function (e) {

delete keysDown[e.keyCode]

}, false)

现在进行输入的处理。（对具有web开发背景的人来说，这是目前为止第一个具有挑战性的部分）对一般的网页来说，当用户开始输入时，可能需要马上开始播放动画或请求数据。但在这里，我们想让游戏逻辑在一个单独的地方对游戏中发生的事情进行处理。为此我们需要将用户输入保存下来以备稍后处理，而不是立即处理。

我们通过简单地将事件对应的键编码（keyCode）保存在keysDown变量中来实现。如果该变量中具有某个键编码，就表示用户目前正按下这个键。简单吧！

5. 新游戏

[javascript] view plaincopy

// Reset the game when the player catches a monster

var reset = function () {

hero.x = canvas.width / 2

hero.y = canvas.height / 2

// Throw the monster somewhere on the screen randomly

monster.x = 32 + (Math.random() * (canvas.width - 64))

monster.y = 32 + (Math.random() * (canvas.height - 64))

}

通过调用reset函数来开始新游戏。该函数将英雄（即玩家角色）放到屏幕中间，然后随机选择一个位置来安置怪物。

6. 更新对象

[javascript] view plaincopy

// 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()

}

}

这是update函数，游戏每隔一定时间会调用它一次。它所做的第一件事情是检查用户是否按下了上下左右四个箭头键。如果是，就将我们的英雄向相应的方向移动。

update有一个modifier参数，这看起来好像有点奇怪。你会在游戏的主函数即main函数中看到它，不过我在这儿先解释一下。modifier参数是一个从1开始的与时间相关的数。如果间隔刚好为1秒时，它的值就会为1，英雄移动的距离即为256像素（英雄的速度为256像素/秒）；而如果间隔是0.5秒，它的值就为0.5，即英雄移动的距离为其速度的一半，以此类推。通常update函数调用的间隔很短，所以modifier的值很小，但用这种方式能够确保不管代码执行的速度怎么样，英雄的移动速度都是相同的。

我们已经实现了根据用户的输入来移动英雄，但我们还可以在移动英雄时对其进行检查，以确定是否有其他事件发生。例如：英雄是否与怪物发生了碰撞——当英雄与怪物发生碰撞时，我们为玩家进行计分（monstersCaught加1）并重置游戏（调用reset函数）。

7. 渲染对象

[javascript] view plaincopy

// 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("Goblins caught: " + monstersCaught, 32, 32)

}

当你能够看到你的行动时游戏才会变得更有趣，所以让我们在屏幕上绘制吧。首先我们将背景图片绘制到canvas，然后是英雄和怪物。注意顺序很重要，因为任何位于表层的图片都会将其下面的像素覆盖掉。

接下来是文字，这有些不同，我们调用fillText函数显示玩家的分数。因为不需要复杂的动画或者对文字进行移动，所以只是绘制一下就ok了。

8. 游戏主循环

[javascript] view plaincopy

// The main game loop

var main = function () {

var now = Date.now()

var delta = now - then

update(delta / 1000)

render()

then = now

}

游戏的主循环用来控制游戏流程。首先我们要获得当前的时间，这样我们才能计算时间差（自上次循环以来经过的时间）。然后计算modifier的值并交给update（需要将delta除以1000以将其转换为毫秒）。最后调用render并更新记录的时间。

更多关于游戏循环的内容见“Onslaught! Arena Case Study”。

9. 开始游戏吧

[javascript] view plaincopy

// Let's play this game!

reset()

var then = Date.now()

setInterval(main, 1)// Execute as fast as possible

快完成了，这是最后一段代码。首先调用reset来开始新游戏。（还记得吗，这会将英雄置中并随机安放怪物）。然后将起始时间保存到变量then中并启动游戏的主循环。

OK！（但愿）你现在已经理解了在HTML5 Canvas中用JS来开发游戏的基础知识了。建议最好是能够自己亲自试一把！

---