A JavaScript Math.random () használata véletlenszám-generátorként

Gyakran a projektek kidolgozása során azon kapja magát, hogy véletlenszámok előállításának módját keresi.

A véletlenszerű számok generálásának leggyakoribb esetei a szerencsejátékok, mint a dobókocka, a kártyák keverése és a rulett kerekeinek forgatása.

Ebben az útmutatóban megtudhatja, hogyan lehet véletlen számot létrehozni a Math.random()módszer segítségével egy mini kockajáték felépítésével.

A Math.random () metódus

A MathJavaScript-ben található objektum egy beépített objektum, amely tulajdonságokkal és módszerekkel rendelkezik a matematikai számítások elvégzéséhez.

Az Mathobjektum általános felhasználása egy véletlen szám létrehozása a random()módszer segítségével.

const randomValue = Math.random();

De a Math.random()módszer valójában nem ad egész számot. Ehelyett egy lebegőpontos értéket ad vissza 0 (beleértve) és 1 (kizáró) között. Ezenkívül vegye figyelembe, hogy a visszatérő érték Math.random()álvéletlenszerű.

A véletlenszerű számok Math.random()véletlenszerűnek tűnhetnek, de ezek a számok megismétlődnek, és végül nem véletlenszerű mintázatot jelenítenek meg egy ideig.

Az algoritmikus véletlenszám-generálás ugyanis soha nem lehet igazán véletlenszerű jellegű. Ezért hívjuk őket ál-véletlenszám-generátoroknak (PRNG).

Ha többet szeretne megtudni a Math.random()módszerről, nézze meg ezt az útmutatót.

Véletlenszám-generátor funkció

Most a Math.random()módszerrel hozzunk létre egy olyan függvényt, amely véletlenszerű egész számot ad vissza két érték között (beleértve).

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

Bontjuk le itt a logikát.

A Math.random()módszer egy lebegőpontos számot ad vissza 0 és 1 között (kizárva).

Tehát az intervallumok a következők lennének:

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

A második intervallum kiszámításához vonjon le mindkét végből min. Tehát ez 0 és 0 közötti intervallumot ad max-min.

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

Tehát most egy véletlenszerű érték megszerzéséhez tegye a következőket:

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

Itt xvan a véletlenszerű érték.

Jelenleg maxki van zárva az intervallumból. Ahhoz, hogy inkluzív legyen, adjon hozzá 1-et. Ezenkívül hozzá kell adnia a minkorábban kivont hátlapot is, hogy értéket kapjon a között [min, max).

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

Rendben, így most az utolsó lépés marad annak biztosítása, hogy xez mindig egész szám legyen.

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

Használhatja a Math.round()metódust a helyett floor(), de ez nem egyenletes eloszlást eredményez. Ez azt jelenti, hogy mindkettőnek maxés minfél esélye lesz kijönni eredményként. A használat Math.floor()tökéletesen egyenletes terjesztést eredményez.

Tehát most, hogy tisztában van azzal, hogyan működik egy véletlenszerű generáció, használjuk ezt a funkciót a dobókockák szimulálására.

A gördülő kockajáték

Ebben a részben létrehozunk egy igazán egyszerű mini kockajátékot. Két játékos írja be a nevét, és dobja a kockát. Az a játékos nyeri a fordulót, akinek a kockája nagyobb számmal rendelkezik.

Először hozzon létre egy funkciót, rollDiceamely szimulálja a kocka dobásának műveletét.

Bent a függvény törzsében, hívja a getRandomNumber()funkció 1és 6a érveket. Ez bármilyen véletlenszerű számot kap 1 és 6 között (mindkettőt beleszámítva), akárcsak a valódi kocka működése.

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

Ezután hozzon létre két beviteli mezőt és egy gombot az alábbiak szerint:

 Roll Dice 

Ha a 'Roll Dice' gombra kattint, keresse meg a játékos nevét a beviteli mezőkből, és hívja meg az rollDice()egyes játékosok függvényét.

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}

`; });

Ellenőrizheti a játékosok névmezejeit, és néhány CSS-szel finomíthatja a jelölést. A rövidség érdekében ezt az útmutatót egyszerűen megtartom.

Ez az. A bemutatót itt tekintheti meg.

Következtetés

Tehát véletlenszámok generálása a JavaScript-ben mégsem olyan véletlenszerű. Mindössze annyit csinálunk, hogy felveszünk néhány bemeneti számot, használunk némi matematikát, és kiköpünk egy ál-véletlenszerű számot.

A legtöbb böngészőalapú alkalmazás és játék esetében ez a sok véletlenszerűség elegendő és megfelel a céljának.

Ennyi az útmutatóhoz. Maradj biztonságban, és kódolj, mint egy vadállat.