Горячие клавиши для графического интерфейса игры Javascript

Я делаю простую текстовую игру OOP на основе javascript, в которой используется замена строк и корректировка переменных, привязанная к событиям кнопки .onclick. Меня попросили добавить горячие клавиши для более легкого доступа, и я не мог понять, как это сделать.

Сначала я попытался использовать сценарий горячих клавиш JSQuery и команду .bind, но мне показалось, что это займет очень много времени, так как мне придется перекодировать каждый .onclick как горячую клавишу, и даже с unbind он запускал каждое связанное событие. к ключу на скрипте.

Я чувствую, что лучший способ сделать это было бы, если бы я мог закодировать клавиши для графического интерфейса, т.е. если бы, когда вы нажали «1», он активировал .onclick кнопки 1, таким образом, горячая клавиша была бы статической (за исключением случаев, когда кнопка отключено), но я понятия не имею, как это сделать. Я только что использовал html-кнопки (например, input type="button" value="" disabled="disabled" id="button1"), я подозреваю, что мне нужно что-то более сложное?

Заранее спасибо за помощь, гугл бесполезен.

[EDIT - Общее описание кода]

Игра работает очень просто, через вызов функций как новых событий с другим текстом/кнопками (и разными событиями при нажатии, привязанными к этим кнопкам). Например, код начального экрана:

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();   
});
});
}

Поскольку код, выполняемый первой кнопкой, меняется между функциями, то, что делает горячая клавиша, была моей проблемой с использованием кода библиотеки JQuery.


javascript button jquery hotkeys
person Tydeusv    schedule 07.09.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

При нажатии клавиши запускается событие 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

person cezar    schedule 07.09.2015