Kako koristiti JavaScript Math.random () kao generator slučajnih brojeva

Tijekom razvijanja projekata često ćete se naći u potrazi za načinima generiranja slučajnih brojeva.

Najčešći slučajevi upotrebe za generiranje slučajnih brojeva su igre na sreću poput bacanja kockica, miješanja karata i okretanja kotačića ruleta.

U ovom vodiču naučit ćete kako generirati slučajni broj pomoću Math.random()metode stvaranjem igre mini kockica.

Metoda Math.random ()

MathObjekt u JavaScript je ugrađeni objekt koji ima svojstva i metode za obavljanje matematičkih izračuna.

Uobičajena upotreba Mathpredmeta je stvaranje slučajnog broja pomoću random()metode.

const randomValue = Math.random();

Ali Math.random()metoda zapravo ne vraća cijeli broj. Umjesto toga, vraća vrijednost s pomičnom zarezom između 0 (uključujući) i 1 (isključivo). Također imajte na umu da je vrijednost vraćena iz Math.random()pseudo-slučajne prirode.

Slučajni brojevi koje generira Math.random()može izgledati slučajno, ali ti će se brojevi ponavljati i na kraju prikazivati ​​ne-slučajan obrazac tijekom određenog vremenskog razdoblja.

To je zato što algoritamsko generiranje slučajnih brojeva nikada ne može biti uistinu slučajno. Zbog toga ih nazivamo generatorima pseudo-slučajnih brojeva (PRNG).

Da biste saznali više o Math.random()metodi, možete pogledati ovaj vodič.

Funkcija generatora slučajnih brojeva

Sada upotrijebimo Math.random()metodu za stvaranje funkcije koja će vratiti slučajni cijeli broj između dvije vrijednosti (uključujući te vrijednosti).

const getRandomNumber = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };

Razbijmo ovdje logiku.

Math.random()Metoda će vratiti broj s pomičnim zarezom između 0 i 1 (isključivo).

Tako bi intervali bili sljedeći:

[0 .................................... 1) [min .................................... max)

Da biste računali drugi interval, oduzmite min s oba kraja. Dakle, to bi vam dalo interval između 0 i max-min.

[0 .................................... 1) [0 .................................... max - min)

Dakle, da biste dobili slučajnu vrijednost, učinili biste sljedeće:

const x = Math.random() * (max - min)

Evo xslučajne vrijednosti.

Trenutno maxje isključeno iz intervala. Da biste ga uključili, dodajte 1. Također, trebate dodati minstražnji dio koji je ranije oduzet da biste dobili vrijednost između [min, max).

const x = Math.random() * (max - min + 1) + min

U redu, pa je sada preostali zadnji korak osigurati da xto uvijek bude cijeli broj.

const x = Math.floor(Math.random() * (max - min + 1)) + min

Možete koristiti Math.round()metodu umjesto floor(), ali to će vam dati neujednačenu raspodjelu. To znači da će i jedno maxi mindrugo imati pola šanse da izađu kao ishod. Korištenje Math.floor()će vam pružiti savršeno ujednačenu distribuciju.

Dakle, sada kad ste pošteno razumjeli kako funkcionira slučajna generacija, upotrijebimo ovu funkciju za simulaciju bacanja kockica.

Igra bacanja kockica

U ovom ćemo odjeljku stvoriti doista jednostavnu igru ​​mini kockica. Dva igrača upisuju svoje ime i bacit će kockice. Igrač čije kocke imaju veći broj pobijedit će u rundi.

Prvo stvorite funkciju rollDicekoja simulira akciju bacanja kockica.

Unutar tijela funkcije pozovite getRandomNumber()funkciju s argumentima 1i 6kao. To će vam dati bilo koji slučajni broj između 1 i 6 (uključujući oba), baš kao i stvarne kockice.

const rollDice = () => getRandomNumber(1, 6);

Zatim stvorite dva polja za unos i gumb kao što je prikazano dolje:

 Roll Dice 

Kada se klikne gumb "Baci kockice", preuzmite imena igrača iz polja za unos i pozovite rollDice()funkciju za svakog igrača.

const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const rollDice = () => getRandomNumber(1, 6); document.getElementById("roll").addEventListener("click", function () { // fetch player names from the input fields const player1 = document.getElementById("player1").value; const player2 = document.getElementById("player2").value; // roll dice for both players const player1Score = rollDice(); const player2Score = rollDice(); // initialize empty string to store result let result = ""; // determine the result if (player1Score > player2Score) { result = `${player1} won the round`; } else if (player2Score > player1Score) { result = `${player2} won the round`; } else { result = "This round is tied"; } // display the result on the page document.getElementById("results").innerHTML = ` 

${player1} => ${player1Score}

${player2} => ${player2Score}

${result}

`; });

Možete potvrditi polja imena igrača i uljepšati oznake pomoću nekog CSS-a. Radi kratkoće, pojednostavljujem ovaj vodič.

To je to. Demo možete pogledati ovdje.

Zaključak

Dakle, generiranje slučajnih brojeva u JavaScript-u ipak nije toliko slučajno. Sve što radimo je da uzmemo neke ulazne brojeve, koristeći neku matematiku i ispljunuvši pseudo-slučajni broj.

Za većinu aplikacija i igara utemeljenih na preglednicima dovoljna je takva slučajnost i služi svojoj svrsi.

To je sve za ovaj vodič. Budite sigurni i kodirajte poput zvijeri.