如何处理主游戏循环中的按键事件？

Question

我正在用 JavaScript 编写一个简单的游戏，它已经像这样处理基本的键盘输入：

var input = {};
document.onkeydown = function(e) {
    input[e.keyCode] = true;
}
document.onkeyup = function(e) {
    input[e.keyCode] = false;
}

while (!done) {
    handleInput(input);
    update();
    render();
}

现在我需要游戏来处理组合键（例如 CTRL+X）。我希望它仅在keyup 上接受此类组合。

编辑：修饰键不需要与“主”键同时全部向上。 /编辑

我想到的两种可能的解决方案是：

• 公开包含keyup 事件列表的数组（带有“主”键和修饰符的对象）。 handleInput 函数将负责在每次轮询队列时清空队列
• 跟踪handleInput 中可能的组合键（注意按住的修饰键）并在“主”键上升时触发组合行为（我实际上不太喜欢这样）

您能建议我用一种优雅的方式来扩展当前功能吗？

Answer 1

试试这个 ;) 当您按下 CTRL + X 并释放其中一个（或两个）时，它会出现一条消息

var map = {17: false, 88: false};
var fire_event = false;

window.addEventListener('keydown', function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[17] && map[88]) {
            fire_event = true;
        }
    }
}, false);

window.addEventListener('keyup', function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
    if (fire_event) {
        fire_event = false;
        alert('YOU PRESSED CTRL + X');
    }
}, false);

Answer 2

您所要做的就是创建upInput 变量，您将在其中存储您的keyup 键。然后，要检查组合是否被按下，您必须检查是否只有CTRL + C（或17、67）变量中的组合，如果它们都是true。然后轻松打印您的消息并重置upInput 变量。

var input = upInput = {};

document.onkeydown = function(e) {
    input[e.keyCode] = true;
    if (JSON.stringify(Object.keys(upInput)) != '["17","67"]')
        upInput = {};
}
document.onkeyup = function(e) {
    var k = e.keyCode;
    input[k] = false;
    if ([17, 67].indexOf(k) > -1)
        upInput[k] = true;
    if (JSON.stringify(Object.keys(upInput)) == '["17","67"]'
            && upInput[17] && upInput[67]) // CTRL + C
        alert('YES!'),
        upInput = {};
}

Demo

希望有帮助！

Answer 3

我会采用以下方式之一：

• 检查 handleInput 部分中的组合（您的 第二种方法）
• 保留最后 X 个键盘事件的列表（其中 X 是最大值 组合序列的长度）并检查此列表是否匹配 任何预定义的组合触发器

Answer 4

试试看是否可行：

var KEY_QUEUE = [];
var KEYs = [17, 88];

document.onkeydown = function (e) {
    if (KEY_QUEUE.indexOf(e.keyCode) === -1) {
        KEY_QUEUE.push(e.keyCode);
    }
};

document.onkeyup = function (e) {
    var index = KEY_QUEUE.indexOf(e.keyCode);
    if ( isSubArray(KEYs, KEY_QUEUE) 
         && KEYs.indexOf(e.keyCode) > -1 ) {
        console.log("You press CTRL + X");
    }
    KEY_QUEUE.splice(index, 1);
};

function isSubArray(ary, targetAry) {
  return new RegExp(ary.toString()).test(targetAry.toString());
}

我检查了一些案例，例如Ctrl x、x Ctrl、Ctrl x a、Ctrl a x，它按我的预期工作。但我不确定它是否和你的想法一样。