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:

function update(progress) {
  // 更新自上次渲染以來經(jīng)過時間的世界的狀態(tài)
}

function draw() {
  // 繪制世界的狀態(tài)
}

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

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

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.

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

Zeichnen Sie einen neuen Rahmen

Dieses Beispiel verwendet das <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.

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

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.

function update(progress) {
  // 更新自上次渲染以來經(jīng)過時間的世界的狀態(tài)
}

function draw() {
  // 繪制世界的狀態(tài)
}

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

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

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.

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

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.

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

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!