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? 😀