Sådan tilføjer du kollisioner til dit HTML5-spil - dummier

De mest interessante ting i HTML5 videospil sker, når sprites conk og kolliderer ind i hinanden. Spilmotorer har normalt en slags værktøj til at teste om to sprites er overlappende. Dette kaldes kollisionsdetektering , og det kan gøres på flere måder. Dette eksempel bruger standard afgrænsningsrektangel -skema. Det er ikke perfekt, men det er meget nemt at implementere og bliver almindeligt anvendt.

Sådan opsættes kollisionsrektangelkollisioner i dit spil

Tag et kig på colTest. html, og du får se et simpelt eksempel.

I colTest. html eksempel, brugeren flytter critter med musen, og du får en besked, når critter rører boksen midt på skærmen.

colTest. html checkCollisions (); kassen. opdatering (); critter. opdatering ();} // end opdatering; funktion checkCollisions () { hvis (boksen. CollidesWith (critter)) { output. innerHTML = "Kollision"; } ellers { output. innerHTML = "Ingen kollision"; } // ende hvis } // end checkCollisions empty

Der sker en række interessante ting i denne kode:

1. Skjul den normale musemarkør.

   Når du skal have noget andet objekt, følg musen, vil du normalt skjule den normale pilmarkør. I simpleGame, brug spillet. hideCursor () metode til at skjule musemarkøren inde i spilskærmen.

2. Opret mere end et sprite.

   Det tager to til tango eller kolliderer. I dette eksempel forbliver boksen stationær og en critter, der følger musen.

3. Giv critter en followMouse () metode.

   I dette eksempel har du den critter, der følger musen. Begynd med at oprette en followMouse () metode.

4. Bestem musens position.

   Muspositionen bestemmes (i simpleGame. Js) med dokumentet. mouseX og dokument. mouseY egenskaber.

5. Kopier musepositionen til critter-positionen.

   Brug musens x-position til at indstille critters x-position og gentag med y.

6. Ring til critters followMouse () metode hver ramme.

   Som normalt er opdateringen () -funktionen, hvor du lægger kode, der skal ske gentagne gange.

Hvis du leger med colTest. html side, vil du sikkert bemærke, at kollisionerne ikke er nøjagtige. Det er muligt at få et kollisionsregister, selvom critter ikke rent faktisk rører ved kassen. Dette er vigtigt, fordi simpleGame bruger et program kaldet grænsekassakollisioner .

Dette betyder, at du faktisk ikke kontrollerer for at se, om billederne kolliderer, men om rektanglerne omkring billederne kolliderer. I dette eksempel er forskellen mindre, men du vil undertiden se betydelige fejl med denne mekanisme, især med elementer, der er lange og tynde. Når et sprite roterer, kan størrelsen af ​​det afgrænsende rektangel ændres.

Afstandsbaserede kollisioner til dit spil

En alternativ form for kollisionsdetektion kaldet grænsekreds kollisioner er tilgængelig. Med denne mekanisme beregner du blot afstanden mellem midten af ​​to sprites, og hvis den værdi er mindre end en tærskel, anser du det for en kollision. Denne tilgang har to fordele:

• Kollisionsafstanden er konstant. Afstanden mellem billedcentre ændres ikke, når billederne roteres, selvom billederne ændrer størrelse.

• Kollisionstærsklen kan varieres. Du kan indstille enhver følsomhed, du vil have. Indstil en stor kollisionsradius for nemme kollisioner og en mindre, når du vil have kollisioner, der kun udløses, når sprites er meget tæt på hinanden.

Sprogobjektet simpleGame Library Sprite har en distanceTo () metode, som beregner afstanden fra et sprite til en anden. Du kan se et eksempel på denne kode i afstanden. html eksempel:

afstand. html var spil; var box; var critter; var output; funktion init () {game = new Scene (); spil. hideCursor (); boks = nyt Sprite (spil, "simpleBox. png", 50, 50); critter = ny Sprite (spil, "critter.gif", 50, 50); output = dokument. getElementById ("output"); // giv boksen fast position boks. setPosition (200, 150); boks. setSpeed ​​(0); critter. setPosition (100, 100); critter. setSpeed ​​(0); // critter kontrolleret af mus critter. followMouse = funktion () {this. setX (dokument. mouseX); det her. setY (dokument. mouseY);} // end followMouse spil. start ();} // end init funktion opdatering () {game. klar(); critter. followMouse (); checkDistance (); kassen. opdatering (); critter. opdatering ();} // end opdatering; funktionskontrolafstand () { dist = boks. distanceto (critter); hvis (dist <50) { output. innerHTML = "Kollision:" + dist; } ellers { output. innerHTML = "Ingen kollision:" + dist; } // ende hvis } // ende checkDistance tom

Den afstandsbaserede kollisionsmetode ligner meget på grænseværdierne. Opret en checkDistance () funktion, der vil fungere ligesom de gamle checkCollisions (). Her er trinene for hvad der sker i checkDistance:

1. Find afstanden mellem de to sprites.

   Brug spritens distanceTo () metode til at bestemme afstanden mellem de to sprites.

2. Hvis afstanden er mindre end en tærskel, tæller den som kollision.

   Generelt skal du bruge bredden på den mindre sprite som udgangspunkt for en kollisionstærskel, men du kan justere dette for at gøre kollisioner mere eller mindre sandsynlige.

3. Rapporter kollisionsstatus.

   I dette eksempel skal du blot udskrive "kollision" eller "ingen kollision", men i et rigtigt spil kollisioner udløser andre handlinger: øge score, reducere antallet af liv, ændre hastigheden eller positionen af ​​de kolliderede elementer, eller hvad som helst. (Forhåbentlig involverer det eksplosioner.)