Javascript : 当同时按下2个键时，离开其中一个也会影响另一个的听者

Question

我正在创建一个 webGL 游戏，使用 Three.js 库。我正在使用键盘箭头在 space 中创建移动。我想让用户通过同时按下左右箭头和上下箭头来同时旋转和移动。出于这个原因，我创建了一个地图来保存所有需要的键的状态。使用的代码如下：

var keyMap = [];
document.addEventListener("keydown", onDocumentKeyDown, true); 
document.addEventListener("keyup", onDocumentKeyUp, true);
function onDocumentKeyDown(event){ 
    var keyCode = event.keyCode;
    keyMap[keyCode] = true;
    executeMovement();
}
function onDocumentKeyUp(event){
    var keyCode = event.keyCode;
    keyMap[keyCode] = false;
    executeMovement();
}
function executeMovement(){
    var cameraNeck = cameraEquipment.getNeck();
    if(keyMap[37] == true){
        //rotate left
    }
    if(keyMap[39] == true){
        //rotate right
    }
    if(keyMap[38] == true){
        //move front
    }
    if(keyMap[40] == true){
        //move back
}

有效，意思是当用户同时按住2个键时，他同时移动和旋转。然而，它具有以下问题。例如，假设用户首先按下向上箭头，然后（没有离开），他按下向左箭头。如果他然后离开首先按下的按钮（向上箭头），一切都会按预期进行，并且用户会向左旋转。但是，如果用户最后一次按下按钮（向左箭头），则用户将停止移动和旋转两者。

似乎在按键序列中，一个按钮的 'keyUp' 事件会触发另一个按钮的 'keyUp'，或类似的事件。我尝试了很多不同的调试方法，并且开始考虑整个实现有问题的可能性。

Answer 1

正如我所想，保存键状态的地图的实现没有错误。这是成功的。问题出在函数 executeMovement() 上，它仅在 'keydown' 或 'keyup' 事件后被调用一次。所以，这就是为什么用户在仍然按下一个键的情况下停止移动的原因。

这个函数应该在浏览器更新框架时调用的函数内部调用。因此，固定代码如下：

var keyMap = [];
document.addEventListener("keydown", onDocumentKeyDown, true); 
document.addEventListener("keyup", onDocumentKeyUp, true);
function onDocumentKeyDown(event){ 
    var keyCode = event.keyCode;
    keyMap[keyCode] = true;
}
function onDocumentKeyUp(event){
    var keyCode = event.keyCode;
    keyMap[keyCode] = false;
}
function executeMovement(){
    \same code
}

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, cameraEquipment.getCamera());

    executeMovement()
};
render();

Javascript : 当同时按下2个键时，离开其中一个也会影响另一个的听者

Javascript : When having pressed 2 keys simultaneously down, leaving one of them influences the listener of the other too

javascript

three.js