Space Invaders 404
FernetJS tiene ahora un error 404 personalizado en canvas! … claro, no podía faltar!
El clasico juego Space Invaders en javascript usando el amado CANVAS para mostrar algo mas divertido que un 404 – Not Found.
El objetivo era, aparte de ser un code for fun, que sea muy configurable y que no use ni media imagen! … todo lo que se dibuja en el CANVAS es a partir de arreglos JSON de números. Por ejemplo:
Disposición de la invasión alienígena
Disposición de los ladrillos para el escudo
Los aliens, cada ladrillo del escudo, la nave y los disparos también son arreglos …
… pero claro, todo iba muy bien hasta que empecé a tener muchas instancias volando por cada objeto dibujable. Digamos que tenia que dibujar bloque por bloque por cada elemento y rápidamente la performance se me fue al pozo.
Es ahí cuando empecé a investigar como podría mejorar eso sin tener que crearme los sprites (imágenes por cada elemento) y descubrí el canvas.toDataURL(“image/png”). Para mi magia personal, eso nos devuelve un data con toda la imagen en texto, por lo que entonces solucioné la performance generando las imagenes antes de comenzar el juego y despues simplemente usandolas.
Una cosa llevó a la otra y terminé armando una pequeña librería para hacer lo mismo mas simple. En estos días voy a postearla …. pero mientras tanto … a matar aliens!
Les dejo los fuentes y como usarlo en github, está de más decir que son libres de hacer un FORK, modificarlo a su gusto y usarlo