A menudo, mientras desarrolla proyectos, se encontrará buscando formas de generar números aleatorios.
Los casos de uso más comunes para generar números aleatorios son los juegos de azar, como tirar dados, barajar cartas y girar ruedas de ruleta.
En esta guía, aprenderá cómo generar un número aleatorio usando el Math.random()método construyendo un mini juego de dados.
El método Math.random ()
El Mathobjeto en JavaScript es un objeto integrado que tiene propiedades y métodos para realizar cálculos matemáticos.
Un uso común del Mathobjeto es crear un número aleatorio usando el random()método.
const randomValue = Math.random();Pero el Math.random()método en realidad no devuelve un número entero. En su lugar, devuelve un valor de punto flotante entre 0 (inclusive) y 1 (exclusivo). Además, tenga en cuenta que el valor devuelto Math.random()es de naturaleza pseudoaleatoria.
Los números aleatorios generados por Math.random()pueden parecer aleatorios, pero esos números 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 nunca puede ser verdaderamente aleatoria por naturaleza. Es por eso que los llamamos generadores de números pseudoaleatorios (PRNG).
Para obtener más información sobre el Math.random()método, puede consultar esta guía.
Función de generador de números aleatorios
Ahora usemos el Math.random()método para crear una función que devolverá un número entero aleatorio entre dos valores (inclusive).
const getRandomNumber = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };Analicemos la lógica aquí.
El Math.random()método devolverá un número de punto flotante entre 0 y 1 (exclusivo).
Entonces los intervalos serían los siguientes:
[0 .................................... 1) [min .................................... max)Para factorizar el segundo intervalo, reste min de ambos extremos. Entonces eso le daría un intervalo entre 0 y max-min.
[0 .................................... 1) [0 .................................... max - min)Entonces, ahora, para obtener un valor aleatorio, haría lo siguiente:
const x = Math.random() * (max - min)Aquí xestá el valor aleatorio.
Actualmente, maxestá excluido del intervalo. Para hacerlo inclusivo, agregue 1. Además, debe agregar el minreverso que se restó anteriormente para obtener un valor entre [min, max).
const x = Math.random() * (max - min + 1) + minMuy bien, ahora el último paso que queda es asegurarse de que xsiempre sea un número entero.
const x = Math.floor(Math.random() * (max - min + 1)) + minPodría usar el Math.round()método en lugar de floor(), pero eso le daría una distribución no uniforme. Esto significa que ambos maxy mintendrán media oportunidad de salir como resultado. El uso Math.floor()le dará una distribución perfectamente uniforme.
Entonces, ahora que tiene una comprensión clara de cómo funciona una generación aleatoria, usemos esta función para simular el lanzamiento de dados.
El juego de los dados rodantes
En esta sección crearemos un minijuego de dados realmente sencillo. Dos jugadores ingresan su nombre y tirarán los dados. El jugador cuyo dado tenga un número mayor ganará la ronda.
Primero, cree una función rollDiceque simule la acción de lanzar los dados.
Dentro del cuerpo de la función, llame a la getRandomNumber()función con 1y 6como argumentos. Esto le dará cualquier número aleatorio entre 1 y 6 (ambos incluidos), como funcionarían los dados reales.
const rollDice = () => getRandomNumber(1, 6);A continuación, cree dos campos de entrada y un botón como se muestra a continuación:
Roll Dice Cuando se hace clic en el botón 'Lanzar dados', obtenga los nombres de los jugadores de los campos de entrada y llame a la rollDice()función 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 = ` ${player1} => ${player1Score}
${player2} => ${player2Score}
${result}
`; }); Puede validar los campos de nombre de los jugadores y embellecer el marcado con algo de CSS. En aras de la brevedad, lo mantendré simple para esta guía.
Eso es. Puedes ver la demostración aquí.
Conclusión
Entonces, generar números aleatorios en JavaScript no es tan aleatorio después de todo. Todo lo que estamos haciendo es ingresar algunos números, usar algo de matemáticas y escupir un número pseudoaleatorio.
Para la mayoría de las aplicaciones y juegos basados en navegador, esta aleatoriedad es suficiente y cumple su propósito.
Eso es todo por esta guía. Mantente a salvo y sigue codificando como una bestia.