Controleren hoe grenzen in uw HTML5-spel kunnen worden gecontroleerd - dummies

Zodra sprites beginnen te bewegen, is er altijd de mogelijkheid dat ze de grenzen van het scherm verlaten. Doorgaans reageren HTML5-ontwikkelaars op een van de vijf manieren: wikkelen, stuiteren, stoppen, sterven of doorgaan. De simpleGame-bibliotheek heeft een grenscontroleroutine waarmee u kunt aangeven welk van deze standaardgedragingen u moet gebruiken. De eigenschap boundAction van de sprite geeft aan welke actie moet worden gebruikt. U kunt de grenscontrole gebruiken om het volgende te doen:

1. Bepaal de randen.

   De randen worden bepaald door de breedte van het canvas.

2. Controleer of de gebruiker van een rand af is.

   Vervolgens is een andere reeks variabelen gemaakt die Booleaanse waarden bevatten die aangeven of de sprite zich buiten een van de grenzen bevindt: offRight, offLeft, offTop en offBottom. Gebruik standaard if-instructies om te bepalen of de sprite op een van deze manieren buiten het scherm valt.

3. Bepaal de grensactie.

   Gebruik een eenvoudige if-instructie om te bepalen welke grensactie momenteel is ingesteld voor de sprite.

4. Als de boundAction WRAP is:

   Wijzig de x- of y-variabele naar de andere kant, maar laat de dx- en dy-waarden alleen.

5. Als de boundAction BOUNCE is:

   Invert dy als de sprite van de boven- of onderkant is teruggekaatst en dx als de sprite van links of rechts is teruggekaatst. Het is niet nodig om x of y rechtstreeks te wijzigen.

6. Als boundAction STOP:

   Stel eenvoudig de snelheid in op nul, ongeacht welke grens werd verlaten.

7. Als boundAction STERFT:

   Stel de snelheid in op nul en activeer de methode hide () van de sprite. Hierdoor zal de sprite verdwijnen en niet langer worden beschouwd in botsingsberekeningen.

8. Elke andere boundAction wordt als CONTINUE beschouwd.

   Er is hier geen actie nodig omdat de sprite blijft bewegen, ook al is deze niet zichtbaar. Als dit het gewenste effect is, moet u op de een of andere manier aangeven aan de gebruiker waar de sprite is, of een manier bieden voor de sprite om terug te keren.

Hier is een deel van de code voor de routine voor het controleren van botsingen:

offRight = false; offLeft = false; offTop = false; offBottom = false; if (this. x> rightBorder) {offRight = true;} if (this. x bottomBorder) {offBottom = true;} if (this. y <0) {offTop = true;} if (this. boundAction == WRAP) {if (offRight) {this. x = leftBorder;} // end if if (offBottom) {this. y = topBorder;} // end if if (offLeft) {this. x = rightBorder;} // end if if (offTop) {this. y = bottomBorder;}} else if (this. boundAction == BOUNCE) {if (offTop || offBottom) {this.dy * = -1; deze. calcSpeedAngle (); deze. imgAngle = dit. moveAngle;} if (offLeft || offRight) {this. dx * = -1; deze. calcSpeedAngle (); deze. imgAngle = dit. moveAngle;}} else if (this. boundAction == STOP) {if (offLeft || offRight || offTop || offBottom) {this. setSpeed ​​(0);}} else if (this. boundAction == DIE) {if (offLeft || offRight || offTop || offBottom) {this. verbergen(); deze. setSpeed ​​(0);}} else {// doorgaan voor altijd}} // einde checkbounds

Als u de sprite's grensactie in simpleGame wilt wijzigen, kunt u de methode setBoundAction () gebruiken om dit te doen.

Houd er rekening mee dat in een aantal situaties ander gedrag vereist kan zijn. U wilt bijvoorbeeld om de zijkanten wikkelen, maar bovenaan of onderaan stoppen. Als u een specifieker gedrag wilt, bouw dan gewoon een nieuwe methode checkBounds () voor uw sprite. U moet echter alle grenzen controleren, want uw nieuwe checkBounds () overschrijven volledig die in simpleGame is ingebouwd.