Hur man lägger till kollisioner i ditt HTML5-spel - dummies

De mest intressanta sakerna i HTML5-videospel händer när sprites conk och kolliderar in i varandra. Spelmotorer har normalt ett slags verktyg för att testa om två sprites överlappar varandra. Detta kallas kollisionsdetektering , och det kan göras på ett antal sätt. I det här exemplet används standard gränsrektangel -schemat. Det är inte perfekt, men det är mycket enkelt att implementera och används vanligtvis.

Så här ställer du in kollisioner med begränsad rektangel i ditt spel

Ta en titt på colTest. html och du får se ett enkelt exempel.

I colTest. html exempel flyttar användaren critter med musen, och du får ett meddelande när critter röra rutan mitt på skärmen.

colTest. html checkCollisions (); rutan. uppdatering(); Nötkreatur. uppdatering ();} // slutuppdatering; funktionskontrollkollisioner () { om (rutan. CollidesWith (critter)) { utgång. innerHTML = "Kollision"; } annars { -utmatning. innerHTML = "Ingen kollision"; } // avsluta om } // slutkollisioner tom

Ett antal intressanta saker händer i denna kod:

1. Dölj den normala muspekaren.

   När du ska ha något annat objekt följer musen, vill du normalt gömma den normala pilmarkören. I simpleGame, använd spelet. hideCursor () -metoden för att dölja muspekaren inuti spelskärmen.

2. Skapa mer än en sprite.

   Det tar två att tango eller kollidera. I det här exemplet kommer lådan att vara stationär och en critter som följer musen.

3. Ge critter en followMouse () -metod.

   I det här exemplet har du critter följ musen. Börja med att skapa en followMouse () -metod.

4. Bestäm musens position.

   Muspositionen bestäms (i simpleGame. Js) med dokumentet. mouseX och dokument. mouseY egenskaper.

5. Kopiera muspositionen till critterpositionen.

   Använd musens x-position för att ställa in critters x-position och upprepa med y.

6. Ring till critters followMouse () -metod varje ram.

   Som vanligt är uppdateringen () -funktionen där du sätter kod som ska hända flera gånger.

Om du leker med colTest. html-sida kommer du förmodligen att märka att kollisionerna inte är exakta. Det är möjligt att ha ett kollisionsregister även när critter faktiskt inte rör rutan. Detta är viktigt eftersom simpleGame använder ett schema som heter bounding box-kollisioner .

Det här betyder att du faktiskt inte kontrollerar om bilderna kolliderar, men om rektanglarna runt bilderna kolliderar. I det här exemplet är skillnaden liten, men ibland ser du signifikanta fel med denna mekanism, särskilt med långa och tunna element. När en sprite roterar kan storleken på den begränsande rektangeln ändras.

Distansbaserade kollisioner för ditt spel

En alternativ form av kollisionsdetektering, kallad gränscirkel kollisioner, är tillgänglig. Med denna mekanism beräknar du bara avståndet mellan två sprites centrum, och om det värdet är mindre än något tröskelvärde, anser du att det är en kollision. Detta tillvägagångssätt har två fördelar:

• Kollisionsavståndet är konstant. Avståndet mellan bildcentralerna ändras inte när bilder roteras, även om bilderna ändrar storlek.

• Kollisionsgränsen kan varieras. Du kan ställa in vilken känslighet du vill ha. Ställ in en stor kollisionsradie för enkla kollisioner och en mindre när du vill att kollisioner utlöses endast när spritesna ligger väldigt nära varandra.

Sprite-objektet SimpleGame-biblioteket har en distanceTo () -metod som beräknar avståndet från en sprite till en annan. Du kan se ett exempel på den här koden på avstånd. html exempel:

avstånd. html var spel; var box; var critter; var utmatning; funktion init () {game = new Scene (); spel. hideCursor (); box = nytt Sprite (spel, "simpleBox. png", 50, 50); critter = New Sprite (spel, "critter. gif", 50, 50); output = dokument. getElementById ("output"); // ge rutan med fast position. setPosition (200, 150); låda. setSpeed ​​(0); Nötkreatur. setPosition (100, 100); Nötkreatur. setSpeed ​​(0); // critter kontrollerad av muskritiker. followMouse = funktion () {this. setX (dokument. mouseX); detta. setY (dokument. mouseY);} // end followMouse-spel. start ();} // end init-funktionen uppdatering () {game. klar(); Nötkreatur. followMouse (); checkDistance (); rutan. uppdatering(); Nötkreatur. uppdatering ();} // slutuppdatering; funktionskontrolldistans () { dist = box. distanceTo (nötkreatur); om (dist <50) { utgång. innerHTML = "Kollision:" + dist; } annars { -utmatning. innerHTML = "Ingen kollision:" + dist; } // slutet om } // slutkontrollavstånd tomt

Den distansbaserade kollisionsmetoden liknar väsentligen begränsningsrektangelversionen. Skapa en checkDistance () -funktion som kommer att fungera precis som de gamla checkCollisions (). Här är stegen för vad som händer i checkDistance:

1. Hitta avståndet mellan de två spritesna.

   Använd spritens distanceTo () -metod för att bestämma avståndet mellan de två spritesna.

2. Om avståndet är mindre än något tröskelvärde, räkna det som en kollision.

   Generellt bör du använda bredden på den mindre spriten som utgångspunkt för en kollisionströskel, men du kan justera detta för att göra kollisioner mer eller mindre troliga.

3. Rapportera kollisionsstatus.

   I det här exemplet skriver du bara ut "kollision" eller "ingen kollision", men i ett riktigt spel utlöser kollisioner för andra åtgärder: öka poängen, minska antalet liv, ändra hastigheten eller positionen för de kolliderade elementen, eller vad som helst. (Förhoppningsvis innebär det explosioner.)