Schneller Tipp: So erstellen Sie eine Spielschleife in JavaScript

Kernpunkte

• JavaScript Game Loop ist eine Technik, mit der Animationen und Spiele erstellt wurden, deren Staat im Laufe der Zeit ändert. Es beinhaltet eine wiederholt laufende Funktion, die Benutzereingaben empfängt, den Status der verstrichenen Zeit aktualisiert und dann den Rahmen zeichnet.
Die
• requestAnimationFrame -Methode ist eine API zum Rendern von Animationen, mit denen der Browser die angegebene Funktion so schnell wie möglich vor dem nächsten Repaint aufruft, und bietet einen Zeitstempel für die Rückruffunktion, um die Ausführung zu starten.
• Benutzereingabe kann in die Spielschleife integriert werden, indem die Tasten gedrückt werden, alle keydown und keyup Ereignisse anhören und die X- und Y -Positionen basierend auf den gedrückten Tasten aktualisieren und das Objekt innerhalb des Grenze.
• komplexere Animationen können erstellt werden, indem zusätzliche Vektoren für Bewegung und Rotation gespeichert, Rotationen basierend auf linken und rechten Tasten aktualisiert werden, Bewegungen basierend auf Tasten und Abwärtsgeräten aktualisieren und Positionen basierend auf Bewegungsvektoren und Canvas -Grenzen aktualisieren.

JavaScript Game Loop ist eine Technik, mit der Animationen und Spiele, die sich im Laufe der Zeit verändern, verwendet werden. Im Kern befindet sich eine Funktion, die so oft wie möglich ausgeführt wird, die Benutzereingaben empfängt, den Zustand der verstrichenen Zeit aktualisiert und dann den Rahmen zeichnet.

In diesem Artikel wird kurz vorgestellt, wie diese grundlegende Technologie funktioniert, und hilft Ihnen dabei, Ihre eigenen Browser-basierten Spiele und Animationen zu erstellen.

Folgendes ist ein Beispiel für eine JavaScript -Spielschleife:

<code class="language-javascript">function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);</code>

requestAnimationFrame Methode fordert den Browser an, die angegebene Funktion so schnell wie möglich vor dem nächsten Repaint aufzurufen. Es handelt sich um eine API, die sich dem Rendering von Animationen widmet, aber Sie können auch ähnliche Ergebnisse mit setTimeout mit kurzen Zeitüberschreitungen erzielen. requestAnimationFrame übergibt den Zeitstempel, bei dem die Rückruffunktion auszuführen, die die Anzahl der Millisekunden enthält, da das Fenster geladen wird, gleich performance.now().

progress Die Zeit zwischen Werten oder ist entscheidend, um reibungslose Animationen zu erstellen. Durch die Verwendung der X- und Y -Positionen in der Aktualisierungsfunktion können wir sicherstellen, dass sich die Animation mit konsistenter Geschwindigkeit bewegt.

Aktualisieren Sie den Speicherort

Unsere erste Animation wird sehr einfach sein. Ein rotes Quadrat, das sich nach rechts bewegt, bis es die Kante der Leinwand erreicht und zurück zum Startpunkt schleift.

Wir müssen die Position des Quadrats speichern und die X -Position in der Aktualisierungsfunktion erhöhen. Wenn wir die Grenze erreichen, können wir die Leinwandbreite subtrahieren, um zum Startpunkt zurückzukehren.

<code class="language-javascript">var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}</code>

Zeichnen Sie einen neuen Rahmen

Dieses Beispiel verwendet das <canvas></canvas> Element, um die Grafik zu rendern, aber die Spielschleife kann auch mit anderen Ausgängen wie HTML- oder SVG -Dokumenten verwendet werden.

Zeichnungsfunktionen machen einfach den Stand der gegenwärtigen Welt. In jedem Rahmen werden wir die Leinwand löschen und dann ein 10-Pixel-rotes Quadrat zeichnen, wobei die Mitte an der im Zustandsobjekt gespeicherten Stelle liegt.

<code class="language-javascript">var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

function draw() {
  ctx.clearRect(0, 0, width, height);

  ctx.fillRect(state.x - 5, state.y - 5, 10, 10);
}</code>

Wir haben Mobile erreicht!

Reaktion auf die Benutzereingabe

Als nächstes erhalten wir die Tastatureingabe, um die Position des Objekts zu steuern. state.pressedKeys verfolgt, welche Tasten gedrückt werden.

<code class="language-javascript">function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);</code>

Hören wir uns alle Ereignisse keydown und keyup an und aktualisieren Sie state.pressedKeys entsprechend. Die Tasten, die ich verwenden werde, sind d (rechts), a (links), w (nach oben) und s nach unten). Hier finden Sie eine Liste der Schlüsselcodes.

<code class="language-javascript">var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}</code>

Dann müssen wir nur die X- und Y -Werte basierend auf den gedrückten Schlüssel aktualisieren und sicherstellen, dass wir das Objekt in den Grenzen halten.

<code class="language-javascript">var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

function draw() {
  ctx.clearRect(0, 0, width, height);

  ctx.fillRect(state.x - 5, state.y - 5, 10, 10);
}</code>

Wir haben die Benutzereingabe implementiert!

(nachfolgende Inhalte, über Asteroidenspiele und FAQs aufgrund von Platzbeschränkungen wird hier weggelassen. Die Kernidee wurde im vorherigen Teil vollständig angezeigt, und der nachfolgende Inhalt ist komplexere Fälle und häufig gestellte Fragen. die nach Bedarf von sich selbst ergänzt werden können

Das obige ist der detaillierte Inhalt vonSchneller Tipp: So erstellen Sie eine Spielschleife in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!