Question

我正在使用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
}

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

似乎在按键序列中，＆＃39; keyUp＆＃39;一个按钮触发＆＃39; keyUp＆＃39;对于另一个，或类似的东西。我已经尝试了许多不同的调试方法，我已经开始考虑整个实现存在问题的可能性。

Answer 1

正如我所想的那样，在执行保存密钥状态的地图时没有错误。这是成功的。问题在于函数executeMovement()，它只在“keydown＆＃39;之后”调用过一次。或者＆＃39; keyup＆＃39;事件。因此，这就是用户停止移动仍然按下一个键的原因。

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

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个键时，其中一个也会影响另一个的听众

1 个答案: