Juegos en JavaScript

Si nos dieran un centavo por cada correo que nos han enviado pidiendo cursos de JavaScript, tendríamos €1.68. No podríamos comprar mucha cosa, pero para un café alcanzaría. Si bien en nuestros planes no figura hacer cursos de JavaScript (como sí hemos hecho con Visual Basic, entre otras cosas), sí podemos orientar a los interesados. ¿Y qué mejor manera de hacerlo que con juegos? Sí, Juegos en Javascript.

JavaScript es un lenguaje de dificultad intermedia, que tiene influencias de todo tipo, entre las más notorias una sintaxis similar a C y mucho de Java. Aunque, esto es muy importante, no se debe confundir Java con JavaScript. No solo son dos cosas diferentes, sino que fueron creados por empresas diferentes. Java es de Sun, mientras que JavaScript fue desarrollado por Netscape.

Lo cierto es que el origen de ambas tiene sus roces y se remonta (según dicen) a un acuerdo de marketing entre ambas empresas (a principios de los 90). La historia, resumida, es más o menos así: Netscape, de la mano de Brendan Eich, creó Mocha, la primera versión de lo que hoy es JS. Posteriormente, Mocha fue renombrado a LiveScript. Pero cuando Sun pide a Netscape incluir Java en su navegador, dominante en aquellos años, LiveScript pasó a llamarse JavaScript, para potenciar tanto la marca de Sun como la de Netscape (y confundirnos a todos un poco).

Más allá de está pequeña reseña histórica, la primera pregunta es, ¿por qué aprender JavaScript? La respuesta la brinda Wikipedia: “La flexibilidad de JavaScript la ha hecho uno de los lenguajes más populares en la Web y uno de los más simples de aprender.” Bien, es prometedor, ¿verdad? Pero… ¿cómo aprender JavaScript? No es una cosa que vaya a suceder de la noche a la mañana o por ósmosis. Y deberás empeñarte.

Como dijimos, enseñar JS tampoco es el objetivo de este humilde artículo. Pero sí queremos, por un lado, mostrarte las posibilidades del lenguaje y, por otro lado, brindarte un poco de esperanza. Es que si hay un lenguaje de programación que tiene mogollón de librerías, que simplifican muchísimo la labor, ese es JavaScript.  Junto con el soporte de miles de programadores, cursos y libros de descarga gratuita, la curva de aprendizaje es mucho menor a la de otros lenguajes. Revisemos un poco lo que la comunidad tiene para ofrecernos.

Caso Nihilogic
Nuestro desarrollador JS preferido es, sin dudas, CupBoy. En el pasado hemos visto sus creaciones y experimentos. El Super Mario Bros. de 14kb y el Super Mario Kart de 11kb fueron solo el comienzo. El caso de CupBoy es ideal para este artículo. Su creatividad, documentada paso a paso en su blog, lo ha llevado a probar novedosas técnicas y a encontrar soluciones para cada uno de los problemas con los que se ha enfrentado. No solo eso, sino que comparte el código y las explicaciones de cada caso, paso a paso.

Por ejemplo, para crear su versión JavaScript de Wolfenstein 3D, CupBoy usó la técnica ray casting (la misma que id en 1992). Pero, ante la imposibilidad de duplicar el método con las herramientas y librerías conocidas, debió crear su propio motor (un canvas en este caso) al que dio a llamar JavaScript 3D Renderer con texturas (demo). Con el motor ya en pie, CupBoy decidió llevar Wolfenstein un paso más allá, creando el insólito mashup WolfenFlickr 3D. Un entorno en pseudo 3D (ray casting) que utiliza las imágenes de un usuario de Flickr (o una búsqueda si lo prefieres) para adornar las paredes del castillo de Hitler. El renderizado de las imágenes es excepcional y no desentona con la ambientación en ningún momento.

Lo bueno, como ya dijimos, es que CupBoy no se guarda nada. Todos sus experimentos arrojan resultados (buenos y malos) y para el estudiante sus escritos son invaluables. Por ejemplo, si quieres crear un motor como este, desde cero y sin morir en el intento, no tienes más que seguir sus “clases virtuales”. También puedes ver cómo el Super Mario de 14kb se redujo a 8kb con un proceso de compresión PNG, algo totalmente inútil en este caso (cosa que el mismo Cupboy afirma), pero que es una técnica que se puede extrapolar en otros desarrollos, con mejores resultados.

Juegos de ejemplo
Y así como existen decenas de desarrolladores gustosos de compartir sus conocimientos y descubrimientos (porque en JS hay mucho que experimentar todavía), también existen infinidades de librerías nos pueden hacer la vida más fácil. Veamos aquí algunos ejemplos de juegos y las librerías que han usado.

World of Solitaire
Comenzando con algo “simple”, el sitio web World of Solitarie está íntegramente desarrollado en JavaScript. Ayudándose con librerías como Yahoo Utility Interfase (YUI), cuyas aplicaciones son infinitas, MochiKit, una librería muy flexible, liviana y complementaria a YUI, y PlotKit para crear estadísticas de todo lo que suceda dentro de la aplicación.

Podría parecerte que un sitio dedicado a solitarios es poca cosa. Pues te invitamos a pasar, así cambias de opinión. Como verás, no hay rastro de contenido estático, cosa imposible de realizar solo con HTML, PHP o similares. El sitio entero es como si estuvieras sumergido en un juego de escritorio, instalable. Dependiendo de tu conexión también es notoria la rapidez de carga y la pronta respuesta de los menús (virtudes aportadas por MochiKit). Otro juego hecho con la ayuda de la API de Yahoo es este Pac -Man, que es puro JavaScrip y XHTML con sprites en CSS.

ProtoRPG
Y aquí tenemos otra maravilla. Un motor para crear juegos de rol en JavaScript, que se ayudó de Prototype (para el desarrollo del juego en sí) y Script.aculo.us, un agregado de Prototype para la creación de interfaces.
El juego, sin ser una maravilla si se lo ve fuera de la plataforma, es genial si se entiende como la demo de un motor capaz de servir a un desarrollador como punto de partida para sus propios juegos, sea usando el motor así como está o agregando sus propias líneas de código o librerías preferidas.

ProtoRPG es un ejemplo perfecto para que nos demos cuenta el apoyo y soporte que hay en la comunidad de programadores. Siempre encontrarás un módulo, una librería, un tutorial, un motor, algo que te ayude a desarrollar lo que necesitas. Aún mejor, siendo JS tan flexible, con la ayuda brindada por estas herramientas descubrirás muchas cosas, que luego compartirás con el mundo, enriqueciendo aún más el soporte del lenguaje.

Jetris
Otro caso que denota la simpleza de JS en relación con otros lenguajes de objetos (y la grandiosa comunidad con la que cuenta) es Jetris. Realizado con un motor propio (GameJS), este pequeño juego tiene una estructura casi enteramente diseñada sobre el elemento Canvas presente en HMTL 5. Este nuevo tag, solo presente por ahora en FireFox, Safari y Opera, permite la manipulación de imágenes (ya sean gráficos o animaciones) desde lenguajes de scripting como JavaScript. Por supuesto, el código fuente lo puedes descargar desde el sitio del autor quién, además, se valió de tres librerías extras (Sylvester.js, strokeText.js  y ExtJS).

Librerías para todos los gustos
¿Ya ves cómo funciona la cosa? JavaScript es un lenguaje no solo poderoso, sino en constante expansión. Desde hace años que se viene perfeccionando y refinando. Día a día se crean todo tipo de librerías y, por sobre todo, es un lenguaje con el que siempre se experimenta. Semana tras semana son se logran cosas (a través de la experimentación) que antes se suponían imposibles. Existen infinidades de librerías, cada una para cumplir un rol específico. Además de las que ya nombramos, otras buenas para comenzar son:

jQuery: Simplifica las interacciones de scripts y Ajax de una manera bastante efectiva, logrando aplicaciones mucho más livianas y rápidas.

MooTool: Un framework compacto y modular, de código abierto, que simplifica el desarrollo de aplicaciones, respetando los estándares web, sin incordiar al desarrollador con el tema.

SoundManager2: Como su nombre lo indica, simplifica (incluso mejora) el uso de sonidos en JavaScript. Permite, entre otras cosas, botones de pausa, play, stop y el uso de tags ID3V1 e ID3V2.

Si estás interesado en aprender desde cero, tal vez las galerías puedan darte una mano en tu primera aplicación. Si necesitas curiosear y revisar el código fuente de decenas de juegos, como soporte, te recomendamos este sitio, todos y cada uno de ellos con documentación y código disponible. Otro buen recurso, aunque no sea exactamente lo mismo, es ALICE, un programa educativo del que ya hablamos que  puede ayudarte a comprender los principios del lenguaje. Si bien ALICE no es un curso de JS, el código resultante es muy semejante. Por último, es imprescindible que leas la documentación de JS llevada por Mozilla, una de que las empresas que tiene la licencia la tecnología. Eso es todo. Esperamos ver tus Juegos Javascript muy pronto ¡Mucha suerte!

Si ya estás haciendo un Juego en Javascript puedes compartir la noticia en nuestros comentarios.