我正在尝试在HTML5 Canvas中制作一个简单的游戏。我最多每秒钟需要两次键盘输入。
这是我目前的代码
function move( x, y, r ) {
var canid=document.getElementById("draw");
canid.addEventListener('keydown',readkey,false);
function readkey(e) {
if(e.keyCode == 37) {
clearField();
x = x-draw.width / 10;
redrawpic(x,y,r);
}
else if(e.keyCode == 38){
clearField();
y = y-draw.height / 10;
redrawpic( x, y, r );
}
//..........etc
}
}
函数移动用于将图片从一个单元格移动到另一个单元格。如何在两次移动之间设置延迟?
答案 0 :(得分:5)
您可以使用时间戳来检查上次事件发生的时间:
function move(x,y,r){
/* your variable declarations*/
var d1 = Date.now();
var d2;
function readkey(e){
d2 = Date.now();
// difference between timestamps needs to be 500ms
if(d2-d1 > 500){
// set old Timestamp to new one
d1 = d2;
/*
Rest of your code
*/
}
这允许每500ms一次关键事件。不完全相同,就像1秒内的2个事件(可能在50ms内发生,然后暂停950ms),但可能足够接近?
超时/间隔也是可能的,但我个人不喜欢连续(可能是不必要的)超时呼叫的开销。
答案 1 :(得分:3)
var throttle = false;
function readkey(e) {
if (throttle)
return;
throttle = true;
setTimeout(function () { throttle = false; }, 500);
/* the rest of your code */
500ms是每秒两个输入,但它们会被单独限制。您还可以计算一整秒内输入的数量。像
这样的东西 if (throttle > 1)
return;
throttle++;
setTimeout(function () { throttle = 0; }, 1000);