轻量级JavaScript键盘配置图

Question

我正在尝试为用户提供一种方法来为我正在开发的 JavaScript 游戏映射自定义键。我想我只是在这里遗漏了一些简单的东西，因为我看不到如何在不循环遍历每个键值的情况下完成这项工作（我想避免这种情况，因为我不想在提供灵活性的同时引入任何不必要的循环）。

基本上，有一个全局数组 keys 跟踪已按下的键，以便轻松地同时处理多个按键。

// keyboard lookup
// map movement keys to WASD, VI keys, and arrow keys
let keyboardConfig = {
  'left': [37, 72, 65],
  'right': [39, 76, 68],
  'up': [38, 75, 87],
  'down': [40, 74, 83],
  'upleft': [89],
  'upright': [85],
  'downleft': [66],
  'downright': [78]
}

和键盘处理程序：

// handle keyboard
let keys;
function handleKeys(e) {
  keys = (keys || []);
  keys[e.keyCode] = true;

  let dirX = 0;
  let dirY = 0;
  let updateViz = false;

  // TBD: replace keys[37] (etc.) with a more intelligent approach
  if (keys[37]) { // left
    dirX = -1;
    updateViz = true;
  }
  if (keys[38]) { // up
    dirY = -1;
    updateViz = true;
  }
  if (keys[39]) { // right
    dirX = 1;
    updateViz = true;
  }
  if (keys[40]) { // down
    dirY = 1;
    updateViz = true;
  }

  if (updateViz) {
    player.move(dirX, dirY);
    camera.update();
  }
}

基本上，我想避免对 keyboardConfig.left 中定义的每个 keyCode 执行类似 forEach 的操作。另一方面，我需要避免做类似 if keys[keyboardConfig.left[0]] || keys[keyboardConfig.left[1]] || keys[keyboardConfig.left[2]] 的事情，因为这显然不是很可扩展。

Answer 1

这是一般的想法，如果有需要检查的条件，您几乎总是希望地图定义它要做什么，然后将这些地图作为指令实现 - 这是一个开始：

document.onkeyup = handleKeys;
let elExample = document.getElementById("example");
// keyboard lookup
// map movement keys to WASD, VI keys, and arrow keys
let keyboardConfig = {
  'left': [37, 72, 65],
  'right': [39, 76, 68],
  'up': [38, 75, 87],
  'down': [40, 74, 83],
  'upleft': [89],
  'upright': [85],
  'downleft': [66],
  'downright': [78]
}
let movement = {
  'left': -1,
  'right': 1,
  'up': -1,
  'down': 1
}
let keyConfig = {};
for(let item in keyboardConfig){
    for(let i in keyboardConfig[item]){
        keyConfig[keyboardConfig[item][i]] = item;
    }
}

// handle keyboard
let keys;
function handleKeys(e) {
console.log(e.keyCode)
  keys = (keys || []);
  keys[e.keyCode] = true;
  
  if (keyConfig[e.keyCode]) {
      console.log(keyConfig[e.keyCode], movement[keyConfig[e.keyCode]]);
      elExample.innerHTML = keyConfig[e.keyCode] + " " + movement[keyConfig[e.keyCode]];
      
      //player.move(movement[keyConfig[e.keyCode]] || 0, movement[keyConfig[e.keyCode]] || 0);
      //camera.update();
  }else{
    elExample.innerHTML = "Not a tracked key";
  }

}

<h4 id="example">type some stuff</h4>

轻量级JavaScript键盘配置图

Lightweight JavaScript keyboard configuration map

javascript

keyboard-events