Javascript:当同时按下两个键时，留下其中一个也会影响另一个的听众

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

本文关键字：一个 影响 另一个 两个 Javascript      更新时间：2023-09-26

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

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
}

它是有效的，这意味着当用户同时按下两个键时，他会同时移动和旋转。但是，它存在以下问题。例如，假设用户首先按下向上箭头，然后（不离开）按下向左箭头。如果他离开了第一个按下的按钮（向上箭头），一切都按预期进行，用户向左旋转。但是，如果用户最后按下按钮（向左箭头），则用户将停止移动和旋转这两个按钮。

似乎在按键的顺序中，一个按钮的"keyUp"事件会触发另一个的"keyUp"，或者类似的事情。我尝试了许多不同的调试方法，并开始考虑整个实现是否存在问题。

正如我所认为的，在保存键状态的映射的实现中没有错误。这是成功的工作。问题出在函数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();
相关文章：