如何制作可编辑的事件

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>

那种东西？当您将其设置为S时，如何使上面的代码选择keyCode？

我希望它是这样的：

但是它会在选中并按下任意键时编辑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

@WilliamBrand，让我看看我是否理解。您正在制作游戏，并且希望使您的用户能够设置应将哪个键映射到哪个动作。

简而言之，不，您不能影响浏览器通过event.keyCode返回的值。 您可以创建一些适配器或装饰器来包装它，但这只会使您的生活复杂化。但是，您可以实现一个动作图，其中包含可以分配给该动作的键的值。

例如，将字母A映射为Left动作，将D映射为Right动作，依此类推。如果是这种情况，那么也许您应该考虑实施地图。因此，将是这样的：

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

现在，您负责确定keyMap [LEFT]将作为值保留。 您可以编写如下代码：

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

现在，您可以为用户提供一种将键重新分配给确定操作的方法。

让我知道我是否正确理解了这个主意，它是否可以帮助您找到解决问题的方法。

Answer 2

因此，如果我理解正确，您希望能够以自定义方式更改键映射，例如当游戏允许您将键设置为向上，向下，向左，向右移动时< / p>

您将需要一个例程，该例程显示某种类型的UI，等待（或获取）按键并将结果存储在某个地方，以供以后在代码中使用。
我将使用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>