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

Fakefish
  • 4.3k

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

全部源码

回复
阅读 5.7k
3 个回答
Humphry
  • 16.4k

JS可以主动监测吗?不可以。可以在按键时保存相应按键是否被按下的信号,并保证一个按键信号判断函数在执行队列常驻,用这种方式模拟“主动”。

按下和松开是一对成对的逻辑,如果只在按下的时候的改变变量,你按下左右键的先后顺序就会左右最终的方向。@XiNGRZ的思路的核心是正确的思路,将keyup和keydown都做绑定。

跟@XiNGRZ的思路稍微有些不同,我的方案里会为每个按键留下信号。这样才能对两个键同时按下的情形做处理,同时可以充分解耦。这个方案的两段,关注点分离,也易于扩展。

按键处理及信号保存:

var left , right , up , down ;

left = right = up = down = 0 ;

document.addEventListener('keydown', function (evt) {
  switch (evt.which) {
  case 37:  // left
    left = 1 ;
    break;
  case 38:  // up
    up = 1 ;
    break;
  case 39:  // right
    right = 1 ;
    break;
  case 40:  // down
    down = 1 ;
    break;
  };
});

document.addEventListener('keyup', function (evt) {
  switch (evt.which) {
  case 37:  // left
    left = 0 ;
    break;
  case 38:  // up
    up = 0 ;
    break;
  case 39:  // right
    right = 0 ;
    break;
  case 40:  // down
    down = 0 ;
    break;
  };
});

刷新数值相关代码:

(function refresh(){
    // 下面是简化逻辑,跟一大堆if else 判断是一样的
    var horizontal = left + "" + right ;
    switch( horizontal ) {
    case "01" :
      // 右键的情形
      // 向右移动的代码
      break;
    case "10" :
      // 左键的情形
      // 向左移动的代码
      break;
    default : break;
    // 同时按下左右按键,或者什么也不按,就什么也不做。
    }

    // 判断上下按键
    if( up ) {
      // ↑键的情形
    } else {
      // 其他情况下,掉落的情形
    }

    // 根据相应数值进行重绘,不赘叙了
    repaint() ;

    setTimeout(refresh,HEARTBEAT_INTERVAL);
    // 或requestAnimationFrame(refresh)
    // rAF这个方法需要polyfill,需要的话我稍后补充
})();
XiNGRZ
  • 1.1k
var direction = 0

document.addEventListener('keydown', function (evt) {
  switch (evt.which) {
    case 37:  // left
      direction = -1
      break
    case 38:  // up
      // jump
      break
    case 39:  // right
      direction = 1
      break
    case 40:  // down
      // nothing to do
      break
})

document.addEventListener('keyup', function (evt) {
  if ((evt.which == 37 && direction < 0) ||
      (evt.which == 39 && direction > 0)) {
    direction = 0
  }
})

这段代码只是说明一下思路,大致上是这个意思。

direction 负数代表向左,正数代表向右,零代表留在原地。

按下【←】的时候会将 direction 赋值为 -1,松开重置为 0;【→】同理。

于是任何时候你就可以判断 direction 的值代表的方向了。

不行,我从来没有看到过这种用法。这个就是本地游戏的好处。

宣传栏