KeyboardEvent: code-Eigenschaft

Wert

Die code-Werte für Windows, Linux und macOS sind auf der Seite KeyboardEvent: code-Werte aufgeführt.

Beispiele

KeyboardEvent ausprobieren

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: "Helvetica", "Arial", 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);
});

Ausprobieren

Damit Ihre Tastendrücke beim Beispiel ankommen, klicken Sie vor dem Drücken der Tasten in das Ausgabefeld unten oder fokussieren Sie es.

Tastaturereignisse in einem Spiel verarbeiten

In diesem Beispiel wird ein Event-Listener für keydown-Ereignisse eingerichtet. Er verarbeitet die Tastatureingaben für ein Spiel, das die übliche „WASD“-Tastenanordnung zum Steuern nach vorn, links, hinten und rechts verwendet. Dabei werden unabhängig von den tatsächlich zugeordneten Zeichen dieselben vier physischen Tasten verwendet, beispielsweise auch dann, wenn der Benutzer eine Tastatur mit AZERTY-Layout verwendet.

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

Im ersten Abschnitt des JavaScript-Codes werden einige Variablen festgelegt, die wir verwenden werden. shipSize enthält der Einfachheit halber die Größe des Schiffs, das der Spieler bewegt. Mit position wird die Position des Schiffs innerhalb des Spielfelds verfolgt. moveRate gibt an, um wie viele Pixel jeder Tastendruck das Schiff vorwärts oder rückwärts bewegt, und turnRate gibt an, um wie viele Grad die Links- und Rechtssteuerung das Schiff pro Tastendruck dreht. angle ist der aktuelle Drehwinkel des Schiffs in Grad; er beginnt bei 0° (das Schiff zeigt gerade nach oben). Schließlich verweist spaceship auf das Element mit der ID "spaceship" – das SVG-Polygon, das das vom Spieler gesteuerte Schiff darstellt.

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");

Als Nächstes folgt die Funktion updatePosition(). Sie nimmt als Eingabe die Strecke entgegen, um die das Schiff bewegt werden soll. Ein positiver Wert bedeutet eine Bewegung vorwärts, ein negativer Wert eine Bewegung rückwärts. Die Funktion berechnet die neue Position des Schiffs anhand dieser Strecke und seiner aktuellen Ausrichtung. Sie sorgt außerdem dafür, dass das Schiff beim Überschreiten einer Spielfeldgrenze auf der gegenüberliegenden Seite wieder erscheint, statt zu verschwinden.

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

Die Funktion refresh() wendet Drehung und Position mithilfe einer SVG-Transformation an.

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

Zum Schluss wird mit der Methode addEventListener() ein Listener für keydown-Ereignisse eingerichtet. Bei jedem entsprechenden Tastendruck aktualisiert er die Position und den Drehwinkel des Schiffs und ruft anschließend refresh() auf, um das Schiff an seiner neuen Position und mit seiner neuen Ausrichtung darzustellen.

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

Ausprobieren

Damit Ihre Tastendrücke beim Beispielcode ankommen, klicken Sie vor dem Drücken der Tasten in das schwarze Spielfeld unten oder fokussieren Sie es.

Dieser Code lässt sich auf verschiedene Weise verbessern. Die meisten Spiele würden auf keydown-Ereignisse reagieren, die Bewegung bei einem solchen Ereignis beginnen und sie beim entsprechenden keyup-Ereignis beenden, statt sich auf wiederholte Tastaturereignisse zu verlassen. Das würde eine flüssigere und schnellere Bewegung ermöglichen und es dem Spieler außerdem erlauben, sich gleichzeitig zu bewegen und zu lenken. Auch mit Übergängen oder Animationen ließe sich die Bewegung des Schiffs flüssiger gestalten.

Spezifikationen

Browser-Kompatibilität