Hur man skapar slumpartar i ditt HTML5-spel - dummies

Slumpmässiga siffror är en viktig del av HTML5-spelprogrammeringen. Ofta vill du ha någon form av slumpmässigt beteende. Detta används för att efterlikna universumets komplexitet och oförutsägbarhet. De flesta språk har en slumptalsgenerator inbyggd. Den här specialfunktionen producerar någon form av semi-slumpmässigt nummer. Ofta måste du göra lite manipulation för att få numret att passa det mönster du vill ha.

Sidan verkar vara lite komplex, men det beskriver ett kraftfullt och flexibelt system, när du väl vet hur du använder den. Här är vad som händer:

JavaScript genererar ett slumptal.

Olika språk gör det på olika sätt, men JavaScript har en funktion som skapar ett slumpmässigt flytpunktvärde mellan 0 och 1. Det värdet visas i rårutan.
Multiplicera råvärdet med 100.

I det här exemplet vill du ha ett tal mellan 1 och 100. Om du multiplicerar en 0-till-1 med 100 får du 0 till 99. 9999 (med många nio) värde. Det kommer närmare. Tiderna 100 rutan visar råvärdet efter att det har multiplicerats med 100.
Konvertera det stora numret till ett heltal.

Användaren kommer aldrig att gissa ett tal med 17 platser efter decimalen, så du behöver ett heltal. JavaScript har ett antal sätt att konvertera en float till ett heltal. För att få det 1 till 100 beteendet du letar efter använder du en metod som heter Math. ceil. Slutresultatet visas i slutkassen.

Här är koden i sin helhet:

rand100. html-fält {bredd: 600px; marginal-höger: auto; margin-left: auto;} label {float: left; bredd: 250px; textjustera: höger; marginal-höger: 1em; clear: left;} span {float: left;} knapp {display: block; klara: båda; marginal: auto;} funktionsrulle () {// skapa variabler för formelement var spnRaw = dokument. getElementById ("spnRaw"); var spn100 = dokument. getElementById ("spn100"); var spnFinal = dokument. getElementById ("spnFinal"); // få slumpmässigt nummer var raw = Math. slumpmässig(); spnRaw. innerHTML = rå; // multiplicera med 100 var times100 = raw * 100; spn100. innerHTML = tider100; // få taket var sista = Math. ceil (times100); spnFinal. innerHTML = final;} // end roll

Gör slumptal 1 - 100
rå 0 gånger 100 0 slutlig 0 rulla tärningarna

Använd matte för din spelkod

För att göra detta program fungerar, gör du behöver ringa i det ultimata vapnet av geekiness: Math.

JavaScript har ett underbart bibliotek som heter Math . Matematikbiblioteket har en del riktigt geekig godhet begravd i den, som ett antal vanliga matematiska funktioner samt konstanter (som pi) och några andra verktygsfunktioner för att arbeta med siffror.

Först är förstås den funktion som genererar slumptal. Det heter Math. slumpmässig().

Du måste verkligen säga Math. slumpmässig(). Om du kallar slumpmässigt () för sig själv, vet JavaScript inte vad du pratar om.

Matematiken. slumpmässig () -funktionen producerar ett semi-slumptal. (Det är inte riktigt slumpmässigt men produceras genom en komplex formel från ett annat tal.) Slumpmässigt tal kommer att vara ett flytande punktvärde mellan 0 och 1. Det verkar inte bra, men med lite matte kan du konvertera 0 till 1-värdet till något annat sortiment du önskar.

Förutom funktionen slumpmässig () har Math-objektet ett antal funktioner som låter dig konvertera ett flytande punktvärde (det vill säga ett tal med en decimal) till ett heltal (du har det - ett tal utan en decimal). Metoden Standard parseInt () är inbyggd i JavaScript, men ibland vill du göra en mer avancerad konvertering. Matematikbiblioteket har ett antal av dessa verktyg:

Math. round (): Konverterar ett tal med standardrundningsalgoritmen. Om decimaldelen är. 5 eller mindre, är det mindre heltalet valt; om decimaldelen är större än. 5, är det större heltalet valt. Detta innebär att 3. 1 rundor till 3 och 3. 8 rundor till 4.
Math. golv (): Denna funktion rundar alltid ner, så 3. 1 och 3. 8 båda blir 3. Funktionen parseInt () är identisk med Math. golv().
Math. ceil (): Denna funktion (få den - takfunktionen) rinner alltid upp, så 3. 1 och 3. 8 båda slutar som 4.

Funktionen du behöver beror på de specifika omständigheterna.

Så här skapar du HTML-formuläret

Som alltid bildar HTML grunden för något JavaScript-program. Det viktigaste här är det formulär som ger användargränssnittet. Denna form har några förutsägbara funktioner:

En spänning för att hålla de råa data: Det finns verkligen inget för användaren att skriva, så använd en spänning för de olika utgångselementen. Spans är en generisk inline-tagg. De är fantastiska för situationer som här, där du behöver lite enkelt utmatningselement som kan vara inline med sidans huvudflöde. Den råa data spänningen heter (här går du …) spnRaw.
Ett annat span för times100 data: Eftersom programmet gör beräkningarna kommer det att visa utmatningen.
En tredje spänning för slutprodukten: När alla beräkningar är färdiga behöver du något sätt att visa ditt briljanta arbete. spnFinal kommer att tjäna detta syfte.
Etiketter för att göra allt klart: Utan etiketter förklarar vad som händer, kommer det bara att finnas en massa siffror på skärmen. Glöm inte att lägga till etiketter även på enkla exempel så att användaren kan ta reda på vad som händer.
En knapp för att starta all åtgärd: Ingenting kommer att hända tills användaren ber om det, så lägg till en knapp i formuläret. När knappen klickar, ring den till funktionen roll () för att rulla ett nummer.
CSS för att göra allt ser bra ut: HTML utan CSS är ful, så lägg till tillräckligt med CSS för att göra HTML-blanketten ser anständig ut.