Wie Hinzufügen Collisions zu Ihrem HTML5 Spiel

Die interessantesten Dinge in HTML5-Video-Spiele passieren, wenn Sprites Geist aufgeben und in miteinander kollidieren. Game-Engines haben in der Regel eine Art von Werkzeug zum Testen, ob zwei Sprites überlappen. Das nennt man Kollisionserkennung

, und es kann eine Anzahl von Arten erfolgen. Dieses Beispiel verwendet die Standard Begrenzungsrechteck Schema. Es ist nicht perfekt, aber es ist sehr einfach zu implementieren und häufig verwendet wird.

Wie Einrichten von Rechteck Kollisionen in Ihrem Spiel begrenzt

Werfen Sie einen Blick auf colTest.html und Sie werden ein einfaches Beispiel zu sehen.

In dem colTest.html Beispiel bewegt sich der Benutzer die lebewesen mit der Maus, und Sie werden eine Nachricht erhalten, wenn das Lebewesen die Box in der Mitte des Bildschirms berührt.

leer

Eine Reihe von interessanten Dinge geschehen in diesem Code:

1. Ausblenden der normalen Maus-Cursor.

   Wenn Sie ein anderes Objekt folgen der Maus haben werden, wollen Sie in der Regel den normalen Pfeil-Cursor zu verbergen. Im simpleGame, verwenden Sie die game.hideCursor () Verfahren Sie den Mauszeiger innerhalb des Spiels Bildschirm zu verstecken.

2. Erstellen Sie mehr als ein Sprite.

   Es dauert zwei bis Tango, oder kollidieren. In diesem Beispiel wird der Kasten stationär bleiben und ein Lebewesen, das die Maus folgt.

3. Geben Sie dem lebewesen ein followMouse () Verfahren.

   In diesem Beispiel haben Sie die lebewesen die Maus folgen. Beginnen Sie mit einer Schaffung followMouse () Verfahren.

4. Bestimmen Sie die Position der Maus.

   Die Mausposition wird bestimmt (in simpleGame.js) mit dem document.mouseX und document.mouseY Eigenschaften.

5. Kopieren Sie die Mausposition in die lebewesen Position.

   Verwenden Sie die x-Position des Maus die lebewesen die x-Position zu setzen, und wiederholen Sie mit y.

6. Rufen Sie den lebewesen des followMouse () jeder Frame-Methode.

   Wie üblich, die aktualisieren() Funktion ist, wo Sie Code zu setzen, die immer wieder passieren sollte.

Wenn Sie spielen, um mit der colTest.html Seite, werden Sie wahrscheinlich feststellen, dass die Kollisionen sind nicht exakt. Es ist möglich, eine Kollision Register zu haben, auch wenn die lebewesen tatsächlich die Box nicht zu berühren. Dies ist wichtig, weil simpleGame verwendet ein System mit der Bezeichnung Begrenzungsbox Kollisionen.

Das heißt, Sie sind nicht wirklich zu sehen, prüfen, ob die Bilder kollidieren aber, ob die Rechtecke um die Bilder kollidieren. In diesem Beispiel ist der Unterschied gering, aber Sie werden manchmal erhebliche Fehler mit diesem Mechanismus, vor allem mit Elementen sehen, die lang und dünn sind. Als ein Sprite dreht, kann die Größe des Begrenzungsrechtecks ​​ändern.

Die Entfernung basierte Kollisionen für Ihr Spiel

Eine alternative Form der Kollisionserkennung, genannt Begrenzungskreis Kollisionen, ist vorhanden. Mit diesem Mechanismus berechnen Sie einfach den Abstand zwischen der Mitte von zwei Sprites, und wenn dieser Wert kleiner als ein gewisser Schwellenwert, sollten Sie es zu einer Kollision. Dieser Ansatz hat zwei Vorteile:

• Die Kollisionsabstand ist konstant. Der Abstand zwischen den Bildzentren wird sich nicht ändern, wenn die Bilder gedreht werden, auch wenn die Bilder Größe ändern.

• Die Kollisionsschwelle kann variiert werden. Sie können jede Empfindlichkeit eingestellt Sie wollen. Stellen Sie eine große Kollisionsradius für die einfache Kollisionen und ein kleineres, wenn Sie Kollisionen wollen nur dann ausgelöst werden, wenn die Sprites einander sehr nahe sind.

Das simpleGame Bibliothek Elf Objekt hat eine DistanceTo () Verfahren, die den Abstand von einem Sprite zum anderen berechnet. Sie können ein Beispiel für diesen Code in das sehen distance.html Beispiel:

 
leer

Die abstandsbasierten Kollisionsverfahren ist sehr ähnlich zu dem Begrenzungsrechteck-Version. Ein ... kreieren checkDistance () Funktion, die genau wie die alte handeln checkCollisions (). Hier sind die Schritte für das, was in geschieht checkDistance:

1. Finden Sie den Abstand zwischen den beiden Sprites.

   Verwenden Sie die Sprites DistanceTo () Verfahren der Abstand zwischen den zwei Sprites zu bestimmen.

2. Wenn der Abstand als ein gewisser Schwellenwert geringer ist, zählen sie als Kollision.

   Generell sollten Sie die Breite des kleineren Sprite als Ausgangspunkt für eine Kollisionsschwelle verwenden, aber Sie können diese anpassen, um Kollisionen mehr oder weniger wahrscheinlich.

3. Bericht des Kollisionsstatus.

   In diesem Beispiel einfach gedruckt # 147-Kollision # 148- oder # 147-keine Kollision, # 148- aber in einem realen Spiel, Kollisionen sind Auslöser für andere Aktionen: Erhöhung der Punktzahl, die Anzahl der Leben abnimmt, die Geschwindigkeit oder die Position der kollidierten Elemente ändern, oder was auch immer. (Hoffentlich es sich um Explosionen.)