我有以下问题:
我正在尝试编写一个JavaScript游戏,并且该角色由箭头键控制。
问题是,当按住某个键时,在击发第一键和重复敲击之间会有短暂的延迟。
同样,当人们按下“向右箭头键”并保持按下状态,然后再按下“向上箭头键”时,角色不会移动到右上角,而是停止向右方向移动并开始向上移动。
这是我正在使用的代码:
<body onLoad="Load()" onKeyDown="Pressed(event)">
功能按下(e){
cxc = e.keyCode;
如果(cxc == 37)
移动(-1,0);
如果(cxc == 38)
Move(0,-1);
如果(cxc == 39)
移动(1,0);
如果(cxc == 40)
移动(0,1);
}
有人有想法吗?
最佳答案
如果要以可控制的方式重复键,则必须自己实现,因为触发按键事件取决于操作系统对键应如何重复的想法。这意味着可能会有可变的初始延迟和跟随延迟,并且一次按住两个键只会导致其中一个重复。
您必须保留每个按键是否当前被按下的记录,并且在按键已经按下时忽略keydown
事件。这是因为发生自动重复时,许多浏览器都会触发keydown
和keypress
事件,并且如果您要重复生成密钥,则需要自己取消。
例如:
// Keyboard input with customisable repeat (set to 0 for no key repeat)
//
function KeyboardController(keys, repeat) {
// Lookup of key codes to timer ID, or null for no repeat
//
var timers= {};
// When key is pressed and we don't already think it's pressed, call the
// key action callback and set a timer to generate another one after a delay
//
document.onkeydown= function(event) {
var key= (event || window.event).keyCode;
if (!(key in keys))
return true;
if (!(key in timers)) {
timers[key]= null;
keys[key]();
if (repeat!==0)
timers[key]= setInterval(keys[key], repeat);
}
return false;
};
// Cancel timeout and mark key as released on keyup
//
document.onkeyup= function(event) {
var key= (event || window.event).keyCode;
if (key in timers) {
if (timers[key]!==null)
clearInterval(timers[key]);
delete timers[key];
}
};
// When window is unfocused we may not get key events. To prevent this
// causing a key to 'get stuck down', cancel all held keys
//
window.onblur= function() {
for (key in timers)
if (timers[key]!==null)
clearInterval(timers[key]);
timers= {};
};
};
然后:
// Arrow key movement. Repeat key five times a second
//
KeyboardController({
37: function() { Move(-1, 0); },
38: function() { Move(0, -1); },
39: function() { Move(1, 0); },
40: function() { Move(0, 1); }
}, 200);
虽然,大多数基于 Action 的游戏都有固定时间的主框架循环,您可以将其用于向上/向下键处理。