Hvordan lage den Marble-Rolling spillet i din HTML5 spill

November 21  by Eliza

Denne typen HTML5 spillet er designet spesielt for mobile enheter med et akselerometer (selv om det fungerer på en stasjonær). Ideen er å tippe enheten å flytte en ball i det blå målet uten å treffe noen av blokkene. Hver gang brukeren oppnår målet, er spillet tegnes på nytt med en ekstra blokk, noe som gjør spillet vanskeligere og vanskeligere.

Hvordan lage den Marble-Rolling spillet i din HTML5 spill

Behandle gameâ € ™ s dobbel inngang

Kanskje den mest interessante delen av dette spillet er sin roman innspill mekanisme. Det føles veldig naturlig å vippe skjermen for ball bevegelse.

  1. Lag en Accel objekt.

    Slå på akselerometer ved å opprette en forekomst av Accel objekt.

  2. Bygge en checkAccel () -metoden.

    En fremgangsmåte ble tilsatt til Ball objekt som kontrollerer akselerometer.

  3. Få akselerometer rotasjon.

    Bruk getAX () og getAY () metoder for å finne mengden av rotasjon om disse akser.

  4. Konvertere rotasjon til dx og dy verdier.

    Du kan bruke mekanismer for å konvertere rotasjon til hensiktsmessige bevegelses verdier.

  5. Legg til en valgfri keyboard input.

    Det er mye lettere å feilsøke et program på en stasjonær enn på en mobil enhet, slik at du kan legge til en alternativ inngang alternativet slik at du kan teste så mye av programmet som mulig før han flyttet til den mobile plattformen. Bruk Scene klassens touchable eiendom for å avgjøre om du bruker en mobil enhet. Denne tilnærmingen gjør også spillet spillbart for et bredere spekter av brukere.

Her er koden (i hoved oppdatering () -funksjonen) for kontroll av hvilken type innspill er tilgjengelig:

// Få innspill fra akselerometer eller tastatur
if (game.touchable) {
ball.checkAccel ();
} Else {
ball.checkKeys ();
}

Og her er den checkAccel () metoden i Ball objekt:

tBall.checkAccel = function () {
// Bruker akselerometeret til å få innspill
newDX = accel.getAY ();
newDY = accel.getAX ();

newDX * = -5;
newDY * = -5;

ball.setDX (newDX);
ball.setDY (newDY);
} // End checkAccel

Hvordan bygge spillet hindringer

Et annet interessant trekk ved dette spillet er den stadig økende vanskelighetsgrad. Får vanskelighetsgraden av et spill riktig er svært utfordrende. Du vil at spillet skal være beatable, men å slå spillet trenger å føle seg som en bragd. En måte å oppnå dette målet er å begynne med en svært enkel vanskelighetsgrad og deretter trappe opp til spillet blir vanskeligere.

For marmor spillet, bruke en rekke blokker som hindringen. Når spillet begynner, er det bare ti kvartaler på skjermen, så det er ganske lett å komme til målet uten å treffe noen blokker. Hver gang spilleren når målet, er spillet scene tegnes på nytt med en mer blokk.

Blokkene og målet er tegnet på tilfeldige posisjoner på skjermen. Men du må være forsiktig med å skape en umulig situasjon. The Block objektets reset () metoden forsøker å plassere en blokk på en tilfeldig posisjon på skjermen.

Men hvis blokken kolliderer med målet, vil spillet være vanskelig å vinne. Likeledes, hvis blokken kolliderer med ballen nåværende posisjon, spilleren vil umiddelbart miste. Hvis noen av disse tilstandene oppstår, er blokken tegnet på nytt inntil en rettsstilling er tilgjengelig.

Blokkene til å overlappe hverandre fritt, men du kan legge denne begrensningen også. Her er blokken tilbakestille rutine:

tBlock.reset = function () {
// Ikke la meg overlapper målet eller ball
keepGoing = true;
while (keepGoing) {
newX = Math.random () * this.cWidth;
newy = Math.random () * this.cHeight;

this.setPosition (newX, newy);
keepGoing = false;
if (this.collidesWith (mål)) {
keepGoing = true;
} // End if
if (this.distanceTo (ball) <150) {
keepGoing = true;
} // End if
} // End mens loop
} // End reset

Hvordan forbedre marmor spillet

Marmor spillet er ganske spillbart som det er, men noen spill kan forbedres. Her er noen forslag:

  • Legg en tidsbegrensning. Krev at brukeren å nå målet på et angitt tidspunkt.
  • Legge til nye typer barrierer. Barrierer i forskjellige størrelser vil endre gameplay.
  • Endre ballens grense handling. I denne versjonen av spillet, wraps ballen rundt på skjermen. Dette legger et ekstra taktisk element til spillet, men du foretrekker å stoppe ved grensen.
  • Legg powerups. Du kan alltid legge til spesielle elementer som midlertidig endre gameplay. Kanskje vurdere å lage ballen uovervinnelig i noen sekunder, eller snu tyngdekraften (multiplisere dx og dy både med -1). Du kan også midlertidig endre størrelsen på ballen eller har en powerup som tilbakestiller dagens nivå.
  • Lag bevegelige blokker. Spillet helt endres hvis blokkene også flytte. Du vil sannsynligvis vil ha dem til å bevege seg veldig sakte i en tilfeldig retning fordi denne funksjonen kan gjøre spillet mye vanskeligere.
  • Gjøre kosmetiske forbedringer. Selvfølgelig kan du alltid legge til lydeffekter, en høy score mekanisme og forbedret grafikk.