Spesso durante lo sviluppo di progetti, vi troverete alla ricerca di modi per generare numeri casuali.

I casi d’uso più comuni per la generazione di numeri casuali sono giochi d’azzardo come tirare i dadi, mischiare le carte da gioco e girare le ruote della roulette.

In questa guida, imparerai come generare un numero casuale usando il metodo Math.random() costruendo un mini gioco di dadi.

La matematica.,metodo random ()

L’oggettoMath in JavaScript è un oggetto incorporato che ha proprietà e metodi per eseguire calcoli matematici.

Un uso comune dell’oggetto Math è quello di creare un numero casuale utilizzando il metodo random().

const randomValue = Math.random();

Ma ilMath.random() metodo in realtà non restituisce un numero intero. Invece, restituisce un valore in virgola mobile compreso tra 0 (incluso) e 1 (esclusivo)., Inoltre, si noti che il valore restituito da Math.random() è pseudo-casuale in natura.

I numeri casuali generati da Math.random() potrebbero sembrare casuali, ma quei numeri si ripeteranno e alla fine mostreranno un pattern non casuale per un periodo di tempo.

Questo perché la generazione di numeri casuali algoritmici non può mai essere veramente casuale in natura. Questo è il motivo per cui li chiamiamo generatori di numeri pseudo-casuali (PRNG).

Per saperne di più sul metodo Math.random() puoi consultare questa guida.,

Funzione Generatore di numeri casuali

Ora usiamo il metodoMath.random() per creare una funzione che restituirà un numero intero casuale tra due valori (incluso).

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

Scomponiamo la logica qui.

Il metodo Math.random() restituirà un numero in virgola mobile compreso tra 0 e 1 (esclusivo).

Quindi gli intervalli sarebbero i seguenti:

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

Per calcolare il secondo intervallo, sottrarre min da entrambe le estremità. Quindi questo ti darebbe un intervallo tra 0 e max-min.,

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

Così ora, per ottenere un valore casuale si dovrebbe fare quanto segue:

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

Qui x è il valore casuale.

Attualmente, max è escluso dall’intervallo. Per renderlo inclusivo, aggiungi 1. Inoltre, è necessario aggiungere ilmin indietro che è stato sottratto in precedenza per ottenere un valore tra[min, max).

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

Va bene, quindi ora l’ultimo passo rimanente è assicurarsi che x sia sempre un numero intero.,

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

Potresti usare il metodoMath.round()invece difloor(), ma questo ti darebbe una distribuzione non uniforme. Ciò significa che sia maxchemin avranno una mezza possibilità di uscire come risultato. L’utilizzo di Math.floor() ti darà una distribuzione perfettamente uniforme.

Quindi, ora che hai una buona comprensione di come funziona una generazione casuale, usiamo questa funzione per simulare i dadi rotolanti.,

The Rolling Dice Game

In questa sezione, creeremo un mini gioco di dadi davvero semplice. Due giocatori inserire il loro nome e lancerà i dadi. Il giocatore il cui dado ha un numero più alto vincerà il round.

In primo luogo, creare una funzione rollDice che simula l’azione per tirare i dadi.

All’interno del corpo della funzione, chiamare la funzionegetRandomNumber() con1 e6 come argomenti. Questo ti darà qualsiasi numero casuale tra 1 e 6 (entrambi inclusi) proprio come i veri dadi funzionerebbero.,

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

Quindi, creare due campi di input e un pulsante come mostrato di seguito:

Quando si fa clic sul pulsante ‘Tira dadi’, ottenere i nomi dei giocatori dai campi di input e chiamare la funzione rollDice() per ogni giocatore.

Puoi convalidare i campi dei nomi dei giocatori e abbellire il markup con alcuni CSS. Ai fini della brevità, sto mantenendo le cose semplici per questa guida.

Questo è tutto. È possibile controllare la demo qui.

Conclusione

Quindi generare numeri casuali in JavaScript non è così casuale dopo tutto., Tutto quello che stiamo facendo è prendere alcuni numeri di input, usare un po ‘ di matematica e sputare un numero pseudo-casuale.

Per la maggior parte delle applicazioni e dei giochi basati su browser, questa casualità è sufficiente e serve al suo scopo.

Questo è tutto per questa guida. Stai al sicuro e continua a codificare come una bestia.