Hvordan du lager tilfeldige tall i HTML5-spillet ditt - dummies

Tilfeldige tall er en viktig del av HTML5-spillprogrammeringen. Ofte vil du ha en slags tilfeldig oppførsel. Dette brukes til å etterligne universets kompleksitet og uforutsigbarhet. De fleste språk har en tilfeldig talegenerator innebygd. Denne spesielle funksjonen produserer en slags semi-tilfeldig tall. Ofte må du gjøre litt manipulasjon for å få tallet til å passe til mønsteret du vil ha.

Siden virker litt kompleks, men det beskriver et kraftig og fleksibelt system, når du vet hvordan du bruker det. Her er hva som skjer:

1. JavaScript genererer et tilfeldig tall.

   Ulike språk gjør dette på forskjellige måter, men JavaScript har en funksjon som lager en tilfeldig flytpunktsverdi mellom 0 og 1. Denne verdien vises i råboksen.

2. Multipliser den råverdien med 100.

   I dette eksemplet vil du ha et tall mellom 1 og 100. Hvis du multipliserer en 0-til-1 med 100, får du 0 til 99. 9999 (med mange niner) verdi. Det kommer nærmere. Tider 100 boks viser råverdien etter at den har blitt multiplisert med 100.

3. Konverter det store tallet til et heltall.

   Brukeren kommer aldri til å gjette et tall med 17 steder etter desimal, så du trenger et heltall. JavaScript har en rekke måter å konvertere en float til et heltall. For å få 1 til 100 oppførsel du leter etter, bruker du en metode som heter Math. ceil. Det endelige resultatet er vist i den endelige boksen.

Her er koden i sin helhet:

rand100. html-feltet {bredde: 600px; margin-høyre: auto; margin-left: auto;} label {float: left; bredde: 250px; tekstjustering: høyre; margin-høyre: 1em; fjern: venstre;} span {float: left;} button {display: block; klare: begge; margin: auto;} funksjonsrulle () {// lager variabler for skjemaelementer var spnRaw = dokument. getElementById ("spnRaw"); var spn100 = dokument. getElementById ("spn100"); var spnFinal = dokument. getElementById ("spnFinal"); // få tilfeldig nummer var rå = Matematikk. tilfeldig(); spnRaw. innerHTML = rå; // multiplisere med 100 var times100 = rå * 100; spn100. innerHTML = times100; // få taket var endelig = matematikk. ceil (times100); spnFinal. innerHTML = final;} // end roll

Lag tilfeldige tall 1 - 100
rå 0 ganger 100 0 endelig 0 rull terningene

Bruk matte for spillkoden din

For å gjøre dette programmet til å fungere, trenger å ringe inn det ultimate våpenet av geekiness: Math.

JavaScript har et flott bibliotek kalt Math . Matematikkbiblioteket har noen virkelig geeky godhet begravet i det, som en rekke vanlige matematiske funksjoner, samt konstanter (som pi) og noen andre bruksfunksjoner for å jobbe med tall.

Først er selvfølgelig funksjonen som genererer tilfeldige tall. Det heter Math. tilfeldig().

Du må virkelig si Math. tilfeldig(). Hvis du kaller tilfeldig () alt for seg, vil JavaScript ikke vite hva du snakker om.

Matematikken. random () -funksjonen produserer et semi-tilfeldig tall. (Det er ikke veldig tilfeldig, men produseres via en kompleks formel fra et annet tall.) Slumre tallet vil være en flytende punktverdi mellom 0 og 1. Dette virker ikke nyttig, men med litt matte kan du konvertere verdien 0 til 1 til et hvilket som helst annet område du ønsker.

I tillegg til tilfeldig () -funksjonen har Math-objektet en rekke funksjoner som lar deg konvertere en flytende punktverdi (det vil si et tall med et desimaltegn) til et heltall (du har det - et tall uten et desimalpunkt). Standard parseInt () -metoden er innebygd i JavaScript, men noen ganger vil du gjøre en mer avansert konvertering. Math-biblioteket har et antall av disse verktøyene:

• Math. runde (): Konverterer et tall ved hjelp av standardrundingsalgoritmen. Hvis desimaldelen er. 5 eller mindre, er det minste heltal valgt; hvis desimaldelen er større enn. 5, er det større heltal valgt. Dette betyr at 3. 1 runder til 3 og 3. 8 runder til 4.

• Math. gulv (): Denne funksjonen rundes alltid ned, så 3. 1 og 3. 8 blir begge 3. Funksjonen parseInt () er identisk med Math. gulv().

• Math. tak (): Denne funksjonen (få den - takfunksjonen) rundes alltid opp, så 3. 1 og 3. 8 begge ender opp som 4.

Funksjonen du trenger, avhenger av de spesifikke omstendighetene.

Hvordan lage HTML-spill skjemaet

Som alltid danner HTML grunnlaget for et hvilket som helst JavaScript-program. Det viktigste her er skjemaet som gir brukergrensesnittet. Dette skjemaet har noen forutsigbare funksjoner:

• Et span for å holde rådataene: Det er egentlig ingenting for brukeren å skrive, så bruk et spenning for de ulike utgangselementene. Spans er en generisk inline-tag. De er flotte for situasjoner som dette, der du trenger litt enkelt utgangselement som kan være inline med hovedstrømmen på siden. Den rå dataspannen heter (her går du …) spnRaw.

• Et annet span for times100 data: Når programmet utfører beregningene, vil det vise utgangen.

• En tredje span for den endelige utgangen: Etter at alle beregningene er ferdige, trenger du en måte å vise ditt strålende arbeid. SpnFinal vil tjene denne hensikten.

• Etiketter for å gjøre alt klart: Uten etiketter forklarer hva som skjer, vil det bare være en rekke tall på skjermen. Ikke glem å legge til etiketter selv til enkle eksempler, slik at brukeren kan finne ut hva som skjer.

• En knapp for å starte all handling: Ingenting vil skje før brukeren ber om det, så legg til en knapp i skjemaet. Når knappen klikkes, ring den til rullefunksjonen () for å rulle et nummer.

• CSS for å gjøre alt ser bra ut: HTML uten CSS er stygg, så legg til nok CSS for å gjøre HTML-skjemaet ser anstendig ut.