Ejercicio JS – Salva pantallas primitivo con javascript

Ejercicio JS – Salva pantallas primitivo con javascript

Print Friendly, PDF & Email
Ejercicio JS – Salva pantallas primitivo con javascript
Valora esta entrada
Este ejercicio es un compendio de varios anteriores.

Entre los conceptos trabajados en ejercicios anteriores utilizaremos:

  • Creación de números aleatorios dentro del intervalo que nos interese. Repasar este ejercicio
  • Creación de nodos e inserción de nodos. Repasar este ejercicio.
  • Modificación de los estilos border, width, height de una caja mediante Javascript. Repasar este resumen de clase.
  • Uso de setInterval() y clearInterval().

Además será necesario tener claros los conceptos de posicionamiento relativo y posicionamiento absoluto mediante CSS de cajas.

Nota importante: No voy a hacer uso de <canvas> a pesar de que seria muy interesante. Lo dejamos para más adelante.

Hecho la introducción de rigor vayamos al ejercicio.

Enunciado

Dado un contenedor de 600px x 600px centrado vertical y horizontalmente en una página web, programa una rutina que cada 500 milisengundos lo rellene con un nuevo rectángulo de color, ancho, alto y grosor aleatorio.

Haz también que cuando el usuario haga click dentro del elemento contenedor el programa se pare.

Pistas:

  • Una forma de generar un color aleatorio es mediante la nomenclatura rgb(255,255,255) dónde cada número es un valor del 0 al 255.
  • Puedes posicionar elementos en el espacio usando las propiedades top y left.
resultado final ejercicio.
Ejemplo de salvapantallas primitivo creado sin usar canvas

Solución del ejercicio

Para solucionar el ejercicio es conveniente romper un problema complejo en muchos más simples.

La metodología recomendada es:

  1. Conseguir insertar un rectángulo de dimensiones, color y grosor impuesto por nosotros, por ejemplo azul, mediante una mezcla de html, css y javascript. El rectángulo se inserta creando un nodo y asignándolo al contenedor.
  2. Modificar el script anterior para que cada vez se cargue el documento el grosor del rectángulo sea un número aleatorio entre el 1 y el 10 (por ejemplo).
  3. Modificar el script para que ahora también el ancho y la altura sean aleatorios. Una particularidad será que el ancho y la altura nunca tendrán que ser más grande que el ancho y la altura disponibles del contenedor (se deberá hacer una resta).
  4. Modificar el script anterior para que ahora además el posicionamiento de tipo absoluto tenga un top y un left distinto cada vez.
  5. Una vez conseguidos todos los apartados anteriores incorporar setInterval() para que se cree un nuevo rectángulo cada vez.
  6. Conseguido el punto 5 modificar el programa para añadir clearInterval() y que active cuando se haga click dentro del contenedor (mediante addEventListener).

¿Como queda el documento html?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Salvapantallas primitivo">
        <meta name="author" content="Francesc Ricart">
        <title>Creación de un salvapantallas simple</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
    <div id="salvapantallas"></div>
    <script src="js/functions.js"></script>
    </body>
</html>

Código CSS

*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}
#salvapantallas{
    width:600px;
    height:600px;
    border:1px solid #000;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-300px;
    background-color:#f2f2f2;
}
.figura{
    position:absolute;
    border-style:solid;
}

Como particularidad se crea una clase de nombre figura que se asignará a todos los rectángulos que se crearán en el script.

Cómo crear un rectángulo mediante JS

La función crearRectangulo() es el pilar de la resolución del ejercicio.

  1. Crear rectángulo
  2. Asignar propiedades al rectángulo. Para ello necesitamos pasar la variable a todas las funciones llamadas.
  3. Insertar rectángulo en el lienzo.
function crearRectangulo(){
    var rectangulo = document.createElement("div");
    rectangulo.className = "figura";
    asignarColor(rectangulo);
    asignarPosicion(rectangulo);
    asignarDimensiones(rectangulo);
    asignarGrosor(rectangulo);
    lienzo.appendChild(rectangulo);
}

Como asignar un número aleatorio dado un valor máximo

Esta función es muy útil pues se usará para devolver valores aleatorios del 0 al 255, del 1 al 10, del 1 al 600. Se usó en el ejercicio de crear un dado aleatorio de 6 caras.

function numAleatorio(max){
    return parseInt(max*Math.random()+1)
}

Crear y asignar un color aleatorio

Una forma de generar el color aleatorio es mediante la nomenclatura rgb(a,b,c) dónde a, b y c son números aleatorios del 0 al 255.

function asignarColor(rectangulo{
  rectangulo.style.borderColor=colorAleatorio();
}

function colorAleatorio(){
    return "rgb(" + numAleatorio(255) + "," + numAleatorio(255)+"," + numAleatorio(255) + ")";
}

Asignar posición, dimensiones y grosor

Se sigue la misma lógica que con la asignación de un color aleatorio.

En este caso el ancho máximo y altura máximo que podrá tener el rectángulo es la diferencia entre el el top y el left aleatorios generados menos la dimensión máxima del contenedor de ancho o altura.

function asignarPosicion(rectangulo){
    rectangulo.style.top=numAleatorio(600)+"px";
    rectangulo.style.left=numAleatorio(600)+"px";
}
function asignarDimensiones(rectangulo){
    rectangulo.style.width=largoAleatorio(rectangulo.style.left);
    rectangulo.style.height=largoAleatorio(rectangulo.style.top);
}
function asignarGrosor(rectangulo){
    rectangulo.style.borderWidth=grosorAleatorio(10);
}
function largoAleatorio(tope){
    var lado = parseInt(lienzo.style.width);
    var disponible = 600-parseInt(tope);
    return numAleatorio(disponible)+"px";
}
function grosorAleatorio(max){
    return numAleatorio(max)+"px";
}

Inicialización y eliminación intervalo

Una vez somos de crear un rectángulo de posición aleatoria, color aleatorio, border, width y height aleatorios; el siguiente paso es ser capaces de llamarlo mediante setInterval() y guardarlo en una variable.

A continuación hacemos que cuando se haga click dentro del lienzo se elimine el intervalo.

window.onload = init;

function init(){
    lienzo = document.getElementById("salvapantallas")
    crearRectangulo();
    id=setInterval(crearRectangulo,500);
    lienzo.addEventListener("click",function(){clearInterval(id)});
}

Podéis descargar todo el código en este enlace.

Descargar solución salvapantallas

¡Hola!

Querido lector,

Este ha sido un ejercicio completo que se podría perfeccionar muchísimo más. Pero por hoy es más que suficiente.

¿Te animas a plantear el ejercicio de nuevo mediante <canvas>?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 145
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Eliminar eventos Javascript .removeEventListener()
- 919
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Validación de formularios web: Como desactivar el envío con Javascript
- 556
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante preventDefault().
Instrucción “this” de Javascript explicada paso a paso
- 248
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Ejercicio – ¿Estamos en fin de semana?
- 119
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 286
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 138
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Tipos de variables en Javascript
- 933
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
Acceder y modificar una web con javascript
- 442
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Carácteres escapados en Javascript
- 296
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.