Sådan oprettes tilfældige tal i dit HTML5-spil - dummies

Tilfældige tal er en vigtig del af HTML5-spilprogrammering. Ofte vil du have en form for tilfældig adfærd. Dette bruges til at efterligne universets kompleksitet og uforudsigelighed. De fleste sprog har en tilfældig talegenerator indbygget. Denne specielle funktion producerer en slags semi-tilfældigt tal. Ofte skal du lave manipulation for at få nummeret til at passe det mønster, du ønsker.

Siden virker lidt kompleks, men den beskriver et kraftigt og fleksibelt system, når du ved, hvordan du bruger det. Her er hvad der sker:

1. JavaScript genererer et tilfældigt tal.

   Forskellige sprog gør det på forskellige måder, men JavaScript har en funktion, der skaber en tilfældig svingpunktsværdi mellem 0 og 1. Denne værdi vises i råboksen.

2. Multiplicér den rå værdi med 100.

   I dette eksempel vil du have et tal mellem 1 og 100. Hvis du formere en 0-til-1 med 100, får du 0 til 99. 9999 (med mange næser) værdi. Det kommer nærmere. Tiderne 100 boks viser den rå værdi, efter at den er blevet multipliceret med 100.

3. Konverter det store tal til et helt tal.

   Brugeren vil aldrig gætte et tal med 17 steder efter decimaltalet, så du har brug for et helt tal. JavaScript har en række måder at konvertere en float til et helt tal. For at få den 1 til 100 opførsel, du leder efter, bruger du en metode kaldet Math. ceil. Det endelige resultat er vist i den endelige boks.

Her er koden i sin helhed:

rand100. html fieldset {bredde: 600px; margin-højre: auto; margin-left: auto;} label {float: left; bredde: 250px; tekst-align: højre; margen-højre: 1em; clear: left;} span {float: left;} knap {display: block; klare: begge; margin: auto;} funktionsrulle () {// oprette variabler for formelementer var spnRaw = dokument. getElementById ("spnRaw"); var spn100 = dokument. getElementById ("spn100"); var spnFinal = dokument. getElementById ("spnFinal"); // få tilfældigt tal var rå = matematik. tilfældig(); spnRaw. innerHTML = rå; // multiplicere med 100 var times100 = rå * 100; spn100. innerHTML = times100; // Få loftet var endelig = Math. ceil (times100); spnFinal. innerhTML = endelig;} // end roll

Lav tilfældige tal 1 - 100
rå 0 gange 100 0 endelig 0 rul terningerne

Brug matematik til din spilkode

For at gøre dette program til at fungere, skal du nødt til at ringe i det ultimative våben af ​​geekiness: Math.

JavaScript har et vidunderligt bibliotek kaldet Math . Matematikbiblioteket har nogle virkelig geeky godhed begravet i det, som en række almindeligt anvendte matematiske funktioner samt konstanter (som pi) og et par andre hjælpefunktioner til at arbejde med tal.

For det første er det selvfølgelig den funktion, der genererer tilfældige tal. Det hedder Math. tilfældig().

Du skal virkelig sige Math. tilfældig(). Hvis du kalder tilfældigt () alt for sig, vil JavaScript ikke vide, hvad du taler om.

The Math. random () -funktionen frembringer et semi-tilfældigt tal. (Det er ikke rigtig tilfældigt, men produceres via en kompleks formel fra et andet tal.) Slumreantalet vil være en flydende punktværdi mellem 0 og 1. Det ser ikke ud til at være nyttigt, men med lidt matematik kan du konvertere værdien 0 til 1 til ethvert andet område, du ønsker.

Ud over funktionen tilfældig () har Math-objektet en række funktioner, som giver dig mulighed for at konvertere en flydende punktværdi (det vil sige et tal med et decimaltegn) til et helt tal (du har det - et tal uden et decimaltal). Metoden Standard parseInt () er indbygget i JavaScript, men nogle gange vil du gøre en mere avanceret konvertering. Math-biblioteket har et antal af disse værktøjer:

• Math. runde (): Konverterer et tal ved hjælp af standardrundealgoritmen. Hvis decimaldelen er. 5 eller mindre, er det mindre heltal valgt; hvis decimaldelen er større end. 5, vælges det større heltal. Dette betyder at 3. 1 runder til 3 og 3. 8 runder til 4.

• Math. gulv (): Denne funktion rundes altid ned, så 3. 1 og 3. 8 bliver begge 3. Funktionen parseInt () er identisk med Math. etage().

• Math. ceil (): Denne funktion (få den - loftfunktionen) rulle altid op, så 3. 1 og 3. 8 begge slutter som 4.

Den funktion du har brug for afhænger af de særlige forhold.

Sådan laver du HTML-spilformularen

Som altid danner HTML grundlaget for et hvilket som helst JavaScript-program. Det vigtigste her er formularen, der giver brugergrænsefladen. Denne formular har nogle forudsigelige egenskaber:

• Et span for at holde de rå data: Der er virkelig intet til brugeren at skrive, så brug et spænd for de forskellige outputelementer. Spænd er et generisk inline-tag. De er super til situationer som denne, hvor du har brug for nogle simple outputelementer, der kan være inline med sidenes hovedstrøm. Den rå data span kaldes (her går du …) spnRaw.

• Et andet span for times100 data: Da programmet udfører beregningerne, vil det vise output.

• En tredje spænding for den endelige produktion: Når alle beregningerne er færdige, har du brug for en vis måde at vise dit strålende arbejde på. spnFinal vil tjene dette formål.

• Etiketter for at gøre alt klart: Uden etiketter forklarer, hvad der sker, vil der bare være en masse tal på skærmen. Glem ikke at tilføje etiketter selv til enkle eksempler, så brugeren kan finde ud af, hvad der sker.

• En knap for at starte alle handlinger: Intet sker, før brugeren beder om det, så tilføj en knap til formularen. Når knappen trykkes, skal den kalde roll () -funktionen for at rulle et nummer.

• CSS for at få det til at se godt ud: HTML uden CSS er grimt, så tilføj nok CSS til at få HTML-formularen til at se anstændigt ud.