Hvordan lage tilfeldige tall i ditt HTML5 spill

November 16  by Eliza

Tilfeldige tall er en viktig del av HTML5 spillprogrammering. Ofte du ønsker noen form for tilfeldig oppførsel. Dette brukes til å etterligne kompleksiteten og uforutsigbarheten i universet. De fleste språk har en tilfeldig tall generator bygget i. Denne spesielle funksjon frembringer en slags semi-tilfeldig tall. Ofte må du gjøre noen manipulasjon for å gjøre tallet passer det mønsteret du ønsker.

Hvordan lage tilfeldige tall i ditt HTML5 spill


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

  1. Java genererer et tilfeldig nummer.

    Forskjellige språk gjøre dette på forskjellige måter, men Java har en funksjon for å opprette en tilfeldig flytpunktverdi mellom 0 og 1. Denne verdi er vist i rå boksen.

  2. Multipliser rå verdi av 100.

    I dette eksemplet vil du et tall mellom 1 og 100. Hvis du multipliserer et 0-til-en med 100, får du 0 til 99,9999 (med mye niere) verdi. Som begynner å bli tettere. The ganger 100 boksen viser rå verdi etter at det har blitt multiplisert med 100.

  3. Konvertere det store antallet til et heltall.

    Brukeren er aldri kommer til å gjette et tall med 17 steder etter desimal, så du trenger et heltall. Java har en rekke måter å konvertere en dupp til et heltall. For å få 1 til 100 oppførsel du leter etter, kan du bruke en metode som kalles Math.ceil. Det endelige resultatet er vist i den siste boks.

Her er koden i sin helhet:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> rand100.html </ title>
<Style type = "text / css">
fieldset {
width: 600px;
margin-right: auto;
margin-left: auto;
}
label {
float: left;
width: 250px;
text-align: right;
margin-right: 1em;
klar: left;
}
span {
float: left;
}
knappen {
display: block;
klar: begge;
margin: auto;
}
</ Style>
<Script type = "text / javascript">
funksjon roll () {
// Skape variabler for skjemaelementer
Var spnRaw = document.getElementById ("spnRaw");
Var spn100 = document.getElementById ("spn100");
Var spnFinal = document.getElementById ("spnFinal");

// Få tilfeldig tall
Var rå = Math.random ();
spnRaw.innerHTML = rå;

// Multipliser med 100
Var times100 = rå * 100;
spn100.innerHTML = times100;

// Få taket
Var endelig = Math.ceil (times100);
spnFinal.innerHTML = finalen;
} // End roll
</ Script>
</ Head>
<Body>
<H1> Gjør tilfeldige tall 1-100 </ h1>
<Form>
<Fieldset>
<Label> rå </ label>
<Span id = "spnRaw"> 0 </ span>
<Label> ganger 100 </ label>
<Span id = "spn100"> 0 </ span>
<Label> siste </ label>
<Span id = "spnFinal"> 0 </ span>
<-knappen Type = "button"
onclick = "roll ()">
rulle terningen
</ Knapp>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Bruke matematikk for din spillkode

For å gjøre dette programmet fungerer, må du ringe i det ultimate våpenet for geekiness: Math.

Java har et flott bibliotek kalt Math. Math Biblioteket har noen virkelig nerdete godhet begravet i det, som en rekke vanlig brukte matematiske funksjoner samt konstanter (som pi) og et par andre nyttefunksjoner for å jobbe med tall.

Først er naturligvis den funksjon som genererer tilfeldige tall. Det kalles Math.random ().

Du trenger virkelig å si Math.random (). Hvis du kaller tilfeldig () helt av seg selv, vil Javascript ikke vet hva du snakker om.

Den Math.random () -funksjonen produserer en semi-tilfeldig tall. (Det er egentlig ikke tilfeldig, men er produsert gjennom en komplisert formel fra et annet nummer.) Den tilfeldige nummer vil være en flyttalls verdi mellom 0 og 1. Dette synes ikke nyttig, men med litt matematikk, kan du konvertere den 0-1 verdi til andre utvalg du ønsker.

I tillegg til tilfeldig () -funksjonen, har Math objekt en rekke funksjoner som lar deg konvertere et flyttall (det vil si et tall med en desimal punkt) til et heltall (du fikk det - et tall uten en desimal punkt). Standarden parseInt () metoden er innebygd i Javascript, men noen ganger du ønsker å gjøre et mer avansert konvertering. Math Biblioteket har en rekke av disse verktøyene:

  • Math.round (): Konverterer et tall med standard avrunding algoritmen. Hvis den del desimaltegn er 0,5 eller mindre, er den mindre heltall valgt; hvis desimal delen er større enn 0,5, er større heltall valgt. Dette betyr at 3,1 runder til 3 og 3,8 runder til 4.
  • Math.floor (): Denne funksjonen runder alltid ned, så 3.1 og 3.8 både blitt 3. parseInt () -funksjonen er identisk med Math.floor ().
  • Math.ceil (): Denne funksjonen (få det - taket funksjon) alltid runder opp, så 3.1 og 3.8 begge ender opp som fire.

Den funksjonen du trenger, avhenger av de konkrete omstendigheter.

Hvordan lage HTML-spillet skjema

Som alltid, danner HTML grunnlaget for enhver Javascript-program. Det viktigste her er den formen som gir brukergrensesnittet. Denne formen har noen forutsigbare egenskaper:

  • En span å holde rådata: Det er egentlig ikke noe for brukeren å skrive, så bruk et spenn for de ulike utgående elementer. Spenn er en generisk inline tag. De er super for situasjoner som dette der du trenger noen enkle utgang element som kan være inline med hovedstrømmen av siden. Rådata span kalles (her du går...) SpnRaw.
  • En annen span for times100 data: Ettersom programmet gjør beregningene, vil det vise utgang.
  • En tredje span for det endelige resultatet: Etter at alle beregninger er ferdig, trenger du noen måte å vise din strålende arbeid. spnFinal vil tjene dette formålet.
  • Etiketter for å gjøre alt klart: Uten etiketter forklare hva som skjer, vil det bare være en haug med 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 alt som skjer: Ingenting vil skje før brukeren ber om det, så legge til en knapp til skjemaet. Når knappen klikkes, har det ringe rullen () -funksjonen til å rulle et nummer.
  • CSS for å gjøre det hele ser bra ut: HTML uten CSS er stygg, så legger nok CSS for å lage HTML-skjema ser anstendig.