Hoe u botsingen kunt toevoegen aan uw HTML5-spel - dummies

De meest interessante dingen in HTML5-videogames doen zich voor wanneer sprites conk en tegen elkaar botsen. Game-engines hebben normaal gesproken een soort tool om te testen of twee sprites elkaar overlappen. Dit wordt botsdetectie genoemd en het kan op verschillende manieren worden gedaan. In dit voorbeeld wordt het standaard begrenzende rechthoek -schema gebruikt. Het is niet perfect, maar het is heel gemakkelijk te implementeren en wordt veel gebruikt.

Begrensde rechthoeken in je spel instellen

Bekijk colTest. html en je ziet een eenvoudig voorbeeld.

In de colTest. HTML-voorbeeld, de gebruiker verplaatst het critter met de muis en je krijgt een bericht wanneer het critter de doos in het midden van het scherm aanraakt.

colTest. html checkCollisions (); box. bijwerken(); critter. update ();} // einde update; function checkCollisions () { if (box. Collides With (critter)) { uitvoer. innerHTML = "Botsing"; } else { uitvoer. innerHTML = "Geen botsing"; } // end if } // end checkCollisions empty

Een aantal interessante dingen gebeuren in deze code:

1. Verberg de normale muiscursor.

   Volg de muis wanneer u een ander object wilt hebben. U wilt normaal gesproken de normale pijlcursor verbergen. Gebruik de game in simpleGame. hideCursor () methode om de muiscursor in het spelscherm te verbergen.

2. Meer dan één sprite maken.

   Het duurt twee tot de tango, of botsen. In dit voorbeeld blijft het kader stationair en volgt een critter die de muis volgt.

3. Geef het critter een methode followMouse ().

   In dit voorbeeld laat je het critter volgen met de muis. Begin met het maken van een methode followMouse ().

4. Bepaal de positie van de muis.

   De positie van de muis wordt bepaald (in simpleGame. Js) bij het document. mouseX en document. mouseY eigenschappen.

5. Kopieer de muispositie naar de critter-positie.

   Gebruik de x-positie van de muis om de x-positie van de critter in te stellen en herhaal met y.

6. Roep de methode followMouse () van de critter elk frame op.

   Zoals gewoonlijk bevat de update () -functie de code die herhaaldelijk zou moeten voorkomen.

Als je met de colTest speelt. html-pagina, zult u waarschijnlijk merken dat de botsingen niet exact zijn. Het is mogelijk om een ​​collision register te hebben, zelfs wanneer het critter de box niet echt aanraakt. Dit is belangrijk omdat simpleGame een schema gebruikt met de naam begrenzende doosbotsingen .

Dit betekent dat je niet echt controleert of de afbeeldingen botsen, maar of de rechthoeken rond de afbeeldingen botsen. In dit voorbeeld is het verschil klein, maar soms ziet u significante fouten met dit mechanisme, vooral met elementen die lang en dun zijn. Als een sprite roteert, kan de grootte van de grensrechthoek veranderen.

Op afstand gebaseerde botsingen voor uw game

Een alternatieve vorm van collision detection, grenscirkel botsingen, is beschikbaar. Met dit mechanisme berekent u eenvoudig de afstand tussen het midden van twee sprites en als die waarde kleiner is dan een bepaalde drempel, beschouwt u dit als een botsing. Deze aanpak heeft twee voordelen:

• De aanvaringsafstand is constant. De afstand tussen de beeldcentra verandert niet wanneer afbeeldingen worden geroteerd, zelfs als de afbeeldingen van grootte veranderen.

• De collisiedrempel kan worden gevarieerd. U kunt elke gewenste gevoeligheid instellen. Stel een grote botsradius in voor eenvoudige botsingen en een kleinere botsing wanneer u wilt dat botsingen alleen worden geactiveerd als de sprites zich zeer dicht bij elkaar bevinden.

Het object Sprite in de simpleGame-bibliotheek heeft een distanceTo () -methode, die de afstand van de ene naar de andere sprite berekent. U kunt een voorbeeld van deze code in de verte zien. html-voorbeeld:

afstand. html var-spel; var box; var critter; var-uitvoer; function init () {game = new Scene (); spel. hideCursor (); box = nieuwe Sprite (spel, "simpleBox. png", 50, 50); critter = nieuwe Sprite (spel, "critter. gif", 50, 50); output = document. getElementById ("output"); // doos met vaste positie geven. setPosition (200, 150); doos. setSpeed ​​(0); critter. setPosition (100, 100); critter. setSpeed ​​(0); // critter gecontroleerd door muis critter. followMouse = function () {this. setX (document. mouseX); deze. setY (document. mouseY);} // einde followMouse-spel. start ();} // update van de eind-init-functie () {game. duidelijk(); critter. followMouse (); checkDistance (); box. bijwerken(); critter. update ();} // einde update; function checkDistance () { dist = box. distanceto (critter); uitvoer (dist <50) {. innerHTML = "Botsing:" + dist; } else { uitvoer. innerHTML = "Geen botsing:" + dist; } // end if } // end checkDistance empty

De distance-based collision-methode lijkt veel op de bounding-rechthoek-versie. Maak een functie checkDistance () die net zo zal werken als de oude checkCollisions (). Dit zijn de stappen voor wat er gebeurt in checkDistance:

1. Zoek de afstand tussen de twee sprites.

   Gebruik de methode distanceTo () van de sprite om de afstand tussen de twee sprites te bepalen.

2. Als de afstand kleiner is dan een bepaalde drempel, telt u deze als een botsing.

   Over het algemeen moet u de breedte van de kleinere sprite gebruiken als startpunt voor een collisiedrempel, maar u kunt dit aanpassen om botsingen meer of minder waarschijnlijk te maken.

3. Rapporteer de aanvaringsstatus.

   In dit voorbeeld drukt u eenvoudig "botsing" of "geen botsing" af, maar in een echt spel zijn botsingen triggers voor andere acties: het verhogen van de score, het verminderen van het aantal levens, het wijzigen van de snelheid of de positie van de botsende elementen, of wat dan ook. (Hopelijk gaat het om explosies.)