Ejercicio Random Javascript

Contactar con el profesor

Planteamiento de resolución

Necesitaremos un bucle que en cada iteración pinte una moneda sobre el mapa utilizando unas coordenadas aleatorias. Por tanto en cada iteración, debemos de calcular un número aleatorio que vaya desde 0 hasta el ancho total de la fotografía. Esta será la coordenada horizontal de la moneda.

Luego, calcularemos otro número aleatorio para la coordenada vertical.

Utilizando dichas coordenadas, podremos pintar una moneda con una ubicación aleatoria en la pantalla.

Sin embargo, no queremos pintar sólo una moneda, sino diez. Para lograr esto, en cada iteración iremos acumulando el código fuente de las monedas en una variable.

Cuando el bucle termine, pintaremos todas las monedas sobre el mapa.

Sobre los números random

Calcular un número random o aleatorio dentro de un rango en Javascript no es tan trivial como en otros lenguajes. La función que usaremos (Math.random()) nos devuelve un número aleatorio con decimales entre 0 y 1. Luego nosotros, haciendo uso de sumas y redondeos debemos transformar ese número aleatorio entre 0 y 1 a un número aleatorio entre 25 y 75, por ejemplo.

Para ello, yo utilizo la fórmula que indico a continuación. La copio, la pego y sustituyo los valores. Es una fórmula fácil de razonar, pero francamente, cuando la necesito, la copio y la pego:


Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

Y a continuación, la misma fórmula pero sustituyendo valores:

Math.floor(Math.random() * (75-25+1)) + 25;

En cuanto a la maquetación HTML de este ejercicio

Cuando quiero ubicar con total libertad un elemento dentro de otro, como es el caso de este ejercicio en el que quiero ubicar las monedas dentro de la capa contenedora, utilizo el estilo “position:relative” para la capa contenedora y “position:absolute” para los elementos internos que quiero ubicar.

Por otra parte, si quiero que los elementos que exceden las dimensiones de una capa no se vean, utilizaré el estilo “overflow:hidden”.

← Obtener la letra del DNI
Extras →

Aviso Legal | Política de privacidad