Javascript游戏GUI的快捷键

Javascript游戏GUI的快捷键,javascript,jquery,button,hotkeys,Javascript,Jquery,Button,Hotkeys,我一直在制作一个简单的基于javascript的OOP文本游戏,它使用字符串替换和绑定到button.onclick事件的变量调整。我被要求添加热键以便更方便地访问,我一直在为如何做到这一点而挣扎 首先,我尝试使用JSQuery热键脚本和.bind命令,但这似乎非常耗时,因为我必须将每个.onclick重新编码为热键,即使使用unbind,它也会触发与脚本上的键相关的所有事件 我觉得最好的方法是,如果我能将按键编码到gui,即当你按下“1”时,它激活了按钮1的.onclick,这样热键就会是静态

我一直在制作一个简单的基于javascript的OOP文本游戏,它使用字符串替换和绑定到button.onclick事件的变量调整。我被要求添加热键以便更方便地访问,我一直在为如何做到这一点而挣扎

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

我觉得最好的方法是,如果我能将按键编码到gui,即当你按下“1”时,它激活了按钮1的.onclick,这样热键就会是静态的(按钮被禁用时除外),但我不知道怎么做。我刚刚使用了html按钮(即输入类型=“button”value=”“disabled=“disabled”id=“button1”),我怀疑我需要更复杂的东西

提前感谢你的帮助,谷歌已经没用了

[编辑-代码的一般说明]

游戏的工作方式非常简单,通过将函数调用为具有不同文本/按钮的新事件(以及绑定到这些按钮的不同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();   
});
});
}

由于button one执行的代码在函数之间会发生变化,热键的作用也会发生变化,这是我使用JQuery库代码时遇到的问题。

当按下一个键时,会触发事件
onkeypress
。此事件提供一些值,如:

  • keyCode
  • charCode
  • 哪个
所以你可以这样做:

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”(类似于
)相同的逻辑

如果你真的有很多热键,那么打字也会很乏味,但是如果不知道你的代码,我很难给你一个完整的解决方案。我希望我的回答能给你一些如何继续下去的想法

编辑:

关于该主题的进一步阅读: