Presentamos cómo utilizar el método JavaScript Math.random (), ya que en algunos proyectos, sobre todo en la creación de sitios de juegos de azar, se requerirá generar números aleatorios.
Los casos de uso más comunes para generar números aleatorios son juegos como lanzar dados, barajar cartas y girar ruletas de la fortuna.
Math.random ()
Math en JavaScript es un objeto integrado que tiene propiedades y sigue métodos para realizar cálculos matemáticos.
El uso más común del objeto Math es crear un número aleatorio usando el método random().
const randomValue = Math.random();
Pero este método en realidad no da como resultado un número entero. En cambio, devuelve un valor de punto flotante entre 0 (inclusive) y 1 (exclusivo). Hay que tener en cuenta que el valor devuelto Math.random() es de naturaleza pseudoaleatoria.
Los números generados por Math.random() podrían ser aleatorios, pero se repetirán y eventualmente mostrarán un patrón no aleatorio durante un período de tiempo.
Esto se debe a que la generación algorítmica de números aleatorios no puede ser estrictamente aleatoria por naturaleza. A esos los llamamos generadores de números pseudoaleatorios (PRNG).
Generador de números aleatorios
Usaremos el método Math.random() para crear una función que devolverá un entero aleatorio entre dos valores (inclusive).
const getRandomNumber = (min, max) => {
return Math.floor(Math.random() * (max – min + 1)) + min;
};
La lógica seguirá asi:
El método Math.random() devolverá un número de punto flotante entre 0 y 1 (exclusivo).
Entonces los intervalos serían:
[0 ……………………………… 1)
[min ……………………………… max)
Para factorizar el segundo intervalo, hay que restar min de ambos extremos. Eso daría un intervalo entre 0 y max-min.
[0 ……………………………… 1)
[0 ……………………………… max – min)
Entonces, para obtener un valor aleatorio, haría lo siguiente:
const x = Math.random() * (max – min)
Aquí x es el valor aleatorio
Actualmente, max está excluido del intervalo. Para hacerlo inclusivo, hay que agregar 1. Además, hay que agregar la parte min posterior que se restó anteriormente para obtener un valor entre [min, max).
const x = Math.random() * (max – min + 1) + min
El último paso que queda es asegurarse de que x siempre sea un número entero.
const x = Math.floor(Math.random() * (max – min + 1)) + min
Se podría usar el método Math.round() en lugar de floor(), pero eso daría una distribución no uniforme. Esto significa que max y min tendrán la mitad de posibilidades de salir a la luz como resultado. El uso Math.floor() dará una distribución uniforme.
Ahora ya con el antecedente de cómo funciona una generación aleatoria, usaremos esta función para simular el lanzamiento de dados.
Los dados rodantes
Se trata de que dos jugadores ingresan su nombre y tiren los dados. El jugador cuyo dado tenga un número más alto ganará la ronda.
Primero, hay que crear la función rollDice para simular la acción de lanzar los dados.
Dentro del cuerpo de la función, hay que llamar a la función getRandomNumber() con 1y 6 como argumentos. Esto dará un número aleatorio entre 1 y 6 (ambos incluidos), al igual que funcionarían los dados reales.
const rollDice = () => getRandomNumber(1, 6);
Después hay que crear dos campos de entrada y un botón como se muestra a continuación:
<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>
Cuando se da clic en el botón ‘Tirar dados’, hay que obtener los nombres de los jugadores de los campos de entrada y usar la función rollDice() para cada jugador.
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>
`;
});
Se puede validar los campos de nombre de los jugadores y mejorar el marcado con CSS.
Hay que recordar que generar números aleatorios en JavaScript no es tan aleatorio después de todo. Todo lo que se debe hacer es ingresar algunos números, usar algo de matemáticas y resultar un número pseudoaleatorio.
Para la mayoría de las aplicaciones y juegos de navegador, esta aleatoriedad es suficiente y cumple su propósito.
Leíste: Cómo utilizar el método JavaScript Math.random (), te recomendamos: Crear aplicaciones de WordPress de una página sin API REST
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
