Wie man Kollisionen zu Ihrem HTML5-Spiel hinzufügt - Dummies

Die interessantesten Dinge in HTML5 Videospielen passieren, wenn Sprites kollidieren und ineinander kollidieren. Game-Engines verfügen normalerweise über ein Tool zum Testen, ob zwei Sprites überlappen. Dies wird Kollisionserkennung genannt und kann auf verschiedene Arten durchgeführt werden. In diesem Beispiel wird das Standard -Begrenzungsrechteck verwendet. Es ist nicht perfekt, aber es ist sehr einfach zu implementieren und wird häufig verwendet.

Wie Sie in Ihrem Spiel Bounding-Rechteck-Kollisionen einrichten

Sehen Sie sich colTest an. html und du wirst ein einfaches Beispiel sehen.

Im Farbtest. Beispiel: Der Benutzer bewegt das Tier mit der Maus und Sie erhalten eine Nachricht, wenn das Tier die Box in der Mitte des Bildschirms berührt.

colTest. html checkCollisions (); Feld. aktualisieren(); Lebewesen. update ();} // Aktualisierung beenden; function checkCollisions () { if (Box. Kollidiert Mit (critter)) { Ausgabe. innerHTML = "Kollision"; } else { Ausgabe. innerHTML = "Keine Kollision"; } // end if } // end checkCollisions leer

In diesem Code passiert eine Reihe interessanter Dinge:

1. Blenden Sie den normalen Mauszeiger aus.

   Wenn Sie ein anderes Objekt haben möchten, folgen Sie der Maus. Normalerweise möchten Sie den normalen Pfeilcursor ausblenden. Verwende das Spiel in simpleGame. hideCursor () -Methode, um den Mauszeiger im Spielbildschirm auszublenden.

2. Erstelle mehr als ein Sprite.

   Es dauert zwei zum Tango oder kollidieren. In diesem Beispiel bleibt die Box stationär und ein Critter folgt der Maus.

3. Geben Sie dem critter eine followMouse () Methode.

   In diesem Beispiel lässt du das Critter der Maus folgen. Beginnen Sie mit der Erstellung einer followMouse () -Methode.

4. Bestimmen Sie die Position der Maus.

   Die Mausposition wird mit dem Dokument festgelegt (in simpleGame. Js). MausX und Dokument. mouseY-Eigenschaften.

5. Kopieren Sie die Mausposition in die Critter-Position.

   Verwenden Sie die x-Position der Maus, um die x-Position des Critters festzulegen, und wiederholen Sie mit y.

6. Rufen Sie in jedem Frame die Methode followMouse () des Critters auf.

   Wie üblich ist die Funktion update (), wo Sie Code setzen, der wiederholt passieren sollte.

Wenn Sie mit dem colTest herumspielen. HTML-Seite, werden Sie wahrscheinlich feststellen, dass die Kollisionen nicht genau sind. Es ist möglich, ein Kollisionsregister zu haben, selbst wenn das Tier die Box nicht berührt. Dies ist wichtig, weil simpleGame ein Schema namens Bounding Box Collisions verwendet.

Das bedeutet, dass Sie nicht prüfen, ob die Bilder kollidieren, sondern ob die Rechtecke um die Bilder herum kollidieren. In diesem Beispiel ist der Unterschied geringfügig, aber manchmal treten bei diesem Mechanismus erhebliche Fehler auf, insbesondere bei langen und dünnen Elementen. Wenn sich ein Sprite dreht, kann sich die Größe des umgebenden Rechtecks ​​ändern.

Distanzbasierte Kollisionen für Ihr Spiel

Es steht eine alternative Form der Kollisionserkennung zur Verfügung, genannt Begrenzungskreis -Kollisionen. Mit diesem Mechanismus berechnen Sie einfach den Abstand zwischen der Mitte zweier Sprites, und wenn dieser Wert kleiner als ein Schwellenwert ist, betrachten Sie dies als Kollision. Dieser Ansatz hat zwei Vorteile:

• Die Kollisionsdistanz ist konstant. Der Abstand zwischen den Bildmitten ändert sich nicht, wenn Bilder gedreht werden, auch wenn die Bilder ihre Größe ändern.

• Die Kollisionsschwelle kann variiert werden. Sie können eine beliebige Empfindlichkeit einstellen. Legen Sie einen großen Kollisionsradius für leichte Kollisionen und einen kleineren Kollisionsradius fest, wenn Kollisionen nur ausgelöst werden sollen, wenn die Sprites sehr nahe beieinander liegen.

Das Sprite-Objekt der simpleGame-Bibliothek hat eine distanceTo () -Methode, die die Entfernung von einem Sprite zum anderen berechnet. Sie können ein Beispiel dieses Codes in der Entfernung sehen. html Beispiel:

Entfernung. html var Spiel; var Box; Var-Lebewesen; var Ausgang; function init () {game = neue Szene (); Spiel. hideCursor (); box = neuer Sprite (Spiel, "simpleBox. png", 50, 50); critter = neues Sprite (Spiel, "critter. gif", 50, 50); Ausgabe = Dokument. getElementById ("Ausgabe"); // gib Box fixes Positionsfeld. setPosition (200, 150); Box. setSpeed ​​(0); Lebewesen. setPosition (100, 100); Lebewesen. setSpeed ​​(0); // Lebewesen durch Mauslebewesen gesteuert. followMouse = Funktion () {this. setX (Dokument. mouseX); Dies. setY (document. mouseY);} / end followMouse-Spiel. start ();} // end init Funktion update () {Spiel. klar(); Lebewesen. followMouse (); checkDistance (); Feld. aktualisieren(); Lebewesen. update ();} // Aktualisierung beenden; Funktion checkDistance () { dist = Feld. distanceTo (Lebewesen); if (dist <50) { Ausgabe. innerHTML = "Kollision:" + dist; } else { Ausgabe. innerHTML = "Keine Kollision:" + dist; } // end if } // end checkDistance leer

Die entfernungsbasierte Kollisionsmethode ist der Version des Begrenzungsrechtecks ​​sehr ähnlich. Erstellen Sie eine checkDistance () - Funktion, die genau wie die alte checkCollisions () funktioniert. Hier sind die Schritte für das, was in checkDistance passiert:

1. Finde den Abstand zwischen den beiden Sprites.

   Verwenden Sie die distanceTo () -Methode des Sprites, um die Entfernung zwischen den beiden Sprites zu bestimmen.

2. Wenn der Abstand kleiner als ein Schwellenwert ist, zählen Sie ihn als Kollision.

   Im Allgemeinen sollten Sie die Breite des kleineren Sprites als Ausgangspunkt für eine Kollisionsschwelle verwenden, aber Sie können dies anpassen, um Kollisionen mehr oder weniger wahrscheinlich zu machen.

3. Melden Sie den Kollisionsstatus.

   In diesem Beispiel drucken Sie einfach "Kollision" oder "keine Kollision", aber in einem realen Spiel sind Kollisionen Auslöser für andere Aktionen: Erhöhung der Punktzahl, Verringerung der Anzahl der Leben, Änderung der Geschwindigkeit oder Position der kollidierten Elemente, oder Wasauchimmer. (Hoffentlich handelt es sich um Explosionen.)