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 Math
JavaScript-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 Math
objektum á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 x
van a véletlenszerű érték.
Jelenleg max
ki van zárva az intervallumból. Ahhoz, hogy inkluzív legyen, adjon hozzá 1-et. Ezenkívül hozzá kell adnia a min
korá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 x
ez 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 min
fé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, rollDice
amely 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 6
a é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.