En la primera parte de esta serie de artículos, hablamos de la historia del juego original, la motivación del desarrollo de esta nueva versión, sus opciones así como el stack de tecnología utilizada.

En la segunda parte se mostró cada uno de los bloques que componen el juego, así como la interacción que pueden tener éstos con el personaje.

En la tercera parte se abordó algunos retos técnicos que tuvo el desarrollo del juego, así como se entregó una solución a los mismos.

• URL del juego: https://zeek.jorge-rubiano.vercel.app/

En esta cuarta y última parte deseo compartir algunas funcionalidades extras que posee el juego, así como el ambiente de desarrollo utilizado para el mismo.

Creación de nuevos niveles.

El juego como tal posee 220 niveles precargados, pero en este caso deseaba dar la posibilidad a los usuarios de crear sus propios niveles, como tal el editor fue de gran ayuda en el momento de crear los niveles del juego, pero deseaba que está herramienta no sólo quedará para el momento de desarrollo, sino que fuera parte del juego, a diferencia de Mr. Square que si tiene una base de datos donde se pueden almacenar lo niveles, Zeek no cuenta con está opción, entonces para "almacenar" lo nivles se hace uso de la URL o de códigos QR, tuve la inspiración para realizar está acción en una coferencia de la Chrome Dev Summit del año 2019, en la cual mostraban un ejemplo de como se podía compartir un juego y sus niveles a través de estás opciones.

Un ejemplo de un nivel es el siguiente:

El mismo nivel se puede acceder a través de este link

Esto permite que se pueda compartir fácilmente cualquier nivel creado, además se ahorra la necesidad de tener esta información almacenada en una base de datos.

Ambiente de desarrollo.

Inicialmente empecé a desarrollar el juego en codesandbox este permite protopiar aplicaciones de forma rápida, en juegos anteriores ya había utilizado este ambiente para la fase inicial de desarrollo, posteriormente finalizaba el juego en mi ambiente local, pero perdía lo que codesandbox me daba que era la opción de poder escribir código en cualquier momento y en cualquier equipo, deseaba tener lo mismo y es así que empecé a utilizar codespaces este es un servicio de Github (actualmente aún está en fase de prueba), el cual permite tener todo un ambiente de desarrollo en la nube, es posible utilizarlo directamente en el navegador o a través de VS Code a través de una extensión

Jorge Rubiano

@ostjh

#CodeSpaces from @github is great, it is possible to have a programming environment in the cloud, even to program from the iPad 🤯🤯 #reactjs #js

18:32 PM - 02 Jan 2021

Fue incluso posible hacer pruebas en el iPad, aunque a decir verdad no es lo mejor, no por codespaces sino por el iPad en sí, ya que acciones como utilizar el scroll fue difícil, cabe anotar que en las pruebas hice uso de un mouse y teclado, ya que sin ellos no sería una buena experiencia.

El uso de codespaces fue genial y me permitió que el código estuviera siempre disponible, sin la necesidad de estar en un sólo dispositivo, codespaces tiene una integración muy buena con github, por lo que me parece una buena opción para futuros proyectos.

Despliegue de la aplicación

A diferencia de otros juegos en este caso hice uso del servicio conocido como vercel, ya que el juego es estático y no requiere de backend, en juegos pasados había utilizado Heroku, aún sigue siendo mi servicio favorito, pero en este caso no era necesario, ya que como lo mencionaba el juego es 100% estático, vercel en este caso fue muy bueno para mí, ya anteriormente lo había utilizado cuando se denominaba ZEIT, y desde ese entonces me gustaba mucho.

Cuando desplegué la aplicación por primera vez, tuve un inconveniente con las rutas, el juego al ser una SPA, todo lo relacionado a la rutas se maneja en el front, lo cual presentaba un problema, ya que al ingresar directamente a un ruta por ejemplo: https://zeek.jorge-rubiano.vercel.app/levels vercel me indicaba que esa ruta no existía, en la documentación se explicaba como solucionarlo y en este caso era agregando un archivo de configuración indicando ese caso.

vercel.json

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Muchas gracias por leer estos artículos, estas son algunas conclusiones.

Conclusiones

• Realizar este juego presentó un gran desafío y muchos aprendizajes, los cuales sé que podré usar en mi vida profesional y además en la creación de nuevos juegos.
• Fue divertido rehacer un juego después de 13 años, en tecnologías diferentes, ahora con la posibilidad de ser jugado en cualquier dispositivo que cuente con una navegador web.
• ReactJS es una librería que tiene muchas posibilidades, no sólo para crear interfaces sino también en la creación de juegos, la comunidad así lo ha demostrado e iniciativas como react-three-fiber demuestran lo que es posible hacer, espero en un futuro cercano poder hacer uso de esta librería para desarrollar un nuevo juego.
• Juegos de este tipo entregan un gran reto, ya que es necesario tener en cuenta muchas validaciones y variaciones, es sorprendente que el juego original tenga más de 25 años, considero que es un gran juego y además fue un gran reto.
• Este juego me permitió explorar más acerca de como aprovechar más lo que nos entrega la web, en este caso el poder de una URL, a decir verdad es algo que ha estado desde el inicio de la internet, poder compartir a través de una URL y eso es lo que nos entrega la web, sin necesidad de descargar nada podemos acceder directamente a lo que necesitamos y en este caso ser utilizada como un medio de almacenamiento.
• Hacer uso de codespaces me pareció genial, en este caso lo utilicé para un proyecto 100% estático, pero es posible incluso hacer uso de funcionalidades de backend, seguiré explorando este ambiente y espero que pronto salga de la fase de pruebas y esté disponible para todos.

Jorge Rubiano.

Me pueden encontrar en:

• Twitter
• Linkedin
• Github