Hur man bygger Number Guesser i ditt HTML5-spel - dummies

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

Den använder webbsidan som gränssnitt. Liksom många JavaScript-program använder den en webbsida som användargränssnitt. Ett inmatningselement används för inmatning, en div är huvudutmatningselementet och en knapp utlöser alla åtgärder.
Den använder CSS för styling. De olika delarna av sidan är formaterade med CSS. CSS lagras i ett externt stilark för bekvämlighet och återanvändning.
Det berättar användaren hur många varv hon har tagit. På varje passering påminner datorn användaren hur många varv som har hänt.
När användaren gissat korrekt visas en omstartsknapp. Den här knappen är gömd först och visas bara när den behövs.
Det rätta svaret är tillgängligt för programmerare via en särskild debugging-funktion. När programmet testas kan utvecklaren se vad det korrekta svaret är, men denna information är dold från användaren.
En init () -funktionen börjar spelet. Funktionen init () 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 ansluten till knappen. När användaren klickar på knappen Kontrollera din gissning jämförs den aktuella användarens gissning med det rätta svaret och en hint returneras till användaren.

Hur man utformar spelprogrammet

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

Mycket av arbetet med spelutveckling händer innan du börjar programmera. Om du designar spelet bra, är programmeringen mycket lättare att göra. En speldesign hjälper dig att förstå många saker om spelet innan du börjar skriva kod:

Allmän layout: Medan layouten inte helt bestäms av den här ritningen är det lätt att se det allmänna utseendet.
Namngivna element: Varje element som behöver ha ett namn har fastställts och namnen är skrivna på dokumentet. Vissa element (som den första knappen) behöver inte namn eftersom de inte kommer att hänvisas till i kod.
Knappfunktioner: Varje knapp ringer en funktion. Diagrammet indikerar vilken funktion varje knapp ska ringa.
Funktionsplaner: Varje funktion planeras med en engelskspråkig beskrivning av vad funktionen ska göra.
Globala variabler: De variabler som behöver delas mellan funktioner beskrivs.

Det är faktiskt svårt att skapa ett bra designdokument, men det gör programmeringen ganska lättare. Det är svårt att ta reda på 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 skiljer de två processerna så att du kan koncentrera dig på vad du gör och oroa dig för hur du ska göra. Hur man bygger HTML för spelet

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

Number Guesser

Number Guesser

Jag tänker på ett tal mellan 0 och 100. Gissa mitt nummer och jag kommer att berätta om du är för hög, för låg eller korrekt. Din gissning kontrollera din gissning försök igen
Det är trevligt att skilja HTML, CSS och JavaScript eftersom den här praktiken gör att du kan "dela och erövra" ett stort problem i ett antal mindre problem. Här är huvuddragen i HTML-dokumentet:

Länk till CSS i en extern fil.

För närvarande är CSS inte kritisk, så du flyttar den till en separat fil så att du kan arbeta med det senare.

Outsource JavaScript-koden.
Du flyttar också JavaScript-koden till en extern fil så du behöver inte oroa dig för det ännu. I HTML-koden gör du bara länkarna till de externa filerna.

Bygg ett formulär som huvudkomponenten på sidan.
Den viktigaste aspekten av denna sida är formuläret. Liksom de flesta former, kommer det att ha en fältuppsättning, etiketter, ingående element och knappar.

Skapa en div för utdata.
Utdata div är bara en vanlig div. Du lägger den inuti fältet så att den bibehåller en visuell länk till resten av formuläret. Du kan lägga standardtext i div (även om du förmodligen kommer att ändra texten senare). Eftersom div kommer att hänvisas till via kod, behöver den ett id-attribut.

Gör ett inmatningsområde för användarens gissning.
Användaren måste skriva en sorts numerisk ingång. Använd ett inmatningselement för detta ändamål. Se din dokumentation för att komma ihåg iden för detta element. (Du

gjorde ett designdokument, eller hur?) Det är trevligt att lägga till en etikett till inmatningen så att användaren vet vad som förväntas där. Bygg en knapp för att kontrollera gissningen.
Användaren begår inte gissning tills hon klickar på knappen Kontrollera din gissning. Så, du behöver verkligen ha en sådan knapp. Den här knappen behöver inte ett namn, men det kommer att ringa till funktionen checkGuess ().

Bygg en andra knapp för att starta igen.
En intressant egenskap hos det här programmet är en knapp som låter användaren starta om. Den här andra knappen är endast tillgänglig när användaren korrekt gissat svaret. Du skapar det med vanligt HTML och använder CSS och JavaScript-tricks för att få det att försvinna och visas på begäran.