这是一个很简单的html5游戏，通过学习原博文自己做了些改造，
现在附上原博文的链接
这是游戏的截图：
1.有计算抓住的怪物的数量
2.有背景，英雄，怪物。
第一步：建立html文件和js文件
建立一个games文件夹，在文件夹中建立js文件夹，images文件夹，以及index.html。
game.js放在js文件夹中，图片放在images文件夹中。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
</head>
<body>
<script src="js/game.js"></script>
</body>
</html>第二步：如何制作这样一个游戏
我们首先要明白游戏的流程是怎样的。这个游戏十分简单，只是简单的抓怪兽，玩家通过操纵键盘的上下左右来让英雄移动从而抓怪兽，然后记录得分。
我们需要一个游戏环境和角色来让玩家操作
1.首先我们用canvas来创建一个画布作为游戏的舞台。
通过canvas标签创建元素，然后我们设置画布的宽度高度，之后让画布添加到页面上。
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);2.然后我们添加相应的图片（背景，英雄，怪物）
只是简单的创建图片对象，而beReady这个变量是用来标识图片是否加载完成。
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";
// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";3.添加英雄，怪物，记录分数的变量
资源都加载完成后，我们就构造英雄怪物的对象，因为游戏很简单，所以怪物静止不动只需要随机刷新位置，而英雄只需要一个速度属性就好了，而分数一开始为0。
// Game objects
var hero = {
speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;4.获取用户的输入
因为在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。为此，用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么就做相应处理。
默认是键盘输入，所以我们监听keysdown和keysup。
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
5.开始一轮游戏
reset方法用于开始新一轮游戏，在这个方法里我们将英雄放回画布的中心同时将怪物放到一个随机的地方。
// 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));
};6.更新对象
用于更新画面的update函数，会被规律的重复调用。首先它检查用户当前按住的是不是方向键，然后再让英雄朝英雄相应方向移动。这个传入的modifier 变量是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
我们还要给英雄移动增加边界检查，不然会跑到地图外面去了。
// Update game objects
var update = function (modifier) {
if (38 in keysDown && hero.y > 32) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown && hero.y < canvas.height-64) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown&& hero.x > 32) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown&& hero.x < canvas.width-64) { // 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();
}
};
7.渲染物体
首先把背景画出来，然后如法炮制把英雄和怪物也画出来，顺序有讲究不然后面的物体会覆盖之前的物体。
之后我们通过canvas的相关属性改变记分牌。
// 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("抓住的怪物: " + monstersCaught, 10, 10);
};
8.主循环函数
主函数控制整个游戏的流程，先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
// 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);
};
因为运用的是requestAnimationFrame，所以我们要注意浏览器兼容性处理。
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;9.我们就可以在浏览器启动游戏了
先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏
// Let's play this game!
var then = Date.now();
reset();
main();