KeyboardEvent: свойство code

Свойство KeyboardEvent.code представляет собой физическую клавишу на клавиатуре (в отличие от символа, генерируемого нажатием клавиши). Другими словами, это свойство возвращает значение, которое не изменяется раскладкой клавиатуры или состоянием модификаторных клавиш.

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

Это свойство полезно, когда вы хотите обрабатывать клавиши на основе их физического расположения на устройстве ввода, а не символов, связанных с этими клавишами; это особенно распространено при написании кода для обработки ввода в игры, которые имитируют среду джойстика, используя клавиши на клавиатуре. Однако следует помнить, что вы не можете использовать значение, возвращаемое KeyboardEvent.code, для определения символа, генерируемого нажатием клавиши, потому что имя кода клавиши может не совпадать с фактическим символом, напечатанным на клавише, или с символом, генерируемым компьютером при нажатии клавиши.

Например, возвращаемое значение code равно "KeyQ" для клавиши Q на клавиатуре с раскладкой QWERTY, но то же самое значение code также представляет клавишу ' на клавиатурах Dvorak и клавишу A на клавиатурах AZERTY. Это делает невозможным использование значения code для определения имени клавиши для пользователей, если они не используют ожидаемую раскладку клавиатуры.

Чтобы определить, какой символ соответствует событию нажатия клавиши, используйте свойство KeyboardEvent.key вместо этого.

Значения кодов для Windows, Linux и macOS перечислены на странице KeyboardEvent: значения кодов.

HTML

<p>
  Press keys on the keyboard to see what the KeyboardEvent's key and code values
  are for each one.
</p>
<div id="output" tabindex="0"></div>

CSS

#output {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid black;
  width: 95%;
  margin: auto;
}
#output:focus-visible {
  outline: 3px solid dodgerblue;
}

JavaScript

window.addEventListener(
  "keydown",
  (event) => {
    const p = document.createElement("p");
    p.textContent = `KeyboardEvent: key='${event.key}' | code='${event.code}'`;
    document.getElementById("output").appendChild(p);
    window.scrollTo(0, document.body.scrollHeight);
  },
  true,
);

Попробуйте

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

В этом примере создается обработчик событий keydown, который обрабатывает ввод с клавиатуры для игры, использующей стандартную раскладку клавиатуры "WASD" для управления перемещением вперед, влево, назад и вправо. Будут использоваться те же четыре клавиши независимо от фактических соответствующих символов, например, если пользователь использует клавиатуру AZERTY.

HTML

<p>Use the WASD (ZQSD on AZERTY) keys to move and steer.</p>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  class="world"
  tabindex="0">
  <polygon id="spaceship" points="15,0 0,30 30,30" />
</svg>

CSS

.world {
  margin: 0px;
  padding: 0px;
  background-color: black;
  width: 400px;
  height: 400px;
}
.world:focus-visible {
  outline: 5px solid dodgerblue;
}
#spaceship {
  fill: orange;
  stroke: red;
  stroke-width: 2px;
}

JavaScript

Первая часть кода JavaScript устанавливает несколько переменных, которые мы будем использовать. shipSize содержит размер корабля, которым управляет игрок, для удобства. position используется для отслеживания положения корабля на игровом поле. moveRate — это количество пикселей, на которое корабль перемещается вперед и назад при каждом нажатии клавиши, а turnRate — это количество градусов поворота, которое применяют левые и правые управляющие элементы при каждом нажатии клавиши. angle — это текущее значение поворота корабля в градусах; оно начинается с 0° (направлено строго вверх). Наконец, spaceship устанавливается для ссылки на элемент с ID "spaceship", который представляет собой многоугольник SVG, представляющий корабль, которым управляет игрок.

let shipSize = {
  width: 30,
  height: 30,
};

let position = {
  x: 200,
  y: 200,
};

let moveRate = 9;
let turnRate = 5;

let angle = 0;

let spaceship = document.getElementById("spaceship");

Далее идет функция updatePosition(). Эта функция принимает на вход расстояние, на которое должен сместиться корабль, где положительное значение соответствует движению вперед, а отрицательное — движению назад. Эта функция вычисляет новое положение корабля с учетом пройденного расстояния и текущего направления корабля. Она также обрабатывает обеспечение обхода границ игрового поля вместо исчезновения корабля.

function updatePosition(offset) {
  let rad = angle * (Math.PI / 180);
  position.x += Math.sin(rad) * offset;
  position.y -= Math.cos(rad) * offset;

  if (position.x < 0) {
    position.x = 399;
  } else if (position.x > 399) {
    position.x = 0;
  }

  if (position.y < 0) {
    position.y = 399;
  } else if (position.y > 399) {
    position.y = 0;
  }
}

Функция refresh() обрабатывает применение поворота и положения с помощью SVG преобразования.

function refresh() {
  let x = position.x - shipSize.width / 2;
  let y = position.y - shipSize.height / 2;
  let transform = `translate(${x} ${y}) rotate(${angle} 15 15) `;

  spaceship.setAttribute("transform", transform);
}
refresh();

Наконец, метод addEventListener() используется для начала прослушивания событий keydown, реагируя на каждую клавишу путем обновления положения и угла поворота корабля, а затем вызывая refresh() для отображения корабля в его новом положении и угле.

window.addEventListener(
  "keydown",
  (event) => {
    if (event.defaultPrevented) {
      return; // Do nothing if event already handled
    }

    switch (event.code) {
      case "KeyS":
      case "ArrowDown":
        // Handle "back"
        updatePosition(-moveRate);
        break;
      case "KeyW":
      case "ArrowUp":
        // Handle "forward"
        updatePosition(moveRate);
        break;
      case "KeyA":
      case "ArrowLeft":
        // Handle "turn left"
        angle -= turnRate;
        break;
      case "KeyD":
      case "ArrowRight":
        // Handle "turn right"
        angle += turnRate;
        break;
    }

    refresh();

    if (event.code !== "Tab") {
      // Consume the event so it doesn't get handled twice,
      // as long as the user isn't trying to move focus away
      event.preventDefault();
    }
  },
  true,
);

Попробуйте

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

Существует несколько способов улучшить этот код. Большинство реальных игр отслеживают события keydown, запускают движение при этом и останавливают движение, когда происходит соответствующее событие keyup, вместо того, чтобы полагаться на повторение нажатия клавиши. Это позволит как более плавному, так и более быстрому перемещению, но также позволит игроку одновременно перемещаться и управлять поворотом. Для повышения плавности перемещения корабля также можно использовать переходы или анимации.