Curso de JavaScript | 10. Números aleatorios con JavaScript

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Números aleatorios con JavaScript: el primer pequeño juego de cálculo mental
Nuestro objetivo es programar juegos con JavaScript. Hasta ahora conocimos muy pocos comandos como para programar un juego con ellos. Pero con cada comando adicional y cada nueva posibilidad, surgen opciones adicionales.

Nuestro primer juego (muy simple) es el cálculo mental contra la computadora (o el celular), que por supuesto siempre tiene razón. Así que es mas bien un juego de control acerca de qué tan rápido uno es en el cálculo mental.

Lo que hemos aprendido hasta ahora es:

• Podemos imprimir algo en la ventana del navegador.
• Podemos realizar cálculos.
• Podemos almacenar contenido en las variables (aquí necesitamos números para nuestro juego).

¿Qué nos falta todavía para nuestro juego?

• Numeros al azar.
• La posibilidad de no mostrar el resultado de forma inmediatamente y visible.

Conoceremos ambas cosas en los siguientes capítulos y así podremos implementar nuestro primer pequeño juego.


Generar números aleatorios
Ningún juego puede prescindir de un proceso aleatorio y, por lo tanto, de números aleatorios. Ahora vamos a familiarizarnos con un método llamado random() en el objeto Math. Por favor, no se asusten por los términos objeto y método. El concepto de los objetos y métodos se explicará en detalle más adelante; lo bueno es que podemos simplemente usarlo al principio y experimentar la función. Lo típico es conectar el objeto a través de un punto con el método deseado. La ortografía es importante: ¡Math debe de escribirse con mayúscula! Por favor pongan atención en ello.

Veamos qué obtenemos como resultado cuando simplemente ejecutamos Math.random();.

let numero1;
numero1 = Math.random();
document.write(numero1);

Genial: cada vez que ejecutamos el programa, obtenemos un número aleatorio. Simplemente actualicen sus navegadores reiteradamente.



Lo llamativo aquí es que este número siempre es menor a 1.

Tal como lo define el comando random(), siempre se generan números entre 0 (incluido 0) y menos de 1.

No queremos usar números tan pequeños para nuestro juego, todavía no.

Si ahora queremos obtener números aleatorios entre 1 y 10, entonces tenemos que incluir esto en nuestro cálculo.

Veamos la sección superior. Queremos números hasta el 10 (incluido el 10). Para hacer esto, primero tenemos que multiplicar nuestro número por 10:

let numero1;
numero1 = Math.random() * 10;
document.write(numero1);

Si lo ejecutamos varias veces, obtenemos, por ejemplo, los siguientes resultados:





Para obtener también el 10, necesitamos sumar 1 a nuestro resultado.

let numero1;
numero1 = Math.random() * 10 + 1;
document.write(numero1);

Esto nos da nuestro rango de números entre 1 y 10, un 1 como también un máximo de 10. Si se quisiera un rango de números diferente que no necesariamente tenga que comenzar con 1, se aplica la siguiente fórmula (en aras de la exhaustividad):

Math.random() * (maximo - minimo + 1) + minimo;

Por supuesto, queremos mantener nuestro juego de cálculo mental de forma simple - no deben de haber lugares decimales en nuestros números. Aquí, nuestro objeto Math tiene el método floor. También este método podemos usar fácilmente sin tener mucha idea de los métodos y objetos. Lo único importante para nosotros es que como resultado de floor el siguiente entero más bajo (es decir, sin lugares decimales) vuelva (el método de floor redondea los números).

Ahora, por supuesto, podemos usar una notación más engorrosa para mantenerlo transparente para el comienzo, como por ejemplo:

let numero1;
let numeroentero;
numero1 = Math.random() * 10 + 1;
numeroentero = Math.floor( numero1 );
document.write(numeroentero);

Sin embargo, nuestros 2 nuevos "comandos" también se pueden anidar. Entonces no necesitamos ninguna variable adicional que deba definirse por separado.

El código entonces se ve así:

let numero1;
numero1 = Math.floor( Math.random() * 10 + 1 );
document.write(numero1);

El resultado devuelto por Math.random() que se pasa al método Math.floor() (siempre se lee desde atrás) y ese resultado se almacena en nuestra variable número1.

Para nuestro juego queremos 2 variables, que luego multiplicamos. Los números individuales y el resultado de la multiplicación deben mostrarse directamente en el navegador. ¡Pruébelo ustedes mismos antes de ver la siguiente solución!

let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );

Por supuesto, el juego no es realmente emocionante si el resultado se muestra inmediatamente. Podríamos desplazar el resultado hacia abajo en la pantalla del navegador para que el jugador primero tenga que desplazarse hacia abajo para encontrar la solución. Todavía no podemos hacer nada más con nuestro nivel actual de conocimiento.

let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ?');
document.write('



     mucho 
     
     ');
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );

Este resultado solo debe mostrarse después de una acción del jugador. Ahora también llegamos al punto en que queremos separar la salida HTML de nuestra salida del programa JavaScript. Hasta ahora la salida a través de document.write(); es un método poco práctico. Queremos poder agregar o reemplazar áreas en un archivo HTML existente. Para esto necesitamos el DOM (en inglés "Document Object Model"), que será introducido en los siguientes capítulos.