Hvordan du bygger nummerguesser i HTML5-spillet ditt - dummier

Med tilfeldige tall kan du lage interessante HTML5-spill. Ta en titt på et enkelt spill som bruker HTML, CSS og JavaScript sammen. Dette spillet har en rekke interessante funksjoner:

Den bruker nettsiden som grensesnitt. Som mange JavaScript-programmer, bruker den en nettside som brukergrensesnitt. Et inngangselement brukes til input, en div er hovedutgangselementet, og en knapp utløser alle handlinger.
Den bruker CSS til styling. De ulike delene av siden er formatert med CSS. CSS er lagret i et eksternt stilark for enkelhets skyld og gjenbruk.
Det forteller brukeren hvor mange svinger hun har tatt. På hvert pass minner datamaskinen på brukeren hvor mange svinger som har skjedd.
Når brukeren gjettet riktig, vises en Restart-knapp. Denne knappen er skjult først, og vises kun når det er nødvendig.
Det riktige svaret er tilgjengelig for programmører via en spesiell feilsøkingsfunksjon. Når programmet testes, kan utvikleren se hva det riktige svaret er, men denne informasjonen er skjult for brukeren.
En init () -funksjonen starter spillet. init () -funksjonen initierer spillet. Det kalles når programmet først begynner og igjen når brukeren ønsker å starte over.
En annen funksjon er festet til -knappen. Når brukeren klikker på knappen Kontroller gjetning, blir gjeldende bruker gjetning sammenlignet med det riktige svaret, og et hint blir returnert til brukeren.

Slik utformer du spillprogrammet

Når du bygger et komplekst program, må du begynne med en designplan.

Mye av arbeidet i spillutvikling skjer før du begynner programmering. Hvis du designer spillet godt, er programmeringen mye lettere å gjøre. Et spilldesign hjelper deg med å forstå mange ting om spillet før du begynner å skrive kode:

Generell oppsett: Mens utformingen ikke er helt bestemt av denne tegningen, er det lett å se det generelle utseendet.
Navngitte elementer: Hvert element som må ha et navn er bestemt, og navnene er skrevet på dokumentet. Noen elementer (som den første knappen) trenger ikke navn fordi de ikke blir henvist til i kode.
Knappfunksjoner: Hver knapp vil ringe en funksjon. Diagrammet viser hvilken funksjon hver knapp vil ringe.
Funksjonsplaner: Hver funksjon er planlagt med en engelskspråklig beskrivelse av hva funksjonen skal gjøre.
Globale variabler: Variablene som må deles mellom funksjoner, er beskrevet.

Det er faktisk vanskelig å lage et godt designdokument, men det gjør programmeringen ganske enklere. Det er vanskelig å finne ut hva du prøver å gjøre, og det er også vanskelig å finne ut hvordan du gjør det. Å ha et designdokument skiller disse to prosessene slik at du først kan konsentrere deg om hva du gjør, og så bekymre deg for hvordan du skal gjøre det.

Slik bygger du HTML-koden for spillet

HTML-koden for nummergitte spillet er ganske enkelt å skrive hvis du først har designet spillet på papir. Her er koden:

Number Guesser

Number Guesser
Jeg tenker på et tall mellom 0 og 100. Gjett mitt nummer, og jeg forteller om du er for høy, for lav eller riktig. Din gjetning sjekke gjetningen, prøv igjen

Det er hyggelig å skille HTML, CSS og JavaScript fordi denne praksisen lar deg "dele og erobre" et stort problem i en rekke mindre problemer. Her er hovedtrekkene i HTML-dokumentet:

Link til CSS i en ekstern fil.

For øyeblikket er CSS ikke kritisk, så du flytter den til en egen fil slik at du kan jobbe med det senere.
Outsource JavaScript-koden.

Du flytter også JavaScript-koden til en ekstern fil, slik at du ikke trenger å bekymre deg om det ennå. I HTML-koden, gjør du bare koblingene til de eksterne filene.
Bygg et skjema som hovedkomponent på siden.

Det viktigste aspektet av denne siden er skjemaet. Som de fleste skjemaer vil det ha et feltsett, etiketter, inngangselementer og knapper.
Lag en div for utdata.

Utdata-diven er bare en vanlig div. Du legger den inne i feltet slik at den vil opprettholde en visuell lenke til resten av skjemaet. Du kan sette standardtekst inne i div (selv om du sannsynligvis vil endre denne teksten senere). Fordi diven skal henvises til via kode, trenger den et id-attributt.
Lag et innspillingsområde for brukerens gjetning.

Brukeren må skrive inn en slags numerisk inngang. Bruk et innspillingselement til dette formålet. Se dokumentasjonen din for å huske ID for dette elementet. (Du gjorde lage et designdokument, ikke sant?) Det er fint å legge til en etikett på inngangen, slik at brukeren vet hva som forventes der.
Bygg en knapp for å sjekke gjetningen.

Brukeren forplikter seg ikke til hun klikker på knappen Kontroller gjetningen din. Så, du trenger virkelig å ha en slik knapp. Denne knappen trenger ikke et navn, men det vil ringe funksjonen checkGuess ().
Bygg en ekstra knapp for å starte på nytt.

En interessant funksjon i dette programmet er en knapp som lar brukeren starte om igjen. Denne andre knappen er bare tilgjengelig når brukeren har korrekt gjettet svaret. Du lager den med vanlig HTML og bruker CSS og JavaScript-triks for å få det til å forsvinne og vises på forespørsel.