Hvordan man bygger Number Guesser i dit HTML5 Game - dummies

Med tilfældige tal kan du lave interessante HTML5-spil. Tag et kig på et simpelt spil, der bruger HTML, CSS og JavaScript sammen. Dette spil har en række interessante funktioner:

• Det bruger websiden som interface. Ligesom mange JavaScript-programmer bruger den en webside som brugergrænseflade. Et input element bruges til input, en div er det vigtigste output element, og en knap udløser alle handlinger.

• Det bruger CSS til styling. De forskellige dele af siden er formateret med CSS. CSS'en er gemt i et eksternt stilark for nemheds skyld og genbrugelighed.

• Det fortæller brugeren, hvor mange drejninger hun har taget. På hver enkelt passage minder computeren brugeren om, hvor mange drejninger der er sket.

• Når brugeren har gættet korrekt, vises en genstart-knap. Denne knap er skjult først og vises kun, når det er nødvendigt.

• Det rigtige svar er tilgængelig for programmører via en særlig debugging-funktion. Under test af programmet kan udvikleren se, hvad det korrekte svar er, men disse oplysninger er skjult for brugeren.

• En init () -funktion starter spillet. Funktionen init () initialiserer spillet. Det kaldes, når programmet først begynder og igen, når brugeren ønsker at starte igen.

• En anden funktion er knyttet til knappen. Når brugeren klikker på knappen Check Your Guess, sammenlignes den aktuelle brugers gæt med det rigtige svar, og et tip returneres til brugeren.

  

Sådan designes spilprogrammet

Når du bygger et komplekst program, skal du begynde med en designplan.

Meget af arbejdet i spiludvikling sker, inden du begynder at programmere. Hvis du designer spillet godt, er programmeringen meget nemmere at gøre. Et spildesign hjælper dig med at forstå mange ting om spillet, inden du begynder at skrive kode:

• Generelt layout: Mens layoutet ikke er helt bestemt af denne tegning, er det nemt at se det generelle udseende.

• Navngivne elementer: Hvert element, der skal have et navn, er blevet bestemt, og navnene er skrevet på dokumentet. Nogle elementer (som den første knap) behøver ikke navne, fordi de ikke bliver henvist til i kode.

• Knapfunktioner: Hver knap kalder en funktion. Diagrammet angiver, hvilken funktion hver knap vil kalde.

• Funktionsplaner: Hver funktion er planlagt ud med en engelsksproglig beskrivelse af, hvad funktionen vil gøre.

• Globale variabler: De variabler, der skal deles mellem funktioner, beskrives.

Det er faktisk svært at oprette et godt designdokument, men det gør programmeringen ret lettere. Det er svært at finde ud af, hvad du forsøger at gøre, og det er også svært at finde ud af, hvordan man gør det. At have et designdokument adskiller disse to processer, så du kan først koncentrere dig om hvad du gør, og så bekymre dig om hvordan du skal gøre det.

Sådan oprettes HTML'en til spillet

HTML-koden til nummergætningsspillet er ret nemt at skrive, hvis du først har designet spillet på papir. Her er koden:

Number Guesser

Number Guesser
Jeg tænker på et tal mellem 0 og 100. Gæt mit nummer, og jeg vil fortælle om du er for høj, for lav eller korrekt. Din gætte skal du tjekke dit gæt, prøv igen

Det er rart at adskille HTML, CSS og JavaScript, fordi denne praksis giver dig mulighed for at "dele og erobre" et stort problem i en række mindre problemer. Her er hovedelementerne i HTML-dokumentet:

1. Link til CSS i en ekstern fil.

   CSS er for øjeblikket ikke kritisk, så du flytter den til en separat fil, så du kan arbejde senere.

2. Outsource JavaScript-koden.

   Du flytter også JavaScript-koden til en ekstern fil, så du behøver ikke bekymre dig om det endnu. I HTML-koden skal du blot oprette linkene til de eksterne filer.

3. Byg en formular som hovedkomponenten på siden.

   Det vigtigste aspekt af denne side er formularen. Ligesom de fleste former vil det have et feltsæt, etiketter, inputelementer og knapper.

4. Opret en div for output.

   Output-diven er bare en almindelig div. Du sætter det inde i feltet, så det vil opretholde et visuelt link til resten af ​​formularen. Du kan sætte standardtekst inde i div (selvom du sandsynligvis vil ændre denne tekst senere). Fordi div'en skal henvises til via kode, skal den have en id-attributt.

5. Lav et indtastningsområde for brugerens gæt.

   Brugeren skal indtaste en slags numerisk indgang. Brug et inputelement til dette formål. Se din dokumentation for at huske dette elements id. (Du lavede et designdokument, ikke?) Det er rart at tilføje en etiket til indgangen, så brugeren ved hvad der forventes der.

6. Byg en knap for at kontrollere gættet.

   Brugeren begår ikke gætte, før hun klikker på knappen Check Your Guess. Så du skal virkelig have en sådan knap. Denne knap behøver ikke et navn, men det kalder funktionen checkGuess ().

7. Byg en anden knap for at starte igen.

   Et interessant element i dette program er en knap, der gør det muligt for brugeren at genstarte. Denne anden knap er kun tilgængelig, når brugeren korrekt har gættet svaret. Du opretter det med almindeligt HTML og bruger CSS og JavaScript tricks til at gøre det forsvinde og vises på forespørgsel.