HTML5 2D 游戏开发 设置舞台（6）键盘输入
|
- UID
- 1066743
|
HTML5 2D 游戏开发 设置舞台（6）键盘输入
键盘输入在 Snail Bait 中，玩家可以使用键盘来控制跑步小人，所以我会对该游戏如何处理键盘输入做一个简短的讨论，并以此来结束这篇文章。d 和 k 键可以让移动的跑步小人向左和向右移动，而 j 和 f 则分别让跑步小人跳跃和下落。图 4 显示了跳上第三个平台的轨道之后的跑步小人：
图 4. 在轨道之间跳跃之后的奔跑 您只能将键盘事件侦听器添加到 focusable HTML 元素。canvas 元素是不能获得焦点的，所以 Snail Bait 将一个 onkeydown 事件处理器添加到 window 对象，如清单 12 所示：
清单 12. 对键盘输入的反应1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| var runnerTrack = 1,
BACKGROUND_VELOCITY = 42;
function turnLeft() {
bgVelocity = -BACKGROUND_VELOCITY;
}
function turnRight() {
bgVelocity = BACKGROUND_VELOCITY;
}
window.onkeydown = function (e) {
var key = e.keyCode;
if (key === 80 || (paused && key !== 80)) { // p
togglePaused();
}
if (key === 68 || key === 37) { // d or left arrow
turnLeft();
}
else if (key === 75 || key === 39) { // k or right arrow
turnRight();
}
else if (key === 74) { // j
if (runnerTrack === 3) {
return;
}
runnerTrack++;
}
else if (key === 70) { // f
if (runnerTrack === 1) {
return;
}
runnerTrack--;
}
};
|
重要的是要认识到，Snail Bait 的游戏循环在不断运行。在浏览器已经准备好画下一个动画帧时，浏览器就会调用 animate() 函数，而 animate() 反过来又不断地调用 draw()（在 中列出）。
由于游戏循环在不断运行，键盘事件处理器只需设置游戏的变量即可。例如，当您按下 k 将跑步小人向右移动，事件处理器会将 bgVelocity 设置为 BACKGROUND_VELOCITY = 42（像素/秒），当您按下 d 将跑步小人向左移动，事件处理器会将 bgVelocity 设置为 -42 像素/秒。一直到后来，当游戏绘制下一个动画帧时，那些设置才会生效。 |
|
|
|
|
|
