Mozilla decidió que era hora de ofrecer un poco de acción y diversión, para garantizarla han lanzado BrowserQuest, un juego de aventura desarrollado en HTML5 y JavaScript, que además es masivo y multijugador.
BrowserQuest es un tributo a los juegos de aventura de antaño con el añadido multijugador. No vamos a encontrar gráficos 3D impresionantes, pero sí podremos explotar todo el poder de HTML5 y JavaScript.
No entraré en detalles sobre la historia del juego, ya que no es muy diferente a lo que hemos disfrutado en el pasado y me centraré más en la tecnología utilizada para hacerlo posible.
WebSockets
Los WebSockets forman parte de una nueva tecnología que provee un canal de comunicación bidireccional entre el navegador y el servidor web aprovechando el protocolo TCP, lo que permite crear sesiones interactivas sin consumir mayores recursos o ancho de banda.
En este caso concreto, los WebSockets permiten sincronizar la información del juego entre el servidor y el navegador de los usuarios, compartiendo pequeñas porciones del mismo código JavaScript, gracias a la conocida plataforma Node.js.
Para los interesados, el código que se ejecuta del lado del servidor está disponible en Github.
La web como plataforma
BrowserQuest aprovecha todo el potencial de la tecnología web disponible en la actualidad y de algunos elementos que cada vez son más populares en el desarrollo de este tipo de aplicaciones.
< canvas >: El elemento < canvas > de HTML5 es quizá uno de los más importantes de esta tecnología, gracias a el es posible dibujar gráficos, realizar animaciones e incluso procesar vídeo en tiempo real mediante scripts, principalmente escritos en JavaScript. Este elemento también está siendo utilizado para ofrecer aceleración por hardware para gráficos 3D en las páginas web.
Web workers: Esta tecnología provee, de manera simple, la capacidad de correr scripts usando hilos de proceso que se ejecutan en segundo plano. Una vez que un Web worker es creado, éste tiene la capacidad de enviar mensajes a un manejador de eventos con instrucciones para ejecutar tareas específicas.
localStorage: Permite almacenar información de manera local en el cliente, puede entenderse como una especie de base de datos -pero sin confundirlas con estas-. Los datos son almacenados en pares tipo (clave, valor) que si bien podrían guardarse en cookies, afectan de manera considerable el rendimiento de este tipo de aplicaciones.
CSS media queries: Gracias a esta característica disponible en CSS3 es posible manejar las hojas de estilo de manera que se comporten de manera distinta, dependiendo del medio en el que son invocadas. Para hacerlo más simple, el estilo de las páginas se ajusta automáticamente de acuerdo al tamaño de la pantalla de los dispositivos o la ventana de navegador, sin necesidad de realizar cambios en el contenido.
**< audio >: Otro elemento importante de HTML5, que permite insertar y manipular audio directamente sobre documentos HTML y XHTML mediante JavaScript.
Juega donde quieras
Gracias a estas tecnologías es posible disfrutar de la misma experiencia de juego, sin importar el tamaño de la pantalla del dispositivo o su Sistema Operativo. BrowserQuest se verá y disfrutará igual si se juega en el ordenador, en un iPad, en una tableta o un móvil con Android, así como en un iPhone. La única condición es acceder desde un navegador con soporte para HTML5 con WebSockets activados**. Las últimas versiones de Firefox, Chrome, Safari y Opera no deberían dar ningún tipo de problema.
La combinación HTML5/JavaScript tiene un potencial realmente asombroso, como podemos ver no solo en BrowserQuest, sino también en otros juegos como los que se encuentran en esta excelente recopilación de 8 juegos desarrollados en HTML5.
Sin duda alguna, este par de tecnologías terminarán -en un futuro no muy lejano- desplazando totalmente a Flash en lo que a desarrollo de juegos a través del navegador se refiere. En mi opinión, el tiempo para que esto suceda dependerá directamente del ritmo con que los navegadores vayan dando soporte a las nuevas características disponibles en HTML5.