KeyboardEvent: code-Eigenschaft

Die Code-Werte für Windows, Linux und macOS sind auf der Seite KeyboardEvent: Code-Werte aufgelistet.

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

Probieren Sie es aus

Um sicherzustellen, dass die Tastatureingaben in das Beispiel gelangen, klicken oder fokussieren Sie das Ausgabefeld unten, bevor Sie Tasten drücken.

Dieses Beispiel legt einen Ereignis-Listener für keydown-Ereignisse fest, der die Tastatureingabe für ein Spiel verarbeitet, das das typische "WASD"-Tastaturlayout für die Steuerung nach vorne, links, hinten und rechts verwendet. Dies verwendet dieselben vier physischen Tasten, unabhängig davon, was die tatsächlichen entsprechenden Zeichen sind, zum Beispiel wenn der Benutzer eine AZERTY-Tastatur 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

Der erste Abschnitt des JavaScript-Codes legt einige Variablen fest, die wir verwenden werden. shipSize enthält die Größe des Schiffs, das der Spieler bewegt, aus Gründen der Bequemlichkeit. position wird verwendet, um die Position des Schiffs innerhalb des Spielfelds zu verfolgen. moveRate ist die Anzahl der Pixel, die das Schiff bei jedem Tastenanschlag vorwärts und rückwärts bewegt, und turnRate ist, wie viele Rotationsgrade die linke und rechte Steuerung bei jedem Tastenanschlag anwenden. angle ist die aktuelle Menge an Rotation, die auf das Schiff in Grad angewendet wird; es beginnt bei 0° (zeigt gerade nach oben). Schließlich wird spaceship auf das Element mit der ID "spaceship" gesetzt, das das SVG-Polygon darstellt, das das vom Spieler gesteuerte Schiff repräsentiert.

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 kommt die Funktion updatePosition(). Diese Funktion nimmt als Eingabe die Entfernung, die das Schiff bewegt werden soll, wobei positiv eine Vorwärtsbewegung und negativ eine Rückwärtsbewegung ist. Diese Funktion berechnet die neue Position des Schiffs in Anbetracht der zurückgelegten Entfernung und der aktuellen Richtung, in die das Schiff zeigt. Sie behandelt auch die Sicherstellung, dass das Schiff über die Grenzen des Spielfelds hinaus wandert, anstatt 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 refresh()-Funktion kümmert sich um die Anwendung der Rotation und Position durch den Einsatz einer SVG-Transformation.

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

Schließlich wird die addEventListener()-Methode verwendet, um das Lauschen auf keydown-Ereignisse zu starten, wobei auf jede Taste durch Aktualisieren der Schiffsposition und des Rotationswinkels reagiert wird, und dann refresh() aufgerufen wird, um das Schiff an seiner neuen Position und im neuen Winkel zu zeichnen.

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

Probieren Sie es aus

Um sicherzustellen, dass die Tastatureingaben im Beispielcode ankommen, klicken oder fokussieren Sie das schwarze Spielfeld unten, bevor Sie Tasten drücken.

Es gibt mehrere Möglichkeiten, wie dieser Code verbessert werden kann. Die meisten echten Spiele würden auf keydown-Ereignisse achten, die Bewegung starten, wenn dies geschieht, und die Bewegung stoppen, wenn das entsprechende keyup auftritt, anstatt sich auf Tastenwiederholungen zu verlassen. Das würde sowohl eine flüssigere als auch schnellere Bewegung erlauben, aber auch ermöglichen, dass der Spieler sich gleichzeitig bewegt und steuert. Übergänge oder Animationen könnten ebenfalls verwendet werden, um die Bewegung des Schiffs flüssiger zu gestalten.