En este tutorial crearemos un juego animando elementos HTML en forma de corazón con JavaScript.

Llega el 14 de febrero y San Valentín desea crear un pequeño juego animando un grupo de elementos en forma de corazón con JavaScript. Para ello, lo primero que aprenderemos a crear es un elemento de HTML en JavaScript: con el método .createElement("DIV"), creamos un elemento del tipo div, con .className asignamos una clase a este elemento y por último con el método .appendChild lo asignamos como un hijo del elemento body

//Crear corazon
let heart = document.createElement("DIV");
heart.className = "heart";
document.body.appendChild(heart);

Para poder visualizar el elemento creado, le asignaremos unas medidas en ancho y largo con el objeto style, además en CSS damos un color de fondo a todos lo elementos con la clase “heart”.

//Asignar tamaño       
let tam = 100;
heart.style.width = tam+"px"
heart.style.height = tam+"px"

.heart {
  background: #e74c3c;
}

Podremos asignar todos los estilos directamente desde JavaScript, pero por eficiencia colocaremos las propiedades comunes a todos los corazones en CSS. Una de estas propiedades es position con valor absolute, ya que queremos que nuestros elementos en forma de corazón sean libres de moverse por toda la ventana del navegador.

.heart {
  position: absolute;
}

La posición x e y dentro de la ventana no siempre serán las mismas para los corazones por ello, estas propiedades se asignan desde JavaScript.

//Asignar posición inicial
let posy = 100;
heart.style.top = posy+"px"
let posx = 200;
heart.style.left = posx+"px"

Para poder visualizar el elemento creado, le asignaremos unas medidas en ancho y largo con el objeto style, además en CSS damos un color de fondo a todos lo elementos con la clase “heart”.

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #e74c3c;
  border-radius: 50%;
}

Ubicamos uno en la parte derecha.

.heart::after {
  top: 0;
  right: -50%;
}

Y el otro en la parte superior.

.heart::before {
  top: -50%;
  left: 0;
}

Para girar nuestro elemento hacemos uso de la propiedad transform.

.heart {
  transform: rotate(-45deg);
}

Con esto ya tenemos la forma visual del corazon completa.

Ahora vamos a crear muchos de estos: creamos una variable indicando el número de corazones, y hacemos un ciclo for, en el cual añadiremos las secciones de creación asignación de tamaño y posición inicial.

var num = 10;

for(i=0;i

Como las variables tam, posx y posy siempre tienen el mismo valor los corazones creados son idénticos, para crear corazones en posiciones y de tamaño aleatorio, usaremos el método random.

// Tamaños desde los 20px hasta los 55px
let tam = Math.floor((Math.random() * 20) + 15);

En las posiciones haremos uso de dos valores el ancho y el alto de la ventana, para evitar que se creen fuera de esta.

var w = window.innerWidth;
var h = window.innerHeight;

//Parte inferior de la ventana
let posy = Math.floor((Math.random() * 0.1*h) + 0.8*h);
//Ancho de la ventana dejando un margen del 10%
let posx = Math.floor((Math.random() * 0.8*w) + 0.1*h);

Tenemos 10 corazones de diferente tamaño y en posiciones aleatorias.

¡Ahora es momento de dar movimiento a estos elementos! Primero tenemos que asignarles una dirección, por ello creamos un par de arrays que contendrán las direcciones x e y con que se moverán los corazones.

var dirx = [ ];
var diry = [ ];

En el bucle de inicialización, asignamos valores aleatorios para cada elemento, además de un id que identifica a cada elemento según el índice.

//Crear vector dirección y id
heart.id = "h"+i;
diry[i] = Math.floor((Math.random() * 5) - 10); // de -10 a -5
dirx[i] = Math.floor((Math.random() * 10) - 5); // de -5 a 5

Ahora crearemos un timer con la función setInterval, que ejecutará la función move cada 60 milisegundos.

setInterval(function() {
  move()
}, 60);

Declaramos la función move, con un bucle con el mismo número de repeticiones que el de creación de elementos. Aquí seleccionamos el elemento mediante su id.

function move(){
  for(i=0;i

Obtenemos la posición actual en píxeles y la pasamos a número mediante parseInt, luego le agregamos los pixeles de dirección, almacenados en los arrays iniciales, esto lo almacenamos en dos variables x e y respectivamente.

//Aumento de coordenadas
let y =  parseInt(heart.style.top) + diry[i];
let x =  parseInt(heart.style.left) + dirx[i];

Para evitar que los elementos desaparezcan, creamos unas condiciones: si detectan que un elemento se sale del rango visual, deberá retornar en la dirección opuesta, de esta manera se reciclarán los elementos.

//Reinicio de coordenadas
if (x > 0.8*w) { x = 0.2*w;}
if (x < 0.2*w) { x = 0.8*w;}
if (y < 0.2*h) { y = 0.8*h;}
if (y > 0.8*h) { y = 0.2*w;}

Ahora solo queda asignar las nuevas posiciones a los elementos y ver el movimiento de nuestros elementos.

//Asignación de coordenadas
heart.style.top = y + "px";
heart.style.left = x + "px";

Si no te gusta San Valentín, ¡no te preocupes! Programaremos una función que permitirá que al dar click, desaparezcan estos corazones.

Primero asignamos el evento onclick a cada uno de los elementos en el bloque de creación, este evento llamara a la función deleteheart.

//Asignar evento
heart.setAttribute("onclick","deleteheart(this)")

Esta función cambiará la propiedad CSS de display a none, para dejar de visualizarlo.

function deleteheart(element){
  element.style.display = "none";
}

¡Da click y elimina esos corazones!

Recuerda que si deseas aprender más sobre JavaScript en DevCode puedes inscribirte inmediatamente al Curso de fundamentos de JavaScript para aprender a dominar el lenguaje de programación del futuro. Además tenemos muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios. ¡Hasta pronto!