Javascript 游戏 GUI 的快捷键

Question

我一直在制作一个基于 javascript 的简单 OOP 文本游戏，该游戏使用字符串替换和与按钮 .onclick 事件相关的变量调整。我被要求添加热键以便于访问，但我一直在为如何去做而苦苦挣扎。

首先，我尝试使用 JSQuery 热键脚本和 .bind 命令，但这似乎非常耗时，因为我必须将每个 .onclick 重新编码为热键，即使取消绑定，它也是触发与脚本上的键相关的每个事件。

我觉得最好的方法是，如果我可以对 gui 键进行编码，即如果当您按下“1”时，它会激活按钮 1 的 .onclick，这样热键将是静态的（除非按钮被禁用），但我不知道该怎么做。我一直在使用 html 按钮，（即 input type="button" value="" disabled="disabled" id="button1"），我怀疑我需要一些东西更复杂？

在此先感谢您的帮助，google 没用。

[编辑 - 代码的一般描述]

游戏的运行方式非常简单，通过使用不同 text/buttons（以及与这些按钮相关的不同 onclick 事件）作为新事件调用函数。例如，启动屏幕代码为：

function startScreen() {
$(document).ready(function () {
$('#text').html("Game title and info");
$('#button1').val("Start Game");
$('#button1').attr("disabled", false);
$("#button1").one("click", function () {
textClear();
buttonClear();
nameScreen();
});

$("#button2").val("Load Game");
$('#button2').attr("disabled", false);
$("#button2").one("click", function () {
textClear();
buttonClear();  
loadData();
});

$("#button6").val("Settings");
$('#button6').attr("disabled", false);
$("#button6").one("click", function () {
textClear();
buttonClear();
settingsScreen();   
});
});
}

由于按钮 1 执行的代码在功能之间发生变化，热键的作用也是如此，这是我使用 JQuery 库代码的问题。

Answer 1

当按下一个键时，事件 onkeypress 被触发。此事件提供了一些值，例如：

keyCode
charCode
which

所以你可以这样做：

window.onkeypress = function (event) {
    // the keyCode value for the key 1 is 49, for the key 2 is 50
    if (event.keyCode == 49) {
        // execute the same code as clicking the button 1
        console.log("The key 1 was pressed.");
    } else if (event.keyCode == 50) {
        // execute the same code as clicking the button 2
        console.log("The key 2 was pressed.");
    }
};

现在，当用户访问您的网站时，他可以按下键盘上的键 1 或 2 并触发与单击按钮“1”和“2”相同的逻辑（类似于 <input id="button1">）用鼠标左键的味道。

如果你真的有很多热键，那么输入起来也会很乏味，但在不了解你的代码的情况下，我很难给你一个完整的解决方案。希望我的回答能给您一些思路。

编辑：

关于该主题的进一步阅读： http://unixpapa.com/js/key.html

Javascript 游戏 GUI 的快捷键

Shortcut keys for Javascript game GUI

javascript

jquery

hotkeys

button