Hoe u willekeurige nummers maakt in uw HTML5-spel - dummies

Willekeurige nummers zijn een belangrijk onderdeel van HTML5-spelprogrammering. Vaak wil je een willekeurig gedrag. Dit wordt gebruikt om de complexiteit en onvoorspelbaarheid van het universum na te bootsen. In de meeste talen is een generator voor willekeurige getallen ingebouwd. Deze speciale functie produceert een soort semi-willekeurig getal. Vaak moet je een beetje manipuleren om het nummer in het gewenste patroon te krijgen.

De pagina lijkt een beetje ingewikkeld, maar het beschrijft een krachtig en flexibel systeem, als je eenmaal weet hoe je het moet gebruiken. Dit is wat er gebeurt:

JavaScript genereert een willekeurig nummer.

Verschillende talen doen dit op verschillende manieren, maar JavaScript heeft een functie die een willekeurige drijvende-kommawaarde tussen 0 en 1 maakt. Die waarde wordt weergegeven in het onbewerkte veld.
Vermenigvuldig de onbewerkte waarde met 100.

In dit voorbeeld wilt u een getal tussen 1 en 100. Als u een 0-op-1 vermenigvuldigt met 100, krijgt u 0 tot 99. 9999 (met veel negens) waarde. Dat komt dichterbij. Het vakje 100 keer geeft de onbewerkte waarde weer nadat deze met 100 is vermenigvuldigd.
Converteer het grote getal naar een geheel getal.

De gebruiker zal nooit een nummer met 17 plaatsen na het decimaalteken raden, dus u hebt een geheel getal nodig. JavaScript heeft een aantal manieren om een float naar een geheel getal te converteren. Als u het gewenste gedrag van 1 tot 100 wilt krijgen, gebruikt u de methode Math. ceil. Het eindresultaat wordt getoond in het laatste vak.

Hier is de code in zijn geheel:

rand100. html-veldset {width: 600px; marge-rechts: auto; margin-left: auto;} label {float: left; breedte: 250 px; text-align: right; margin-right: 1em; clear: left;} span {float: left;} button {display: block; beiden opschonen; marge: auto;} function roll () {// variabelen maken voor formulierelementen var spnRaw = document. getElementById ("spnRaw"); var spn100 = document. getElementById ("spn100"); var spnFinal = document. getElementById ("spnFinal"); // krijg een willekeurig getal var raw = Math. willekeurig(); spnRaw. innerHTML = onbewerkt; // vermenigvuldig met 100 var times100 = raw * 100; spn100. innerHTML = times100; // haal het plafond var final = Math. ceil (times100); spnFinal. innerHTML = final;} // end roll

Maak willekeurige getallen 1 - 100
raw 0 maal 100 0 final 0 dobbelstenen

Gebruik wiskunde voor uw spelcode

Om dit programma te laten werken, kunt u nodig om het ultieme wapen van geekiness in te roepen: Math.

JavaScript heeft een prachtige bibliotheek met de naam Math . De wiskundebibliotheek heeft een aantal echt nerdsheid erin begraven, zoals een aantal veelgebruikte wiskundige functies en constanten (zoals pi) en een paar andere handige functies voor het werken met getallen.

Allereerst is natuurlijk de functie die willekeurige getallen genereert. Het heet Math. willekeurig().

Je moet echt wiskunde zeggen. willekeurig(). Als je random () helemaal zelf aanroept, weet JavaScript niet waar je het over hebt.

De wiskunde. De functie random () produceert een semi-willekeurig getal. (Het is niet echt willekeurig, maar wordt geproduceerd via een complexe formule van een ander getal.) Het willekeurige getal is een drijvende-kommawaarde tussen 0 en 1. Dit lijkt niet nuttig, maar met een beetje rekenwerk kun je converteren de 0 tot 1 waarde voor elk ander bereik dat u wenst.

Naast de functie random () heeft het Math-object een aantal functies waarmee u een zwevende-kommawaarde (d.w.z. een getal met een decimaalteken) kunt converteren naar een geheel getal (u hebt het - een getal zonder een decimaalteken). De standaard methode parseInt () is ingebouwd in JavaScript, maar soms wilt u een betere conversie uitvoeren. De Math-bibliotheek heeft een aantal van deze tools:

Math. round (): converteert een getal met behulp van het standaard afrondingsalgoritme. Als het decimale deel is. 5 of minder, het kleinere gehele getal wordt gekozen; als het decimale deel groter is dan. 5, wordt het grotere gehele getal gekozen. Dit betekent dat 3. 1 rondes naar 3 en 3. 8 ronden naar 4.
Math. floor (): deze functie wordt altijd afgerond, zodat 3. 1 en 3. 8 beide worden 3. De functie parseInt () is identiek aan Math. verdieping().
Math. ceil (): deze functie (get it - de plafondfunctie) komt altijd omhoog, dus 3. 1 en 3. 8 eindigen beide als 4.

De functie die u nodig hebt, is afhankelijk van de specifieke omstandigheden.

Het HTML-spelformulier maken

Zoals altijd vormt HTML het fundament van elk JavaScript-programma. Het belangrijkste hier is de vorm die de gebruikersinterface biedt. Dit formulier heeft enkele voorspelbare functies:

Een bereik om de onbewerkte gegevens te bewaren: Er is echt niets voor de gebruiker om te typen, dus gebruik een bereik voor de verschillende uitvoerelementen. Spans zijn een generieke inline-tag. Ze zijn super voor situaties als deze waarbij je een eenvoudig uitvoerelement nodig hebt dat in lijn kan zijn met de hoofdstroom van de pagina. De onbewerkte gegevensspanne wordt opgeroepen (hier ga je …) spRRaw.
Een andere reeks voor de times100 gegevens: Terwijl het programma de berekeningen uitvoert, wordt de uitvoer weergegeven.
Een derde reeks voor de laatste uitvoer: Nadat alle berekeningen zijn voltooid, hebt u een manier nodig om uw schitterende werk weer te geven. spnFinal zal dit doel dienen.
Labels om alles duidelijk te maken: Zonder labels die uitleggen wat er gebeurt, staan er een aantal cijfers op het scherm. Vergeet niet om zelfs labels toe te voegen aan eenvoudige voorbeelden, zodat de gebruiker kan achterhalen wat er aan de hand is.
Een knop om alle acties te starten: Er gebeurt niets totdat de gebruiker erom vraagt, dus voeg een knop toe aan het formulier. Wanneer op de knop wordt geklikt, roept u de functie roll () op om een nummer te draaien.
CSS om het er allemaal goed uit te laten zien: HTML zonder CSS is lelijk, dus voeg genoeg CSS toe om het HTML-formulier er goed uit te laten zien.