Hoe u de nummerschuiver kunt bouwen in uw HTML5-spel - dummies

Met willekeurige getallen kunt u interessante HTML5-games maken. Bekijk een eenvoudig spel dat samen HTML, CSS en JavaScript gebruikt. Deze game heeft een aantal interessante functies:

• Het gebruikt de webpagina als interface. Zoals veel JavaScript-programma's gebruikt het een webpagina als gebruikersinterface. Een invoerelement wordt gebruikt voor invoer, een div is het belangrijkste uitvoerelement en een knop activeert alle acties.

• Het gebruikt CSS voor styling. De verschillende delen van de pagina zijn opgemaakt met CSS. De CSS wordt opgeslagen in een externe stijlpagina voor gemak en herbruikbaarheid.

• Het vertelt de gebruiker hoeveel beurten ze heeft genomen. Op elke pass herinnert de computer de gebruiker hoeveel beurten er zijn gebeurd.

• Wanneer de gebruiker correct heeft geraden, wordt de knop Opnieuw starten weergegeven. Deze knop is in eerste instantie verborgen en wordt alleen weergegeven als dit nodig is.

• Het juiste antwoord is beschikbaar voor programmeurs via een speciale foutopsporingsfunctie. Tijdens het testen van het programma kan de ontwikkelaar zien wat het juiste antwoord is, maar deze informatie is voor de gebruiker verborgen.

• Een init () -functie begint het spel. De init () -functie initialiseert het spel. Het wordt gebeld wanneer het programma voor het eerst begint en opnieuw wanneer de gebruiker opnieuw wil beginnen.

• Er is nog een functie gekoppeld aan de knop. Wanneer de gebruiker op de knop Controleer uw gok klikt, wordt de schatting van de huidige gebruiker vergeleken met het juiste antwoord en wordt een hint teruggestuurd naar de gebruiker.

  

Het gameprogramma ontwerpen

Wanneer u een complex programma maakt, moet u beginnen met een ontwerpplan.

Veel van het werk in de ontwikkeling van games gebeurt voordat u begint met programmeren. Als je het spel goed ontwerpt, is het programmeren veel gemakkelijker. Een game-ontwerp helpt je veel dingen over het spel te begrijpen voordat je begint met het schrijven van code:

• Algemene layout: Hoewel de lay-out niet helemaal bepaald is door deze tekening, is het gemakkelijk om de algemene look te zien.

• Benoemde elementen: Elk element dat een naam moet hebben, is bepaald en de namen zijn in het document geschreven. Sommige elementen (zoals de eerste knop) hebben geen namen nodig omdat ze niet in code worden genoemd.

• Knopfuncties: Elke knop roept een functie aan. Het diagram geeft aan welke functie elke knop zal oproepen.

• Functieplannen: Elke functie is gepland met een Engelstalige beschrijving van wat de functie zal doen.

• Algemene variabelen: De variabelen die moeten worden gedeeld tussen functies worden beschreven.

Het is eigenlijk moeilijk om een ​​goed ontwerpdocument te maken, maar dat maakt het programmeren een stuk eenvoudiger. Het is moeilijk om erachter te komen wat je probeert te doen, en het is ook moeilijk om erachter te komen hoe dit moet. Het hebben van een ontwerpdocument scheidt die twee processen, zodat je je eerst kunt concentreren op wat je aan het doen bent, en je dan zorgen maakt over hoe je het gaat doen.

De HTML-code voor het spel maken

De HTML-code voor het aantal raden is vrij eenvoudig te schrijven als u het spel eerst op papier hebt ontworpen. Hier is de code:

Number Guesser

Number Guesser
Ik denk aan een getal tussen 0 en 100. Raad eens met mijn nummer, en ik zal zeggen of je te hoog, te laag of juist bent. Uw gok Controleer uw gissing probeer opnieuw

Het is goed om HTML, CSS en JavaScript te scheiden, omdat u met deze oefening een groot probleem kunt 'verdelen en veroveren' in een aantal kleinere problemen. Dit zijn de belangrijkste kenmerken van het HTML-document:

1. Link naar de CSS in een extern bestand.

   Op dit moment is de CSS niet kritisch, dus u verplaatst het naar een apart bestand zodat u er later mee kunt werken.

2. De JavaScript-code uitbesteden.

   U verplaatst de JavaScript-code ook naar een extern bestand, zodat u zich hier nog geen zorgen over hoeft te maken. Maak in de HTML-code eenvoudig de koppelingen naar de externe bestanden.

3. Bouw een formulier als hoofdcomponent van de pagina.

   Het belangrijkste aspect van deze pagina is het formulier. Zoals bij de meeste formulieren, heeft het een veldset, labels, invoerelementen en knoppen.

4. Maak een div voor uitvoer.

   De output-div is gewoon een gewone div. Je plaatst het in de veldset zodat het een visuele link naar de rest van het formulier behoudt. Je kunt standaardtekst in de div plaatsen (hoewel je deze tekst waarschijnlijk later zal veranderen). Omdat de div wordt doorverwezen via code, heeft deze een id-attribuut nodig.

5. Maak een invoergebied voor de schatting van de gebruiker.

   De gebruiker moet een soort numerieke invoer typen. Gebruik hiervoor een input-element. Raadpleeg uw documentatie om de id van dit element te onthouden. (U heeft een ontwerpdocument gemaakt, toch?) Het is goed om een ​​label aan de invoer toe te voegen, zodat de gebruiker weet wat daar wordt verwacht.

6. Bouw een knop om de schatting te controleren.

   De gebruiker maakt geen schatting totdat deze op de knop Check Your Guess klikt. Dus je moet echt zo'n knop hebben. Deze knop heeft geen naam nodig, maar wel de functie checkGuess ().

7. Bouw een tweede knop om opnieuw te beginnen.

   Een interessante functie van dit programma is een knop waarmee de gebruiker opnieuw kan opstarten. Deze tweede knop is alleen beschikbaar als de gebruiker het antwoord correct heeft geraden. Je maakt het met gewone HTML en gebruikt CSS- en JavaScript-trucs om het te laten verdwijnen en op aanvraag te verschijnen.