Freqüentemente, ao desenvolver projetos, você se pegará procurando maneiras de gerar números aleatórios.

Os casos de uso mais comuns para gerar números aleatórios são jogos de azar, como dados de rolar, cartas de baralho e rodas de roleta girando.

Neste guia, você aprenderá como gerar um número aleatório usando o Math.random() método construindo um mini-jogo de dados.

O método Math.random ()

o Math objeto em JavaScript é um objeto embutido que tem propriedades e métodos para realizar cálculos matemáticos.

Um uso comum do Math objetivo é criar um número aleatório usando o random() método.

const randomValue = Math.random();

Mas o Math.random() método não retorna um número inteiro. Em vez disso, ele retorna um valor de ponto flutuante entre 0 (inclusivo) e 1 (exclusivo). Além disso, observe que o valor retornado de Math.random() é de natureza pseudo-aleatória.

Números aleatórios gerados por Math.random() pode parecer aleatório, mas esses números irão se repetir e, eventualmente, exibir um padrão não aleatório ao longo de um período de tempo.

Isso ocorre porque a geração de números aleatórios algorítmicos nunca pode ser verdadeiramente aleatória por natureza. É por isso que os chamamos de geradores de números pseudo-aleatórios (PRNGs).

Para saber mais sobre o Math.random() método que você pode verificar isto guia.

Função Geradora de Número Aleatório

Agora vamos usar o Math.random() método para criar uma função que retornará um número inteiro aleatório entre dois valores (inclusive).

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

Vamos quebrar a lógica aqui.

o Math.random() método retornará um número de ponto flutuante entre 0 e 1 (exclusivo).

Portanto, os intervalos seriam os seguintes:

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

Para fatorar o segundo intervalo, subtraia min de ambas as extremidades. Isso daria a você um intervalo entre 0 e max-min.

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

Portanto, agora, para obter um valor aleatório, você faria o seguinte:

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

Aqui x é o valor aleatório.

Atualmente, max é excluído do intervalo. Para torná-lo inclusivo, adicione 1. Além disso, você precisa adicionar o min de volta que foi subtraído antes para obter um valor entre [min, max).

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

Tudo bem, então agora a última etapa restante é garantir que x é sempre um número inteiro.

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

Você poderia usar o Math.round() método em vez de floor(), mas isso lhe daria uma distribuição não uniforme. Isso significa que ambos max e min terá meia chance de sair como um resultado. Usando Math.floor() lhe dará uma distribuição perfeitamente uniforme.

Portanto, agora que você tem um bom entendimento de como funciona uma geração aleatória, vamos usar esta função para simular o lançamento de dados.

The Rolling Dice Game

Nesta seção, criaremos um mini-jogo de dados realmente simples. Dois jogadores inserem seus nomes e lançam os dados. O jogador cujo dado tiver um número maior vencerá a rodada.

Primeiro, crie uma função rollDice que simula a ação de rolar os dados.

Dentro do corpo da função, chame o getRandomNumber() funcionar com 1 e 6 como os argumentos. Isso lhe dará qualquer número aleatório entre 1 e 6 (ambos inclusivos), exatamente como os dados reais funcionariam.

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

Em seguida, crie dois campos de entrada e um botão conforme mostrado abaixo:

<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>

Quando o botão ‘Roll Dice’ é clicado, pegue os nomes dos jogadores nos campos de entrada e chame o rollDice() função para cada jogador.

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>  `;});

Você pode validar os campos de nome dos jogadores e embelezar a marcação com algum CSS. Para fins de concisão, estou simplificando para este guia.

É isso. Você pode conferir a demonstração aqui.

Conclusão

Portanto, gerar números aleatórios em JavaScript não é tão aleatório, afinal. Tudo o que estamos fazendo é pegar alguns números de entrada, usar matemática e cuspir um número pseudo-aleatório.

Para a maioria dos aplicativos e jogos baseados em navegador, tanta aleatoriedade é suficiente e atende ao seu propósito.

É isso neste guia. Fique seguro e continue codificando como uma fera.



Fonte