Hur man bygger animering med simpleGame. js Ditt HTML5-spel - dummies

Det är möjligt att bygga ett bibliotek som förenklar alla olika HTML5-spelmotorfunktioner. Överväg att använda biblioteket: simpleGame. js. Detta bibliotek är lätt att använda och är fullt kapabelt för sofistikerad spelutveckling. För att komma igång behöver du förstå bara två objekt:

Scenen: Detta objekt börjar med ett HTML-kanvasobjekt och lägger till huvudslingan. Scenen är det samlingsobjekt som styr spelet.
Sprites: Dessa objekt är de element som rör sig runt på skärmen. De flesta av spelelementen är sprites. Varje sprite måste tillhöra en enda scen, men du kan ha så många sprites som du vill. Ett sprite är baserat på en bild.

Denna kod är faktiskt mycket mer sofistikerad än den ser ut. Så här gör det:

Den lägger till en duk på sidan. Den grå rektangeln är faktiskt en duktagtagg som automatiskt har lagts till på sidan.
Det börjar en spelslinga. Detta program har en spelslinga som redan körs med 20 bilder per sekund.
Den innehåller en sprite. Bollbilden är en sprite som har möjlighet att flytta vilken hastighet som helst i alla riktningar och andra intressanta funktioner som kollisionsdetektering inbyggd.
Bollen går. Det sveper automatiskt till andra sidan av skärmen när den lämnar en sida.

Här är hela kodlistan:

redBall. html // enkelt spel med en rörlig boll var scen; var boll; funktion init () {scene = new Scene (); boll = ny Sprite (scen, "redBall. png", 50, 50); boll. setMoveAngle (180); boll. setSpeed (3); scen. start ();} // end init-funktionen uppdatering () {scen. klar(); boll. uppdatering ();} // slutuppdatering

Du börjar med en grundläggande HTML5-sida och lägger till några funktioner för att göra det till en spelmiljö.

Så här bygger du din spelsida

Börja med att bygga den underliggande sidan:

Börja med en HTML5-sida.

Du kan använda samma verktyg som du har använt för din andra webbutveckling. Bygg en grundläggande HTML5-mall som du gör för något annat HTML5-dokument.
Importera simpleGame. js-biblioteket.

Detta bibliotek är tillgängligt gratis från webbplatsen. Använd en tagg för att importera biblioteket. Ställ in src-egenskapen i bibliotekets namn (simpleGame. Js).
Håll HTML enkelt.

Du behöver inte mycket. Spelmotorn kommer att skapa en duk som innehåller scenen. Du kan ange en titel, instruktioner eller andra verktyg som resultattavlor på sidan, men spelmotorn kommer att göra det mesta av arbetet.
Ring init () när kroppen laddas.

Det är mycket vanligt att få en funktion som heter när kroppen laddas. Lägg till onload = "init ()" till kroppstaggen för att ringa init () -metoden.
Skapa en andra skriptikett för att innehålla din kod.

Du måste ha en andra skriptikett för anpassad kod. Placera detta efter taggen som importerar biblioteket.
Placera två funktioner i ditt skript.

Alla simpleGame-program kommer att ha minst två funktioner: init () händer vid start och uppdatering () händer en gång per ram.

Så här initierar du ditt spel

Initialiseringsdelen av spelet händer när sidan laddas. Det är huvudsakligen upptagen med att skapa sprites och andra resurser. Här är koden:

var scen; var boll; funktion init () {scene = new Scene (); boll = ny Sprite (scen, "redBall. png", 50, 50); boll. setMoveAngle (180); boll. setSpeed (3);} // end init

De flesta spel använder en liknande initieringsstil. Så här ställer du in spelet:

Definiera en variabel för att innehålla scenen.

Varje simpleGame-spel kommer att ha minst ett scenobjekt. Definiera scenen utanför några funktioner, så den är tillgänglig för alla. Du kommer faktiskt att skapa scenen inom init () -funktionen.
Definiera en variabel för varje sprite.

Varje sprite i ditt spel måste också tillhöra en global variabel. Du skapar sprites i init () -funktionen, men du måste göra variabeln tillgänglig för alla funktioner.
Bygg init () -funktionen.

Denna funktion kallas av body onload. Den kommer att köras efter att sidan har laddats in i minnet.
Skapa scenen.

För att skapa scenen, skapa en förekomst av scenklassen. Vad du egentligen säger är "Gör mig ett scenobjekt och kalla det här exemplet" -scenen. "" Scenen kräver inga parametrar.
Skapa bollspritet.

Bollen är en Sprite-förekomst. För att göra en sprite behöver du några fler bitar av information. Du behöver en scen, ett bildfilnamn, bredd och höjd.
Ställ in bollens rörelsevinkel.

Du kan ändra vinkeln som bollen flyttar. Vinklarna mäts i grader som på en karta.
Ställ in bollens rörelsehastighet.

Du kan också bestämma bollens hastighet.
Starta scenen.

När du är färdig med att ställa allt upp, berätta för scenen att börja.

Uppdatera spelanimationen

När du har startat scenen startar en timer. Tjugo gånger i sekundet kommer det att ringa en funktion på din sida som kallas uppdatering (). Så måste du ha en sådan funktion, och det måste ha någon kod för att ditt spel ska springa.

Funktionen uppdatering () är inte heller oerhört svårt.

funktionsuppdatering () {scen. klar(); boll. uppdatering ();} // slutuppdatering

Funktionen uppdatering () har vanligen tre saker:

Rensar föregående skärm: Den första verksamheten är att städa upp eventuell röra som orsakats av den sista skärmen. Scenobjektet har en klar () -funktion för exakt den här ändamålet.
Kontroller för händelser: Vanligtvis söker du efter händelser, som användarinmatning, sprites kraschar i varandra, sprites lämnar skärmen eller vad som helst.För den här enkla animationen är den enda händelsen en sprite som lämnar skärmen, och beteendet i samband med denna åtgärd har automatiserats.
Uppdateringar varje sprite: Den sista delen av skärmuppdateringen uppdaterar spritesna. När du uppdaterar en sprite kommer den att dra i sin nya position.

Här händer vad som händer om du inte rensar skärmen. Alla spritrörelserna kommer att ritas på duken och det ser ut som ett stort utslag istället för en rörlig boll.