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

Galería de imágenes usando jQuery

Continuando con el artículo anterior, vamos a ver cómo hacer una sencilla galería de imágenes estáticas. Este ejemplo y el código del mismo, está basado en How to Create your own jQuery Slider Plugin, aunque le he modificado algunas cosas para mejorar su reutilización, manteniendo la misma idea y sin grandes cambios.

La técnica usada es una de las más comunes, y se puede adaptar a muchas otras cosas. Tenemos una lista de imágenes, inicialmente ocultas, que se irán mostrando de a una a la vez, usando algo de JavaScript. Agregándole un efecto en la transición del cambio de imagen, es de lo más trivial gracias a jQuery, logrando un resultado mucho más cuidado.

Vamos por partes.

Primer paso: el HTML

<div class="slideshow">
        <h3><a href="#">Título</a></h3>
        <ul>
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
        </ul>
        <div class="counter"></div>
</div>
El <div> con clase "slideshow" será el contenedor. Se usará para inicializar el plugin de jQuery y para brindarle estilos al componente. Dentro hay un título, una lista de elementos con UL-LI, y un contenedor para mostrar el número de página actual y el número total. Es interesante el uso de una lista UL, porque semánticamente expresa mejor su intención, que por ejemplo si hubiésemos usado DIV, SPAN, TABLE, u otro elemento. Las listas también las podemos encontrar adecuadas para representar pestañas/tabs, etiquetas, menúes, etc., al menos hasta usar HTML5, que nos trae nuevas etiquetas más específicas, como NAV.

Segundo paso: el CSS

<style>
.slideshow { background:#FFF; width:500px; border:1px #000 solid; margin:20px auto; padding:15px;}
.slideshow ul { width:500px; height:auto; min-height: 335px; overflow: hidden; position:relative; padding:0; margin:0;}
.slideshow li { position:absolute; top:0px; left:0px; display:none; list-style:none;}
.slideshow li img { width: 100% }
.slideshow li:first-child {display:block;}
.slideshow .counter {text-align:right; width:100%;}
</style>
Los 500px en las lineas 3 y 5 determinan el ancho de la galería. Los 335px en la linea 5 determinan la altura. En la linea 7, se hacen invisibles todos los LI con display:none, y se les quita toda la decoración por defecto (el círculo o botón que prefija a cada elemento de una lista). Después, en la linea 11 se hace visible solo al primer elemento de la lista.
El UL tiene position:relative, y los LI tienen position:absolute. Como el contenedor de los LI (el UL) tiene posicionamiento, las coordenadas de los LI toman como origen de las coordenadas a su padre, y se posicionan todos en (0px, 0px), lo que hace que todos los elementos queden en el mismo lugar. Podemos pensar que están como "apilados", unos encima de otros (pero no tienen distinto z-index, realmente están todos al mismo nivel de stack).

Tercer y último paso: el JavaScript

(function($){
        $.fn.slideshow = function(interval) {
                var slides;
                var cnt;
                var amount;
                var i;
                function run() {
                        // hiding previous image and showing next
                        $(slides[i]).fadeOut(1000);
                        i++;
                        if (i >= amount) i = 0;
                        $(slides[i]).fadeIn(1000);
                        // updating counter
                        cnt.text(i+1+' / '+amount);
                        // loop
                        setTimeout(run, interval);
                }
                slides = $(this).find('ul').children();
                cnt = $(this).find('.counter');
                amount = slides.length;
                i=0;
                // updating counter
                cnt.text(i+1 + ' / ' + amount);
                setTimeout(run, interval);
        };
})(jQuery);
$(function(){
        $('.slideshow').slideshow(5000);
});

Aquí voy a tener que deternerme un poco más. Entre las lineas 1 y 51 se crea un plugin de jQuery. Este fragmento deberíamos guardarlo en un archivo aparte como slider-jquery-plugin.js para vincularlo a la página.
Las líneas 54 a 56 es una forma típica de realizar inicializaciones con jQuery, es decir, de ejecutar algo una vez que la página está cargada y la DOM está liberada para recibir modificaciones. La expresión $('.slideshow') de jQuery busca a los elementos que tengan el class 'slideshow', y les aplica el plugin slideshow(), El parámetro que se pasa es el tiempo en milisegundos que queremos de demora entre una imagen y la siguiente, en este caso de 5 segundos.
Luego, entre las lineas 35 y 47 se hace la incialización del plugin. No voy a detenerme aquí, pero basta decir que recupera a los elementos hijos del UL (los LI) y los guarda en un arreglo llamado 'slides', y en la linea 47 registra un timer que llamará al método run() del plugin en X tiempo (que fue recibido por parámetro).
El método run(), definido entre las lineas 13 y 33, es donde sucede lo interesante. Primero hace un efecto fadeOut() ("desaparecer") sobre el item actual, avanza al siguiente item, y hace un efecto fadeIn() ("aparecer") sobre el siguiente elemento. Si se llega al último elemento, se vuelve a comenzar con el primero. Se actualiza el contador de página/imagen actual, y se vuelve a registrar un timer para volver a llamar a run() en otro X tiempo.
Lo interesante de esto, es que se aprovecha de una característica de los efectos especiales (FXs) de jQuery, que son implementados como animaciones. Estas animaciones, cuando inicializan, en realidad estamos pidiendo que comiencen, y durarán un tiempo predefinido (normalmente 200 milisegundos, que se puede cambiar pasando un parámetro al efecto). Entonces, al solicitar la desaparición del elemento actual, y la aparición del elemento siguiente, y al animarse ambos a la vez, para nuestros ojos se produce un efecto de fusión (o morph) de una imagen en otra, que es solo un efecto visual. Como ven, era más largo explicarlo que hacerlo :D
Al combinar todo, recuerden que deben incluir la libería JavaScript de jQuery. Una forma de hacerlo es cargarla desde el CDN (Content Delivery Network) de Google, donde está a disposición de los desarrolladores web muchas librerías JS de uso habitual. Por ejemplo, pueden hacerlo así:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Les dejo una versión completa para descargar y probar localmente. A continuación tienen el ejemplo terminado. No olviden hacer sus comentarios y sugerencias.

Los Fantásticos Labradores

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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