Wie Grenzen in Ihrem HTML5-Spiel überprüft werden - Dummies

Sobald die Sprites anfangen sich zu bewegen, besteht immer die Möglichkeit, dass sie die Grenzen des Bildschirms verlassen. In der Regel reagieren HTML5-Spieleentwickler auf eine von fünf Arten: "wrap", "bounce", "stop", "stirb" oder "continue". Die Bibliothek "simpleGame" verfügt über eine Routine zur Prüfung der Begrenzungen, mit der Sie angeben können, welches Standardverhalten verwendet werden soll. Die Eigenschaft boundAction des Sprites gibt an, welche Aktion verwendet werden soll. Sie können den Begrenzungsprüfer verwenden, um Folgendes auszuführen:

1. Bestimmen Sie die Grenzen.

   Die Grenzen werden durch die Leinwandbreite bestimmt.

2. Überprüfen Sie, ob der Benutzer nicht an der Grenze ist.

   Dann wurde eine weitere Reihe von Variablen erstellt, die boolesche Werte enthalten, die angeben, ob das Sprite an einer der Grenzen angelangt ist: offRight, offLeft, offTop und offBottom. Verwenden Sie grundlegende if-Anweisungen, um zu bestimmen, ob das Sprite auf eine der folgenden Arten außerhalb des Bildschirms ist.

3. Bestimmen Sie die Begrenzungsaktion.

   Verwenden Sie eine einfache if-Anweisung, um zu ermitteln, welche Begrenzungsaktion derzeit für das Sprite festgelegt ist.

4. Wenn die boundAction WRAP ist:

   Ändern Sie die Variable x oder y auf die entgegengesetzte Seite, aber lassen Sie die Werte dx und dy in Ruhe.

5. Wenn die boundAction BOUNCE ist:

   Drehe dy um, wenn das Sprite von oben oder unten abprallte, und dx, wenn das Sprite von links oder rechts abprallte. Es ist nicht notwendig, x oder y direkt zu ändern.

6. Wenn boundAction ist STOP:

   Stellen Sie die Geschwindigkeit einfach auf Null, unabhängig davon, welche Grenze verlassen wurde.

7. Wenn boundAction ist: DIE: setze die Geschwindigkeit auf Null und rufe die hide () -Methode des Sprites auf. Dadurch verschwindet das Sprite und wird bei Kollisionsberechnungen nicht mehr berücksichtigt.

   Jede andere boundAction wird als CONTINUE angesehen.

8. Hier ist keine Aktion erforderlich, da sich das Sprite weiter bewegt, obwohl es nicht sichtbar ist. Wenn dies der gewünschte Effekt ist, sollten Sie dem Benutzer irgendwie anzeigen, wo sich das Sprite befindet, oder dem Sprite eine Möglichkeit geben, zurückzukehren.

   Hier ist ein Teil des Codes für die Kollisionsprüfroutine:

offRight = false; offLeft = falsch; offTop = falsch; offBottom = falsch; if (this. x> rightBorder) {offRight = true;} if (dies. x bottomBorder) {offBottom = true;} if (dies. y <0) {offTop = true;} wenn (this. boundAction == WRAP) {if (offRight) {dies. x = leftBorder;} // end falls if (offBottom) {this. y = topBorder;} // end falls if (offLeft) {this. x = rightBorder;} // end wenn if (offTop) {this. y = bottomBorder;}} else if (this. boundAction == BOUNCE) {if (offTop || offBottom) {this.dy * = -1; Dies. calcSpeedAngle (); Dies. imgAngle = dies. moveAngle;} if (offLeft || offRight) {this. dx * = -1; Dies. calcSpeedAngle (); Dies. imgAngle = dies. moveAngle;}} else if (this. boundAction == STOP) {if (offLeft || offRight || offTop || offBottom) {this. setSpeed ​​(0);}} else if (this. boundAction == STERNE) {if (offLeft || offRight || offTop || offBottom) {this. verbergen(); Dies. setSpeed ​​(0);}} else {// weiter für immer}} // end checkbounds

Wenn Sie die Begrenzungsaktion eines Sprites in simpleGame ändern möchten, können Sie dazu die Methode setBoundAction () verwenden.

Beachten Sie, dass einige Situationen unterschiedliche Verhaltensweisen erfordern können. Zum Beispiel können Sie die Seiten umwickeln, aber oben oder unten anhalten. Wenn Sie ein spezifischeres Verhalten benötigen, erstellen Sie einfach eine neue checkBounds () -Methode für Ihr Sprite. Sie müssen jedoch alle Grenzen überprüfen, da Ihre neuen checkBounds () die in simpleGame integrierte vollständig überschreiben.