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