js用箭頭鍵移動對象（僅一次）

Question

嗨我已經從某些Internet模板中獲取代碼（用箭頭鍵移動對象）。從那以後，我限制了對象可以移動的區域，但是我仍然有一個問題，那就是當我按下箭頭鍵時，對象的移動超出了必要的範圍，我只是想將它移動到合適的方向上20px，無論如何長按鍵。

下面是功能：

var GameInput = (function() { 

var pressedKeys = {}; 

function setKey(event, status) { 
    var code = event.keyCode; 
    var key; 

    switch(code) { 
    case 32: 
     key = 'SPACE'; break; 
    case 37: 
     key = 'LEFT'; break; 
    case 38: 
     key = 'UP'; break; 
    case 39: 
     key = 'RIGHT'; break; 
    case 40: 
     key = 'DOWN'; break; 
    default: 
     // Convert ASCII codes to letters 
     key = String.fromCharCode(event.keyCode); 
    } 

    pressedKeys[key] = status; 
} 

document.addEventListener('keydown', function(e) { 
    setKey(e, true); 
}); 

document.addEventListener('keyup', function(e) { 
    setKey(e, false); 
}); 



function isDown(key) { 
    return pressedKeys[key]; 
} 

return { 
    isDown: isDown 
}; 

}）（）;

和函數調用它：

function update() { 


    if(GameInput.isDown('DOWN')) { 
     if(player.y < canvas.height - player.sizeY) { 
      player.y += 20; 
     } 
    } 

    if(GameInput.isDown('UP')) { 
     if(player.y > 0) { 
      player.y -= 20; 
     } 
    } 

    if(GameInput.isDown('LEFT')) { 
     if(player.x > 0) { 
      player.x -= 20; 
     } 
    } 

    if(GameInput.isDown('RIGHT')) { 
     // Don't go out of canvas 
     if(player.x < canvas.width - player.sizeX) { 
      player.x += 20; 
     } 
    } 

    // You can pass any letter to `isDown`, in addition to DOWN, 
    // UP, LEFT, RIGHT, and SPACE: 
    // if(GameInput.isDown('a')) { ... } 
} 

我明白爲什麼它做什麼它做，但我一直沒能進行修改，只移動20像素，無論一個關鍵多少時間按下。

謝謝

Answer 1

如何使用keyup事件，讓當按下新密鑰的操作只能重複。喜歡的東西：

var allowRepeat = true; 
document.addEventListener('keydown', function(e) { 
    if (allowRepeat) { 
    setKey(e, true); 
    } 
    allowRepeat = false; 
}); 

document.addEventListener('keyup', function(e) { 
    allowRepeat = true; 
    setKey(e, false); 
}); 

Answer 2

我覺得你的邏輯有點回歸了，你想要什麼是不允許更新「之前鍵了被解僱」，從您的代碼，只要不觸發KeyUp事件，isDown('XXX')是仍然如此..

所以這就是你需要：（你應該做一些重構，但這應該工作）

var GameInput = (function() { 
    .... 

    var _allowUpdate = {}; 

    function setKey(event, status) { 
     var code = event.keyCode; 
     var key; 

     switch(code) { 
      case 32: 
       key = 'SPACE'; break; 
      case 37: 
       key = 'LEFT'; break; 
      case 38: 
       key = 'UP'; break; 
      case 39: 
       key = 'RIGHT'; break; 
      case 40: 
       key = 'DOWN'; break; 
      default: 
       // Convert ASCII codes to letters 
       key = String.fromCharCode(event.keyCode); 
     } 
     // This checks whether it's the first time the key being pressed. 
     allowUpdate[key] = !pressedKeys[key] && status; 
     pressedKeys[key] = status; 

    } 

    function allowUpdate(key) { 
     _allowUpdate[key] ; 
    } 

    return { 
     allowUpdate: allowUpdate 
    }; 
} 

function update() { 

    if(GameInput.allowUpdate('DOWN')) { 
     if(player.y < canvas.height - player.sizeY) { 
      player.y += 20; 
     } 
    } 
    ..... 
}