De multe ori, în timp ce dezvolți proiecte, te vei găsi căutând modalități de a genera numere aleatorii.

Cele mai frecvente cazuri de utilizare pentru generarea de numere aleatorii sunt jocurile de noroc precum aruncarea zarurilor, amestecarea cărților de joc și rotirea roților de ruletă.

În acest ghid, veți învăța cum să generați un număr aleatoriu folosind Math.random() metodă prin construirea unui joc de mini zaruri.

Metoda Math.random ()

Math obiect în JavaScript este un obiect încorporat care are proprietăți și metode pentru efectuarea calculelor matematice.

O utilizare obișnuită a Math obiectul este de a crea un număr aleatoriu folosind random() metodă.

ad-banner
const randomValue = Math.random();

Cu exceptia Math.random() metoda nu returnează de fapt un număr întreg. În schimb, returnează o valoare în virgulă mobilă între 0 (inclusiv) și 1 (exclusiv). De asemenea, rețineți că valoarea returnată de la Math.random() este de natură pseudo-aleatorie.

Numere aleatorii generate de Math.random() ar putea părea aleatoriu, dar aceste numere se vor repeta și vor afișa în cele din urmă un model non-aleatoriu pe o perioadă de timp.

Acest lucru se datorează faptului că generarea algoritmică de numere aleatorii nu poate fi niciodată cu adevărat aleatorie în natură. Acesta este motivul pentru care le numim generatori de numere pseudo-aleatorii (PRNG).

Pentru a afla mai multe despre Math.random() metoda puteți consulta acest ghid.

Funcția Generator de Numere Aleatorii

Acum să folosim Math.random() metoda de a crea o funcție care va returna un număr întreg aleatoriu între două valori (inclusiv).

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

Să descompunem logica aici.

Math.random() metoda va returna un număr în virgulă mobilă între 0 și 1 (exclusiv).

Deci, intervalele ar fi următoarele:

[0 .................................... 1)

[min .................................... max)

Pentru a calcula al doilea interval, scădeți min de la ambele capete. Deci, acest lucru vă va oferi un interval între 0 și max-min.

[0 .................................... 1)

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

Deci, acum, pentru a obține o valoare aleatorie, veți face următoarele:

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

Aici x este valoarea aleatorie.

În prezent, max este exclusă din interval. Pentru a fi inclusiv, adăugați 1. De asemenea, trebuie să adăugați min înapoi care a fost scăzut mai devreme pentru a obține o valoare între [min, max).

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

Bine, așa că acum ultimul pas rămas este să vă asigurați că x este întotdeauna un număr întreg.

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

Ai putea folosi Math.round() metoda în loc de floor(), dar asta ți-ar oferi o distribuție neuniformă. Aceasta înseamnă că ambele max și min va avea o jumătate de șansă să iasă ca rezultat. Folosind Math.floor() vă va oferi o distribuție perfect uniformă.

Deci, acum, când aveți o înțelegere corectă a modului în care funcționează o generație aleatorie, să folosim această funcție pentru a simula zarurile care rulează.

Jocul Rolling Dice

În această secțiune, vom crea un mini-joc de zaruri foarte simplu. Doi jucători își introduc numele și vor arunca zarurile. Jucătorul al cărui zar are un număr mai mare va câștiga runda.

Mai întâi, creați o funcție rollDice care simulează acțiunea pentru aruncarea zarurilor.

În corpul funcției, apelați getRandomNumber() funcționează cu 1 și 6 ca argumentele. Acest lucru vă va oferi orice număr aleatoriu între 1 și 6 (ambele inclusiv) la fel ca modul în care ar funcționa zarurile reale.

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

Apoi, creați două câmpuri de intrare și un buton așa cum se arată mai jos:

<div id="app">
      <div>
        <input id="player1" placeholder="Enter Player 1 Name" />
      </div>
      <div>
        <input id="player2" placeholder="Enter Player 2 Name" />
      </div>
      <button id="roll">Roll Dice</button>
      <div id="results"></div>
    </div>

Când se face clic pe butonul „Roll Dice”, obține numele jucătorilor din câmpurile de introducere și apelează rollDice() funcție pentru fiecare jucător.

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 = `
  <p>${player1} => ${player1Score}</p>
  <p>${player2} => ${player2Score}</p>
  <p>${result}</p>
  `;
});

Puteți valida câmpurile de nume ale jucătorilor și puteți prefigura marcajul cu unele CSS. În scopul conciziei, îl mențin simplu pentru acest ghid.

Aia este. Puteți verifica demo-ul aici.

Concluzie

Deci, generarea de numere aleatorii în JavaScript nu este atât de întâmplătoare la urma urmei. Tot ce facem este să luăm câteva numere de intrare, să folosim unele matematice și să scuipăm un număr pseudo-aleatoriu.

Pentru majoritatea aplicațiilor și jocurilor bazate pe browser, această multitudine aleatorie este suficientă și își servește scopul.

Gata pentru acest ghid. Rămâi în siguranță și continuă să codezi ca o fiară.