Hvordan bygge nummer Guesser i din HTML5 spill

December 11  by Eliza

Med tilfeldige tall, kan du gjøre 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 for inngang, en div er hovedtransmisjonselementet, og en knapp utløser alle handlinger.
  • Den bruker CSS for styling. De ulike deler av siden er formatert med CSS. CSS er lagret i et eksternt stilark for bekvemmelighet og gjenbruk.
  • Det forteller brukeren hvor mange svinger hun har tatt. På hver passering, minner datamaskinen brukeren hvor mange svinger ha skjedd.
  • Når brukeren har gjettet riktig, vises en Restart-knappen. Denne knappen er skjult i starten, og vises bare når det er nødvendig.
  • Det riktige svaret er tilgjengelig for programmerere gjennom en spesiell debugging funksjonen. Mens teste programmet, kan utvikleren se hva det riktige svaret er, men denne informasjonen er skjult for brukeren.
  • En init () -funksjonen begynner spillet. Den init () funksjonen initialiserer spillet. Det kalles når programmet først begynner og igjen når brukeren ønsker å starte på nytt.
  • En annen funksjon er knyttet til knappen. Når brukeren klikker på Sjekk Din Guess-knappen, den gjeldende brukerens gjetning er i forhold til det riktige svaret, og et hint returneres til brukeren.

    Hvordan bygge nummer Guesser i din HTML5 spill

Hvordan å designe spillet program

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

Hvordan bygge nummer Guesser i din HTML5 spill


Mye av arbeidet i spillutvikling som skjer før du begynner programmering. Hvis du designe spillet godt, er programmerings mye enklere å gjøre. En spilldesign hjelper deg å forstå mange ting om spillet før du begynner å skrive kode:

  • Generell layout: Mens oppsettet ikke er helt bestemt av denne tegningen, er det lett å se det generelle utseendet.
  • Navngitte elementer: Hvert element som må ha et navn har blitt bestemt, og navnene er skrevet på dokumentet. Noen elementer (som den første knappen) trenger ikke navn fordi de ikke vil bli referert til i koden.
  • Knappefunksjoner: Hver knapp vil kalle en funksjon. Diagrammet angir hvilken funksjon hver knapp vil ringe.
  • Funksjon planer: Hver funksjon er planlagt ut med en engelskspråklig beskrivelse av hva funksjonen vil gjøre.
  • Globale variabler: Variablene som må deles mellom funksjonene er beskrevet.

Det er faktisk vanskelig å lage en god designdokument, men dette gjør programmeringen mye 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 kan først konsentrere seg om hva du gjør, og deretter bekymre deg for hvordan du skal gjøre det.

Hvordan bygge HTML for spillet

HTML-koden for antall-gjettelek er ganske lett å skrive om du har utviklet spillet på papir først. Her er koden:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> Nummer Guesser </ title>
<Link rel = "stylesheet"
type = "text / css"
href = "numGuess.css" />
<Script type = "text / javascript"
src = "numGuess.js"> </ script>
</ Head>
<Body onload = "init ()">
<H1> Nummer Guesser </ h1>
<Form>
<Fieldset>
<Div id = "output">
Jeg tenker på et tall mellom 0 og 100.
Gjett nummeret mitt, og jeg skal fortelle om du er
for høy, for lav eller riktig.
</ Div>
<Label for = ""> Din Guess </ label>
<Input type = "text"
id = "txtGuess">
<-knappen Type = "button"
onclick = "checkGuess ()">
sjekk din gjetning
</ Knapp>
<-knappen Type = "button"
id = "nytt"
onclick = "init ()">
prøv igjen
</ Reset>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Det er fint å skille HTML, CSS og Javascript fordi denne praksisen gjør at du kan "splitt og hersk" et stort problem i en rekke mindre problemer. Her er de viktigste funksjonene i HTML-dokumentet:

  1. Link til CSS i en ekstern fil.

    I øyeblikket er det CSS ikke kritisk, slik at du flytter den ut i en egen fil slik at du kan jobbe med det senere.

  2. Outsource Javascript-kode.

    Du også flytte Javascript-kode til en ekstern fil, slik at du ikke trenger å bekymre deg for det ennå. I HTML-koden, bare gjøre sammenhengen til eksterne filer.

  3. Bygge en form som den viktigste komponenten av siden.

    Det viktigste aspektet ved denne siden er den formen. Som de fleste former, vil det ha en fieldset, etiketter, input elementer og knapper.

  4. Lag en div for utgang.

    Utgangen div er bare en vanlig div. Du setter den på innsiden av fieldset så det vil opprettholde en visuell forbindelse til resten av skjemaet. Du kan sette standard tekst inne i div (selv om du vil trolig endre denne teksten senere). Fordi div vil bli referert til gjennom kode, må det en id-attributt.

  5. Gjør en inngang område for brukerens gjetning.

    Brukeren må skrive en slags tall innspill. Bruke et inngangselement for dette formål. Se dokumentasjonen for å huske den id av dette elementet. (Du gjorde et designdokument, ikke sant?) Det er fint å legge til en etikett til inngangen slik at brukeren vet hva som forventes der.

  6. Bygge en knapp for å sjekke gjetning.

    Brukeren trenger ikke begå en gjetning før hun klikker på Sjekk Din Guess-knappen. Så, du virkelig trenger å ha en slik knapp. Denne knappen trenger ikke et navn, men det vil ringe checkGuess () -funksjonen.

  7. Bygg en annen knapp for å starte på nytt.

    Et interessant trekk ved dette programmet er en knapp som gjør det mulig for brukeren å starte på nytt. Denne andre knappen er bare tilgjengelig når brukeren har riktig gjettet svaret. Du lage den med vanlig HTML og bruk CSS og Javascript triks for å gjøre det forsvinne og dukke opp på etterspørsel.