每秒限制为两个键盘输入

Question

我想在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
  }
}

函数移动用于将图片从一个单元格移动到另一个单元格.如何在两个动作之间设置延迟？

Answer 1

您可以使用时间戳来检查上次事件发生的时间:

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个事件(可能在50毫秒内发生,然后暂停950毫秒),但可能足够接近？

超时/间隔也是可能的,但我个人不喜欢连续(可能不必要的)超时调用的开销.