Juegos en JavaScript: frameworks, recursos y ejemplos

Si bien los juegos en JavaScript no son nuevos, ahora con la introducción de HTML5 y todas las novedades que trae la nueva generación de navegadores,  se están convirtiendo en una alternativa cada vez más seria, muy tentadora por la posibilidad de llegar a todo tipo de plataformas: escritorio, portátiles, celulares, tabletas, consolas de videojuegos, etc.

Tal vez el caso más conocido por todos es el recientemente presentado Angry Birds Webapp, que en una alianza entre Rovio (la creadora del exitoso juego) y Google (como promoción de su navegador Chrome) han publicado de forma gratuita en versión web del ya clásico juego.

Aunque se promociona como un juego para Chrome, también es cierto que funciona con otros navegadores modernos que soporten Canvas de HTML5 y Flash. Por ejemplo, le he probado en Firefox 4 sobre Linux y funciona perfectamente.

¿Pero porqué requiere Flash? Bueno, precisamente una de las APIs que están más verdes en este momento es la API de audio, o al menos su funcionamiento está muy variable entre distintos navegadores. Por lo cual han recurrido a una solución pragmática y temporal hasta que madure este tema: usar un pequeño fragmento de Flash para controlar el audio, y hacer todo el resto con HTML5.

En la implementación han usado el framework open source ForPlay, que es un nuevo proyecto Java creado por Google y Rovio para este desarrollo, y que permite a partir del lenguaje Java, generar o compilar distintos tipos de salidas: Desktop Java, HTML5 Browsers, Android y Flash. Esta idea de generar código HTML o Flash a partir de código Java, ya la hemos visto antes en Google GWT (con el cual tiene bastante que ver) o en Adobe Flex.

Como amablemente han publicado este framework bajo una licencia open source, va a permitir que cualquier desarrollador pueda reutilizarlo y mejorarlo, y pronto empezaremos a ver muchos otros proyectos que lo usen o que estén basados en él.

Pero si queremos hacer juegos o aplicaciones que usen HTML5 Canvas, vamos a encontrar que hay muchos otros frameworks open source y/o bajo licencias libres, cada uno con sus propias características. Algunos ejemplos interesantes son:

• gameQuery. es un framework JavaScript basado en jQuery. No parece tan maduro como las demás opciones, pero es muy natural y fácil de asimilar para quienes ya tienen experiencia con jQuery.
• RPG JS: un framework para realizar los clásicos juegos RPG 2D, con características muy completas para este tipo de juegos. Tienen una demo muy bien lograda.
• Akihabara: es un framework JavaScript para HTML5 muy maduro, para realizar todo tipo de juegos clásicos arcade de 8/16 bit. Tienen muchos ejemplos fantásticos de los arcades clásicos, que vale la pena probar :-)

También hay mucha documentación para quien quiera hacer sus primeros pinitos con Canvas. Algunos recursos para empezar pueden ser:

• Tutorial de Canvas de Mozilla MDC: es un excelente recurso, que además se encuentra en castellano y en varios idiomas.
• Canvas Tutorial de billmill.org: es un mini-curso en inglés muy rápido y didáctico, que a través de la construcción paso a paso del clásico juego del breakout, nos enseña todo lo básico para comenzar a realizar nuestros propios juegos. Lamentablemente no explica demasiado los ejemplos, pero el código es muy claro y está armado de tal forma que nos permite experimentar con él sin salir de la página.
• HTML5CanvasTutorial: un tutorial en inglés más extenso, que nos enseña con más detalle las posibilidades de Canvas, con algunos muy buenos ejemplos.  No está tan orientado a juegos, pero es muy buen recurso.

Algunos frameworks incluso combinan varias APIs y técnicas, desde Canvas de HTML5 hasta DHTML, incluso WebGL también. En cuanto a técnicas para implementar juegos, hay muchos sitios para ello, y toda esa experiencia es trasladable a cualquier lenguaje, API o plataforma. Entonces para eso mejor referirse a sitios específicos sobre diseño de juegos.

Los dejo con un catálogo de juegos en JavaScript, donde hay una sección específica con varios ejemplos realizados con Canvas. Hay muchos juegos clásicos y algunos novedosos. Algunos permiten acceder al código fuente para aprender de ellos, otros no, pero igualmente la mayoría son entrenidos :D

Para los que les gustan los juegos solitarios con cartas de póker, encontrarán un fantástico ejemplo de una buena implementación en WorldOfSolitaire, no es libre, está basado en YUI, y está muy bien hecho. La única contra es que aún no tiene un buen soporte de dispositivos móviles (me fue imposible jugarlo en Android).

Google Feed API

Recientemente estuve haciendo un componente web para mostrar una galería de imágenes, a partir de una fuente pública de datos (un feed atom).

Sin duda hay muchísimas maneras de hacerlo. Necesitaba una solución que usara únicamente JavaScript, porque el componente sería usado en un sitio alojado en blogger.

Hay varias librerías JS, y para facilitar las cosas, muchos plugins en jQuery si se quiere también. Pero como adelantó el título, aquí voy a usar la Google Feed API.

Es una de las tantas APIs que Google pone a disposición de los desarrolladores, a cual más interesante. Si bien son gratuitas, es necesario generar un identificador API KEY que será asociado al sitio que usará la API. De esta forma ellos pueden hacer seguimiento de qué uso se le da a la misma, desde qué sitios, lo habitual del Gran Hermano :D

La API permite descargar flujos Atom, RSS, y RSS de medios (como podcasts), usando solo JavaScript. De esta forma, podemos procesar el contenido para aprovecharlo en otras cosas, como en un mapa de Google Maps, en alguna linda animación, en una galería, y en cualquier otra cosa que se nos ocurra. El límite es nuestra imaginación :)

La ventaja es que todo el procesamiento pesado y todo el trabajo sucio (como lidear con proxies), lo realizan los servidores de Google de una forma óptima, dejándonos utilizar el resultado de forma muy sencilla, con unas pocas líneas de código JS. El resultado en si, se presenta como objetos JSON: más fácil imposible. Para los detalles, revisen la documentación, que parece completa y sencilla.

Lo mejor de todo, es que como con otras APIs de Google, nos ofrecen una practiquísima "área de pruebas", para aprender rápidamente cómo funciona, y apenas adaptando un poco el ejemplo que nos presenta, en cuestión de minutos podemos tener lista nuestra solución o al menos un bosquejo funcionando.

También hay APIs para todos los servicios de Google: search, books, youtube, maps, earth, blogger, traslation, etc.

Les dejo como ejercicio hacer el ejemplo :D. Les aseguro que en cuestión de minutos pueden armar algo muy interesante. Yo armé una galería de imágenes (slideshow) con jQuery, procesando un feed Atom del sitio deviantArt. Si puedo, en algún momento les mostraré un poco al respecto. Si prueban la API, dejen sus comentarios a ver qué les pareció.