Hvordan du legger til kollisjoner i HTML5-spillet ditt - dummies

De mest interessante tingene i HTML5 videospill skjer når sprites conk og kolliderer inn i hverandre. Spillmotorer har normalt en slags verktøy for å teste om to sprites er overlappende. Dette kalles kollisjonsdeteksjon , og det kan gjøres på flere måter. Dette eksemplet bruker standard begrensende rektangel -skjema. Det er ikke perfekt, men det er veldig enkelt å implementere og brukes ofte.

Slik konfigurerer du begrensende rektangelkollisjoner i spillet ditt

Ta en titt på colTest. html, og du får se et enkelt eksempel.

I colTest. html eksempel, brukeren flytter critter med musen, og du får en melding når critter berører boksen midt på skjermen.

colTest. html checkCollisions (); boksen. Oppdater(); critter. oppdatering ();} // end oppdatering; funksjonskontrollkollisjoner () { hvis (boks. CollidesWith (critter)) { utgang. innerHTML = "Kollisjon"; } annet { utgang. innerHTML = "Ingen kollisjon"; } // slutt hvis } // sluttkontrollKollisjoner tom

En rekke interessante ting skjer i denne koden:

1. Skjul den normale musemarkøren.

   Når du skal ha et annet objekt, følg musen, vil du normalt gjemme den normale pilmarkøren. I simpleGame, bruk spillet. hideCursor () -metoden for å skjule musemarkøren inne i spillskjermbildet.

2. Lag mer enn ett sprite.

   Det tar to å tango, eller kolliderer. I dette eksemplet vil boksen forbli stasjonær og en critter som følger musen.

3. Gi critter en followMouse () metode.

   I dette eksemplet har du critter følge musen. Begynn med å opprette en followMouse () -metode.

4. Bestem musens posisjon.

   Musposisjonen bestemmes (i simpleGame. Js) med dokumentet. mouseX og dokument. mouseY egenskaper.

5. Kopier museposisjonen til critter-posisjonen.

   Bruk musens x-posisjon for å sette critterens x-posisjon, og gjenta med y.

6. Kall critter's followMouse () metode hver ramme.

   Som vanlig er oppdateringen () -funksjonen der du setter kode som skal skje gjentatte ganger.

Hvis du leker med colTest. html side, vil du sannsynligvis merke at kollisjonene ikke er nøyaktige. Det er mulig å få et kollisjonsregister selv når critter ikke faktisk berører boksen. Dette er viktig fordi simpleGame bruker et skjema kalt grensebokskollisjoner .

Dette betyr at du faktisk ikke sjekker for å se om bildene kolliderer, men om rektanglene rundt bildene kolliderer. I dette eksemplet er forskjellen mindre, men du vil noen ganger se betydelige feil med denne mekanismen, spesielt med elementer som er lange og tynne. Når et sprite roterer, kan størrelsen på det begrensende rektangel endres.

Avstandsbaserte kollisjoner for spillet ditt

En alternativ form for kollisjonsdeteksjon, kalt grensesnitt kollisjoner, er tilgjengelig. Med denne mekanismen beregner du bare avstanden mellom midten av to sprites, og hvis verdien er mindre enn noen terskel, anser du det for en kollisjon. Denne tilnærmingen har to fordeler:

• Kollisjonsavstanden er konstant. Avstanden mellom bildesentre vil ikke endres når bilder roteres, selv om bildene endrer størrelse.

• Kollisjonsterskelen kan varieres. Du kan angi hvilken følsomhet du vil ha. Sett en stor kollisjonsradius for enkle kollisjoner og en mindre når du vil at kollisjoner skal utløses bare når sprites er svært nær hverandre.

Sprite-objektet SimpleGame-biblioteket har en distanceTo () -metode som beregner avstanden fra ett sprite til et annet. Du kan se et eksempel på denne koden i det fjerne. html eksempel:

avstand. html var spill; var boks; var critter; var utgang; funksjon init () {game = new Scene (); spill. hideCursor (); boks = ny Sprite (spill, "simpleBox. png", 50, 50); critter = ny Sprite (spill, "critter.gif", 50, 50); output = dokument. getElementById ("output"); // gi boksen fast posisjon boks. setPosition (200, 150); eske. setSpeed ​​(0); critter. settposisjon (100, 100); critter. setSpeed ​​(0); // critter kontrollert av mus critter. followMouse = funksjon () {dette. setX (dokument. mouseX); dette. setY (dokument. mouseY);} // end followMouse spill. start ();} // end init funksjon oppdatering () {spill. klar(); critter. followMouse (); checkDistance (); boksen. Oppdater(); critter. oppdatering ();} // end oppdatering; funksjonskontrollavstand () { dist = boks. avstand distanceto (critter); hvis (dist <50) { utgang. innerHTML = "Kollisjon:" + dist; } annet { utgang. innerHTML = "Ingen kollisjon:" + dist; } // slutten hvis } // end checkCheckDistance empty

Den avstandsbaserte kollisjonsmetoden ligner veldig på grense-rektangelversjonen. Opprett en checkDistance () -funksjon som vil fungere som de gamle kontrollkollisjonene (). Her er trinnene for hva som skjer i checkDistance:

1. Finn avstanden mellom de to sprites.

   Bruk spritens distanceTo () -metode for å bestemme avstanden mellom de to sprites.

2. Hvis avstanden er mindre enn noen terskel, teller den som kollisjon.

   Generelt bør du bruke bredden på den mindre sprite som utgangspunkt for en kollisjonsterskel, men du kan justere dette for å gjøre kollisjoner mer eller mindre sannsynlige.

3. Rapporter kollisjonstilstanden.

   I dette eksemplet skriver du bare ut "kollisjon" eller "ingen kollisjon", men i et ekte spill er kollisjoner utløsere for andre handlinger: øke poengsummen, redusere antall liv, endre hastigheten eller posisjonen til de kolliderte elementene, eller hva som helst. (Forhåpentligvis involverer det eksplosjoner.)