用html5 Canvas制作一个简单的游戏 英雄抓小怪物（中）

4.处理玩家输入

// 键盘 输入处理
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

用户到底按下了哪个键，通过键盘事件来处理，将按下的键的keyCode保存在空对象KeysDown中。如果该变量中具有某个键编码，就表示用户目前正按下这个键。

5.新游戏

// 当英雄捉住怪物之后重新开始游戏，英雄的位置在画布中间，怪物位置随机
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函数来开始新游戏。该函数将英雄（即玩家角色）放到屏幕中间，然后随机选择一个位置来安置怪物。

6.更新对象

// 更新游戏对象
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();
}
};