Hur man bygger Number guesser i ditt HTML5 spel

October 24

Med slumptal, kan du göra intressanta HTML5 spel. Ta en titt på ett enkelt spel som använder HTML, CSS och JavaScript tillsammans. Detta spel har ett antal intressanta funktioner:

  • Den använder webbsidan som gränssnittet. Liksom många Javascript-program, använder den en webbsida som användargränssnitt. Ett inmatningselement används för inmatning, en div är huvudutgångselementet, och en knapp utlöser alla åtgärder.
  • Den använder CSS för styling. De olika delar av sidan är formaterade med CSS. CSS lagras i en extern formatmall för bekvämlighet och återanvändbarhet.
  • Det talar om för användaren hur många varv hon har tagit. På varje pass, påminner datorn användaren hur många varv har hänt.
  • När användaren har gissat rätt, visas en omstart knapp. Denna knapp är dolt i början, och visas bara när det behövs.
  • Det rätta svaret är tillgänglig för programmerare genom en speciell felsökning funktionen. Medan testa programmet, kan utvecklaren se vad det rätta svaret är, men denna information är dold från användaren.
  • En init () funktionen börjar spelet. Init () funktionen initierar spelet. Det kallas när programmet först börjar och igen när användaren vill börja om.
  • En annan funktion är kopplad till knappen. När användaren klickar på Kontrollera din gissning knappen, den aktuella användarens gissning är jämfört med det rätta svaret, och en antydan returneras till användaren.

    Hur man bygger Number guesser i ditt HTML5 spel

Hur utforma spelprogrammet

När du bygger ett komplext program, måste du börja med en arbetsplan.

Hur man bygger Number guesser i ditt HTML5 spel

Mycket av arbetet i spelutveckling händer innan du börjar programmeringen. Om du designar spelet väl, är mycket lättare att göra programmeringen. Ett spel design hjälper dig att förstå många saker om spelet innan du börjar skriva kod:

  • Allmän layout: Även layouten är inte helt bestämt av denna ritning, är det lätt att se den allmänna utseende.
  • Namngivna element: Varje element som måste ha ett namn har bestämts, och namnen är skrivna på dokumentet. Vissa element (som den första knappen) behöver inte namnen eftersom de inte kommer att hänvisas till i kod.
  • Knappfunktioner: Varje knapp kommer att ringa en funktion. Diagrammet visar vilken funktion varje knapp kommer att ringa.
  • Funktion planer: Varje funktion planeras ut med en engelskspråkig beskrivning av vad funktionen gör.
  • Globala variabler: Variablerna som måste delas mellan funktioner beskrivs.

Det är faktiskt svårt att skapa en bra design dokument, men att göra så gör programmeringen ganska lite lättare. Det är svårt att räkna ut vad du försöker göra, och det är också svårt att räkna ut hur man gör det. Att ha ett designdokument separerar dessa två processer så att du först kan koncentrera sig på vad du gör, och sedan oroa sig för hur man ska göra det.

Hur man bygger HTML för spelet

HTML-koden för antalet-gissningslek är ganska lätt att skriva om du har utformat spelet på papper först. Här är koden:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> Antal guesser </ title>
<Link rel = "stylesheet"
type = "text / css"
href = "numGuess.css" />
<Script type = "text / javascript"
src = "numGuess.js"> </ script>
</ Head>
<Body onload = "init ()">
<H1> Antal guesser </ h1>
<Form>
<Fieldset>
<Div id = "output">
Jag tänker på ett tal mellan 0 och 100.
Gissa mitt nummer, och jag ska berätta om du är
för högt, för lågt, eller korrekt.
</ Div>
<Etikett för = ""> Din Guess </ label>
<Input type = "text"
id = "txtGuess">
<-knappen Type = "knapp"
onclick = "checkGuess ()">
kontrollera din gissning
</ -knappen>
<-knappen Type = "knapp"
id = "igen"
onclick = "init ()">
försök igen
</ Reset>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Det är trevligt att separera HTML, CSS och JavaScript eftersom denna praxis tillåter dig att "söndra och härska" ett stort problem i ett antal mindre problem. Här är de viktigaste funktionerna i HTML-dokument:

  1. Länk till CSS i en extern fil.

    Just nu är det CSS inte kritisk, så du flyttar den ut i en separat fil så att du kan arbeta med det senare.
  2. Outsourca JavaScript-koden.

    Du flyttar även JavaScript-kod i en extern fil så du behöver inte oroa dig för det ännu. I HTML-koden, helt enkelt göra kopplingar till externa filer.
  3. Bygg en form som huvudkomponent på sidan.

    Den viktigaste aspekten av denna sida är formen. Liksom de flesta former, kommer det att ha en fieldset, etiketter, inmatningselement, och knappar.
  4. Skapa en div för utgång.

    Utgången div är bara en vanlig div. Du sätter den innanför fieldset så det kommer att behålla en visuell länk till resten av formuläret. Du kan sätta standardtext inuti div (fast du kommer förmodligen ändra denna text senare). Eftersom div kommer att hänvisas till genom kod, behöver den en id-attribut.
  5. Gör en inmatningsområde för användarens gissning.

    Användaren kommer att behöva skriva någon form av numerisk inmatning. Använd ett inmatningselement för detta ändamål. Se din dokumentation för att minnas id detta element. (Du gjorde ett designdokument, eller hur?) Det är trevligt att lägga till en etikett till ingången så att användaren vet vad som förväntas där.
  6. Bygg en knapp för kontroll av gissning.

    Användaren behöver inte begå en gissning tills hon klickar på knappen Kontrollera din gissning. Så, du måste verkligen ha en sådan knapp. Denna knapp behöver inte ett namn, men det kommer att anropa checkGuess () funktionen.
  7. Bygg en andra knapp för att börja om.

    Ett intressant inslag i detta program är en knapp som gör att användaren kan starta. Denna andra knappen är bara tillgänglig när användaren har rätt gissat svaret. Du skapar det med vanlig HTML och använda CSS och JavaScript knep för att få den att försvinna och visas på efterfrågan.