Hvordan lage en Lunar Lander i HTML5-spillet ditt - dummies

Dette er en av de eldste spilltypene. Den grunnleggende ideen er å replikere landing på en planet for ditt HTML5-spill uten en atmosfære. Apollo-astronautene hadde en begrenset mengde drivstoff for å bremse et rasktflyttende romskip og bringe det sikkert til overflaten. Dette spillet er en variant av det aktuelle temaet.

Essensen av et månelandsmannespill er samspillet mellom tyngdekraft og tyngdekraften. Spillet er avhengig av addVector () -metoden. Tyngdekraften gir en liten nedoverbakning hver ramme, som kan motvirkes av trykk fra piltastene.

Spillet har fire forskjellige landerbilder (for å gi tilbakemelding om at brukeren bruker stift), som enkelt byttes med setImage () -metoden etter behov.

Spillkollisjoner

Den mest interessante delen av dette spillet er landingsrutinen. Den vanlige kollisionsrutinen er ikke spesifikk nok til å håndtere denne typen kollisjon, da landingen vil bli betraktet som en sikker landing bare hvis en rekke forhold er sanne. Den reneste måten å sjekke om flere forhold er i et dypt nestet hvis struktur, som følgende:

tLander. {if (this. y> 525) {hvis (denne. x plattformen x - 10) {hvis (denne.dx -.2) {hvis (denne. dy < 2) {dette. setSpeed ​​(0); dette. faller = false; message = "For fort til venstre";} // ende if} else {message = "for fort";} else {message = "for mye vertikal hastighet";} // end if} else til høyre ";} // ende hvis} // ende 'x for stor' hvis} // ende 'x for liten' hvis} // slutt 'y ikke stor nok' hvis} / end 'faller vi? 'if} // end checkLanding

Når du ser etter flere forhold samtidig, er det best å opprette en separat om setning for hver. Plasser hver hvis setning inne i det neste, så den dypest nestede delen av koden representerer suksess.

1. Finn ut om du faller.

   En boolsk variabel som kalles fallende ble opprettet som beskriver om romfartøyet faller eller landes. Hvis fallet er sant, blir tyngdekraften slått av. Det er bare fornuftig å sjekke om en landingsstat dersom du faller.

2. Kontroller Y-verdien.

   Fordi plattformen er plassert til en Y-verdi på 550, ser landeren seg til å bli landet når Y-verdien er større enn 525. Du er egentlig bare opptatt av bunnen av landeren som berører toppen av plattformen. Vær oppmerksom på at denne sjekken skjer i fallende sjekk. Hvis noen tilstand mislykkes, er det ikke nødvendig å sjekke de andre.

3. Kontroller X-verdien.

   Du vil ha sentrum av landingspersonen til å være innen ti piksler i midten av plattformen, så bruk et par nestede om setninger for å sjekke X-stedene.

4. Kontroller horisontal hastighet.

   For sikker landing må båten ha en dx-verdi mellom -0. 2 og 0. 2. (Dette er noe vilkårlig, men ved testing, føles det om riktig.) Dette er best kontrollert med et par nestede hvis setninger.

5. Kontroller vertikal hastighet.

   Hvis alt annet fungerer bra, må du kontrollere at båten ikke faller for raskt. Bruk dy-egenskapen til å bestemme hvor raskt romfartøyet faller.

6. Gi tilbakemelding med andre klausuler.

   En dypt nestet struktur som dette viser deg den virkelige verdien av riktig innrykning og kommentar. Gi tilbakemelding i de ulike klausulene for å forklare hvorfor landingen ble ansett som en feil.

Spilltekstkonsoller

En annen interessant del av koden er mekanismen for å vise tekstdata til brukeren. Den enkleste måten å gjøre dette på er via en enkel HTML div. Bruk CSS til å plassere div nøyaktig hvor du vil at den skal være. Du bør sjelden bruke absolutt posisjonering i normal webutvikling, men det er fornuftig i sammenheng med å lage en etikett for et spill.

Merk at du kanskje må sette z-indeksegenskapen til en høy verdi for å sikre at den vises over lerretet, eller det kan ikke være synlig for brukeren. Her er CSS som gjør at etiketten ser ut som utdata på skjermen:

#stats {position: absolute; font-familie: monospace; venstre: 50px; topp: 50px; z-indeks: 999; farge: hvit;}

Måter å forbedre spillet ditt

Dette er bare et utgangspunkt for spillet. Mange andre interessante funksjoner kan legges til:

• Brensel: Legg til en brenselvariabel som blir dekrementert hver gang brukeren bruker strekk. Vertikal trykk skal bruke mer drivstoff enn horisontale justeringer. Hvis drivstoffnivået blir under null, ignorerer du flere trykkinnganger. Denne mekanismen gir en realistisk komplikasjon i spillet.

• Powerups: Legg til noen andre funksjoner brukeren kan tjene : bonusbrensel, mindre intens tyngdekraften, en bredere plattform.

• Flere landinger: Kanskje flytte landingsplaten etter en vellykket landing, eller ha brukeren et objekt til en annen plattform.

• Hindringer: Sett romskranke eller bygninger på den måten som vil krasje spilleren ved kontakt.

• Endre temaet: Den samme mekanikken kan enkelt brukes til et helikopter- eller varmluftsballongspill.