newyear2014img

Feliz Año 2014 a todos los Ferneteros+Javascripteros!, les dejo una nueva locura, en este caso es un juego … El objetivo es que no se apaguen todas las luces, así que cuando una se falla hay que darle un golpecito con un click para que se prenda de nuevo :)

Lo armé con una imagen completa de fondo del canvas y lo que renderiza son solo las luces tomando desde un array binario (0 = nada y 1 = luz):

[
  [0,1,0,0,0,1,0,0,0,1,0,0,0,1],
  [1,0,1,0,1,0,1,0,1,1,0,0,1,1],
  [0,0,1,0,1,0,1,0,0,1,0,1,0,1],
  [0,1,0,0,1,0,1,0,0,1,0,1,1,1],
  [1,0,0,0,1,0,1,0,0,1,0,0,0,1],
  [1,1,1,0,0,1,0,0,0,1,0,0,0,1]
]

Luego escucho al evento del click del mouse en el canvas y me fijo si el punto (x, y) se encuentra dentro del círculo de una de las luces.

Las chispas las hice con un sistema de partículas aplicando velocidad aleatoria en x e y con gravedad para que bajen siempre, tamaño y opacidad aleatorias también.

El efecto de “luz” lo hice dibujando varios círculos por cada luz reduciendo el radio y su opacidad; y, al dibujar, aplicando en el canvas el globalCompositeOperation a “lighter”. Acá pueden ver las operaciones que se pueden usar en el dibujo de canvas, hay muuchas cosas para probar y divertirse con eso.

Espero que lo disfruten para unos 5 minutos de revivir luces, el código esta todo en el fiddle, si bien son pocas lineas, puede que sea medio a los golpes así que si tienen dudas pregunten!.

A cuantas luces llegaste? 😀