Как сделать редактируемый event.keyCode

Question

function keydown(event) {
    if (event.keyCode == 65) { //key A
        thing1();
        setTimeout(thing1, speed);
        setTimeout(thing2, speed*2);
        setTimeout(thing2, speed*2);
        setTimeout(thing2, speed*2);
    }

Кто-нибудь знает, как сделать event.keyCode редактируемым?Например, вместо того, чтобы сказать, скажем, 65, вы можете сделать его редактируемым с помощью

<div id="s-keyn-split" class="setting-row">Split<span class="setting-option">
                    <div id="keybind-split" class="keybind-setting transitioning clickable">Space</div></span></div>

вещей?Как я могу заставить код выше выбрать keyCode, когда вы установите его, скажем, S?

Я бы хотел, чтобы это было что-то вроде этого:

но он редактирует значение keyCode, когда выбрано и нажата любая клавиша, вместо ввода буквы, а не номера keyCode.

РЕДАКТИРОВАТЬ: Это что-то вроде кодирования HTML как надстройки к странице, которую я делаюМакросы для игры, но если я опубликую их, мне нужно упростить их использование. Другими словами, мне нужна помощь с event.keyCode У меня есть код, который гласит:

if (event.keyCode == keycode number) {
Then the code of things to do when the key is pressed
}

Так что яМне было интересно, есть ли способ сделать event.keyCode == (here) редактируемым как var или что-то подобное.По сути, это нажатие кнопки, при нажатии которой вы можете ввести любую клавишу, и она отредактирует keyCode как номер keyCode и установит его в качестве макроса для действий.Я знаю, что это возможно каким-то образом, потому что сам сайт имеет макросы, которые вы можете редактировать таким образом, но с моим скриптом tampermonkey я не могу связать их с таким большим знанием, как у меня в HTML и JS.

Answer 1

Так что, если я правильно понимаю, вы хотите иметь возможность сопоставления клавиш, которое можно изменять по своему усмотрению, например, когда игра позволяет вам устанавливать клавиши для перемещения вверх, вниз, влево, вправо и т. Д.

Вам понадобится подпрограмма, которая показывает некоторый интерфейс, ждет (или получает) нажатие клавиши и сохраняет результат где-то, чтобы использовать позже в вашем коде.
Я бы использовал event.key, поскольку это даетВы фактический ключевой символ нажал.Если вы не хотите использовать это, рассмотрите KeyboardEvent.code для кода, но имейте в виду, что у него есть ограничения (см. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code).

. Я кратко описал, что вы могли бы сделать - этонемного хакерский и, вероятно, не самый элегантный способ сделать что-то (например, скрытое поле, чтобы получить нажатие клавиши = O), поэтому используйте его в качестве отправной точки - вам нужно будет его модульное и создать способ передачи новых настроек туда, где онинужны:

$("#readkeypress").on('keyup', function(e) {
  var keyset = e.key.replace(' ', 'Space');
  var setting = $("#setting").val();
  $("#setkey" + setting + "code").html(keyset);
  $("#theModal").modal('hide')
});

$('#theModal').on('show.bs.modal', function(e) {
  var theSetting = $(e.relatedTarget).attr("data-setting");
  $("#setting").val(theSetting);
  $(".modal-title").html("Press the key to set " + theSetting);
})

$('#theModal').on('shown.bs.modal', function() {
  $('#readkeypress').focus();
})

#customkeymappings {
  margin: 20px;
  padding: 10px;
  color: #fff;
  background-color: #414141;
  border-radius: 10px;
}

#customkeymappings div {
  margin-top: 10px;
  margin-bottom: 10px;
}

#customkeymappings label {
  display: inline-block;
  width: 90px;
}

.keybtn {
  cursor: pointer;
  font-size: 0.75em;
  width: 60px;
  height: 35px;
  padding: 5px;
  border: 0;
  color: #fff;
  background-color: #666666;
}

.maskedinput {
  position: absolute;
  width: 0px;
  border: 0;
}

.modal-header {
  border: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>
  Custom Key Mapping:
</h4>

<form id="customkeymappings">
  <div>
    <label>Left: </label><button type="button" class="keybtn" id="setkeyleftcode" data-toggle="modal" data-target="#theModal" data-setting="left">not set</button>
  </div>
  <div>
    <label>Right: </label><button type="button" class="keybtn" id="setkeyrightcode" data-toggle="modal" data-target="#theModal" data-setting="right">not set</button>
  </div>
</form>

<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h5 class="modal-title">Press the key to set</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <input id="readkeypress" class="maskedinput" value="" />
      <input id="setting" type="hidden" value="" />
    </div>
  </div>
</div>

Answer 2

@ WilliamBrand, дай мне посмотреть, пойму ли я.Вы создаете игру и хотите, чтобы ваши пользователи могли указать, какой ключ должен отображаться в соответствии с каким действием.

Короче говоря, вы не можете влиять на значения, которые браузер возвращает через event.keyCode.Вы можете создать какой-нибудь адаптер или декоратор, чтобы обернуть его вокруг, но это только усложнит вашу жизнь.Однако вы можете реализовать карту действий, которая будет содержать значение клавиши, которую вы можете назначить такому действию.

Например, сопоставьте букву А с действием слева, D с направлением действия и так далее.Если это так, то, возможно, вам следует подумать о реализации карты.Итак, это будет что-то вроде этого:

if (event.keyCode == keyMap[LEFT]){
...
}

Теперь вы решаете, что keyMap [LEFT] будет содержать значение.Вы можете написать код:

var userInputKey = ...;
...
    action = LEFT;
...
keyMap[action] = userInputKey;

Итак, теперь вы можете предоставить своему пользователю способ переназначения ключей для решающего действия.

Дайте мне знать, правильно ли я понял, и еслиЭта идея может помочь вам найти решение вашей проблемы.