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

En esta serie de cuatro artículos, me gustaría compartir la experiencia de desarrollo de un nuevo juego desarrollado en ReactJS, en este caso un juego clásico como es Zeek The Geek.

• Segunda Parte
• Tercera Parte
• Cuarta Parte

El Juego

Zeek the Geek es un juego similar al Sokoban. El objetivo es guiar a Zeek, un geek del otro lado de la galaxia (donde los geeks no son tan diferentes de los de la Tierra) alrededor de un nivel similar a un laberinto en busca de deliciosos hongos. En el camino puede recoger flores amarillas, cofres del tesoro y cristales mágicos.

Recoger el hongo mueve a Zeek al siguiente nivel. Pero cuidado, porque también hay trampas y monstruos en cada laberinto: las flores rosadas lo devorarán si camina cerca de ellas, hongos mortales envenerará a nuestro héroe si decide meter uno en su garganta, y la dinamita, aunque útil, puede ser peligrosa en las manos equivocadas. O pies.

El juego fue desarrollado originalmente por Sidewalk Software y lanzado en 1995 para Windows

Motivación.

He venido desarrollando juegos haciendo uso de ReactJS, con el objetivo de afianzar los conocimientos de está librería, así como aprender nuevos conceptos que la misma tiene.

Este es el sexto juego que he desarrollado en ReactJS, otros juegos son:

1. Litle Professor

• Url del juego: https://jorger.github.io/little_professor/

2. Binary fun:

URL: https://github.com/Jorger/binary_fun_reactjs

3. Calculator the game

• Url del juego: https://calculator-game-reactjs.now.sh/

4. El Parqués/parchis.

• Url del juego: https://parchisreact.herokuapp.com/
• Artículo relacionado: https://dev.to/jorger/recreando-el-parques-parchis-en-reactjs-primera-parte-nkk

5. Mr. Square

• Url del juego: https://mrsquare.herokuapp.com/
• Artículo relacionado: https://dev.to/jorger/mr-square-en-reactjs-primera-parte-49eo

---

En este sexto juego deseaba poner en práctica lo aprendido en Mr. Square, puntualmente el uso de react-srping para las acciones de movimiento, éste juego me presentaba la oportunidad de hacerlo, algo curioso es que ya había hecho una versión de este juego hace más de 13 años haciendo uso de Visual Basic 6.0 y Flash (usaba flash para el manejo de sprites, cada fotograma representaba la posición de movimiento de cada elemento, tiempos aquellos)

Zeek en VB6/Flash

El mismo nivel en la nueva versión web:

Pero a diferencia de esa versión, está cuenta con la posibilidad de ser multiplataforma y multidispositivo gracias a que es web, además de contar con muchos más niveles (220) que la versión anterior que sólo contaba con 20 niveles.

Opciones del Juego.

El juego cuenta con las siguientes opciones:

Start

Esta opción mostrará los niveles precargados del juego, en total existen 220 niveles, cada uno con un nivel de dificultad diferente, a su vez este tiene las siguientes opciones:

• Seleccionar nivel: El usuario podrá seleccionar el nivel que desee jugar, em este caso no hay dependencia de niveles

• Nivel aleatorio: A través de está opción se mostrará un nivel aleatorio de los 220 existentes.

• Cargar nivel a través de QR: En está opción se podrá cargar un nivel que previamente se haya creado a través de editor.

Editor

Permite la creación de nuevo niveles, a su vez tiene las sigientes opciones:

• Barra de bloques: Muestra todos los bloques disponibles para crear un escenario, en total existen 18 tipos de bloques que a su vez tienen diferentes tipos, por ejemplo un tipo muro, tiene a su vez 11 tipos, un tipo flor púrpura tiene dos tipos (flor abierta y cerrada), el tipo manzana tiene dos tipos (manzana normal y manzana con gusano)
• Play: Permite probar el nivel creado, un nivel es válido si al menos tiene a Zeek y al hongo.
• Outline: Opción que permite crear un contorno en el escenario con un bloque de tipo muro, puerta, flor amarilla y flor azul, está opción estará bloqueada a no ser que el bloque seleccionado se de los tipos anteriormente mencionados.

• Leveles: Muestra los niveles precargados del juego, a partir de estos niveles se pueden crear nuevos niveles (está opción, no modificará los niveles existentes)

• Load QR: Cargará algún nivel que previamente se haya creado, al igual que la opción anterior sólo se podrá crear un nuevo nivel a partir de éste y no modificará el nivel cargado.

Share

Permite compartir el juego en redes sociales, si el navegador no soporta la opción nativa de share, se hace uso del paquete share-api-polyfill

Sounds

Habilita/deshabilita los sonidos del juego.

Stack

Como lo he mencionado el juego ha sido desarrollado en ReactJS, en este caso haciendo uso del paquete conocido Create React App, a diferencia de otros juegos como el parchís y Mr. Square éste juego no cuenta con un componente de backend

Otros paquetes utilizados son:

nuka-carousel

Esta librería permite el uso de un carousel de forma muy fácil, en este caso fue utilizado para mostrar el listado de niveles que componen el juego.

qrcode.react

Librería que permite la creación de códigos QR, está ha sido utilizada para "almacenar" los niveles creados en el editor.

qrcode-decoder

Está librería permite leer un QR, en este caso sólo se hizo uso de la opción de leer un QR desde una imagen, aunque la librería tiene la opción de leer un QR desde la cámara.

En este caso la librería se utilizó para leer el QR generado en el editor.

react-keyboard-event-handler

Permite capturar de forma sencilla los eventos del teclado, en este caso fue utilizada para capturar las teclas de movimiento para así mover al personaje en el escenario.

share-api-polyfill

Si el navegador donde se está jugando el juego no cuenta con la opción de compartir nativa, se ejecutará está librería, la cual presenta la misma interfaz de la api nativa.

sweetalert

Está librería reemplaza los mensajes nativos del navegador, como alert(), prompt(), en este caso fue utilizada para mostrar mensajes de error o informativos en el juego.

pathfinding

Librería que ayuda a encontrar la ruta más corta/óptima dado dos puntos, en este caso fue utilizada para indicar el camino que puede tomar el personaje cuando el usuario se lo indica en el escenario.

howler

Librería para el manejo de sonidos, una característica especial que tiene está librería es la capacidad de manejar "sprites de sonidos", lo que permite al igual que los sprites de imágenes, descargar un sólo archivo, en vez de varios, lo cual ayuda a la carga del juego.

---

En esta primera parte quería compartir acerca del juego original, las motivaciones, las opciones de está versión del juego que he desarrollado en ReactJS, así como el stack de tecnología utilizada.

En la segunda parte veremos más acerca del juego, así como los bloques que lo componen.