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).