js如何做到主动监测按键？

Question

由于js是事件驱动，原来键盘监测的时候我们是用onkeydown这种被动监测。但是我在写游戏的时候发现这种监测行为有点不流畅，可能是我写的问题。不过我想能否有种方式在每帧的执行的时候，主动去监测是否在这一帧按着一些按键？比如在我绑定了监听之后，我在动画执行30帧动画之后，为了不会继续再执行30帧动画我会重置上面那些数值，但造成的结果是，比如我先按着左（左移是一帧动画，上跳是30帧动画），过了会不放掉接着按上，只会上跳不会左上跳了。全部源码

Answer 1

JS可以主动监测吗？不可以。可以在按键时保存相应按键是否被按下的信号，并保证一个按键信号判断函数在执行队列常驻，用这种方式模拟“主动”。
按下和松开是一对成对的逻辑，如果只在按下的时候的改变变量，你按下左右键的先后顺序就会左右最终的方向。@XiNGRZ的思路的核心是正确的思路，将keyup和keydown都做绑定。
跟@XiNGRZ的思路稍微有些不同，我的方案里会为每个按键留下信号。这样才能对两个键同时按下的情形做处理，同时可以充分解耦。这个方案的两段，关注点分离，也易于扩展。
按键处理及信号保存：
varleft,right,up,down;
left=right=up=down=0;
document.addEventListener('keydown',function(evt){
switch(evt.which){
case37://left
left=1;
break;
case38://up
up=1;
break;
case39://right
right=1;
break;
case40://down
down=1;
break;
};
});
document.addEventListener('keyup',function(evt){
switch(evt.which){
case37://left
left=0;
break;
case38://up
up=0;
break;
case39://right
right=0;
break;
case40://down
down=0;
break;
};
});
刷新数值相关代码：
(functionrefresh(){
//下面是简化逻辑，跟一大堆ifelse判断是一样的
varhorizontal=left+""+right;
switch(horizontal){
case"01":
//右键的情形
//向右移动的代码
break;
case"10":
//左键的情形
//向左移动的代码
break;
default:break;
//同时按下左右按键，或者什么也不按，就什么也不做。
}
//判断上下按键
if(up){
//↑键的情形
}else{
//其他情况下，掉落的情形
}
//根据相应数值进行重绘，不赘叙了
repaint();
setTimeout(refresh,HEARTBEAT_INTERVAL);
//或requestAnimationFrame(refresh)
//rAF这个方法需要polyfill，需要的话我稍后补充
})();
                            

Answer 2

vardirection=0
document.addEventListener('keydown',function(evt){
switch(evt.which){
case37://left
direction=-1
break
case38://up
//jump
break
case39://right
direction=1
break
case40://down
//nothingtodo
break
})
document.addEventListener('keyup',function(evt){
if((evt.which==37&&direction<0)||
(evt.which==39&&direction>0)){
direction=0
}
})
这段代码只是说明一下思路，大致上是这个意思。
direction负数代表向左，正数代表向右，零代表留在原地。
按下【←】的时候会将direction赋值为-1，松开重置为0；【→】同理。
于是任何时候你就可以判断direction的值代表的方向了。