Hoe u animatie maakt met simpleGame. js Uw HTML5-spel - dummies

Het is mogelijk om een bibliotheek te bouwen die alle verschillende HTML5-game-engine-functies vereenvoudigt. Overweeg de bibliotheek te gebruiken: simpleGame. js. Deze bibliotheek is gemakkelijk te gebruiken en is volledig in staat tot geavanceerde spelontwikkeling. Om te beginnen, moet u echt slechts twee objecten begrijpen:

De scène: Dit object begint met een HTML-canvasobject en voegt de hoofdlus toe. De scène is het verenigende object dat het spel bestuurt.
Sprites: Deze objecten zijn de elementen die op het scherm worden verplaatst. De meeste spelelementen zijn sprites. Elke sprite moet bij een enkele scène horen, maar je kunt zoveel sprites hebben als je wilt. Een sprite is gebaseerd op een afbeelding.

Deze code is veel geavanceerder dan het lijkt. Dit is wat het doet:

Het voegt een canvas toe aan de pagina. De grijze rechthoek is eigenlijk een canvastag die automatisch aan de pagina is toegevoegd.
Het begint een spelloop. Dit programma heeft een gamelus die al met 20 frames per seconde loopt.
Het bevat een sprite. De balafbeelding is een sprite, die de mogelijkheid heeft om elke snelheid in elke richting te verplaatsen en andere interessante functies zoals ingebouwde botsingsdetectie.
De bal beweegt. Het wikkelt automatisch naar de andere kant van het scherm wanneer het een zijde verlaat.

Dit is de volledige codelijst:

redBall. html // eenvoudig spel met een enkele bewegende bal var scène; var bal; function init () {scene = new Scene (); bal = nieuwe Sprite (scène, "redBall. png", 50, 50); bal. setMoveAngle (180); bal. setSpeed (3); tafereel. start ();} // update van de end-init-functie () {scène. duidelijk(); bal. update ();} // einde update

Je begint met een eenvoudige HTML5-pagina en voegt een paar functies toe om er een gamingomgeving van te maken.

Je gamepagina bouwen

Begin met het opbouwen van de onderliggende pagina:

Begin met een HTML5-pagina.

U kunt dezelfde hulpprogramma's gebruiken die u voor uw andere webontwikkeling hebt gebruikt. Maak een eenvoudige HTML5-sjabloon zoals u voor een ander HTML5-document doet.
Importeer de eenvoudige game. js bibliotheek.

Deze bibliotheek is gratis beschikbaar op de website. Gebruik een tag om de bibliotheek te importeren. Stel de eigenschap src in op de naam van de bibliotheek (simpleGame. Js).
Houd de HTML eenvoudig.

Je hebt niet veel nodig. De game-engine maakt een canvas met de scène. Je zou een titel, instructies of andere hulpmiddelen zoals scoreborden op de pagina kunnen zetten, maar de game-engine zal het grootste deel van het werk doen.
Bel init () wanneer het lichaam laadt.

Het is heel gebruikelijk om een functie te hebben die wordt genoemd wanneer het lichaam laadt. Voeg onload = "init ()" toe aan de body-tag om de methode init () aan te roepen.
Maak een tweede scriptlabel dat uw code bevat.

U moet een tweede scripttag voor aangepaste code hebben. Plaats dit na de tag die de bibliotheek importeert.
Plaats twee functies in uw script.

Alle simpleGame-programma's hebben ten minste twee functies: init () gebeurt bij het opstarten en update () gebeurt één keer per frame.

Hoe u uw spel initialiseert

Het initialisatiegedeelte van het spel vindt plaats terwijl de pagina wordt geladen. Het wordt voornamelijk gebruikt bij het instellen van sprites en andere bronnen. Hier is de code:

var scene; var bal; function init () {scene = new Scene (); bal = nieuwe Sprite (scène, "redBall. png", 50, 50); bal. setMoveAngle (180); bal. setSpeed (3);} // end init

De meeste spellen zullen een vergelijkbare initialisatiestijl gebruiken. U stelt de game als volgt in:

Definieer een variabele die de scène bevat.

Elke simpleGame-game heeft ten minste één scène-object. Definieer de scène buiten alle functies, zodat deze voor alle functies beschikbaar is. U maakt de scène feitelijk in de functie init ().
Definieer een variabele voor elke sprite.

Elke sprite in uw game moet ook tot een globale variabele behoren. U maakt de sprites in de init () -functie, maar u moet de variabele beschikbaar maken voor alle functies.
Bouw de init () -functie.

Deze functie wordt body onload genoemd. Het wordt uitgevoerd nadat de pagina in het geheugen is geladen.
Maak de scène.

Maak een instantie van de scèneklasse om de scène te maken. Wat je eigenlijk zegt, is "Make me a Scene-object en noem dit specifieke exemplaar". '"De scène vereist geen parameters.
Maak de balsprite.

De bal is een Sprite-instantie. Om een sprite te maken, heb je nog een paar stukjes informatie nodig. U hebt een scène, een afbeeldingsbestandsnaam, -breedte en -hoogte nodig.
Stel de bewegingshoek van de bal in.

U kunt de hoek wijzigen waarin de bal beweegt. De hoeken worden in graden zoals op een kaart gemeten.
Stel de bewegingssnelheid van de bal in.

Je kunt ook de snelheid van de bal bepalen.
Start de scène.

Wanneer u klaar bent met het instellen van alles, laat het aan de scène beginnen.

De game-animatie bijwerken

Nadat u de scène hebt gestart, begint er een timer. Twintig keer per seconde zal het een functie op uw pagina noemen met de naam update (). Dus je moet zo'n functie hebben en het moet een code hebben om je spel te laten lopen.

De update () -functie is ook niet erg moeilijk.

functie-update () {scène. duidelijk(); bal. update ();} // einde update

De update () functie doet typisch drie dingen:

Wist het vorige scherm: De eerste orde van zaken is het opruimen van eventuele rotzooi veroorzaakt door het laatste scherm. Het Scene-object heeft voor dit doel een duidelijke () -functie.
Controleert op gebeurtenissen: Normaal gesproken zoekt u naar gebeurtenissen, zoals gebruikersinvoer, sprites die tegen elkaar botsen, sprites die het scherm verlaten of wat dan ook.Voor deze eenvoudige animatie is de enige gebeurtenis een sprite die het scherm verlaat en het gedrag dat aan deze actie is gekoppeld, is geautomatiseerd.
Werkt elke sprite bij: Het laatste deel van de update van het scherm werkt de sprites bij. Wanneer u een sprite bijwerkt, wordt deze in de nieuwe positie getekend.

Dit is wat er gebeurt als u het scherm niet wist. Alle sprite-bewegingen worden op het canvas getekend en het ziet eruit als een grote vlek in plaats van een bewegende bal.