Zeek The Geek en ReactJS - Primera Parte
Tags: react, pwa, games, css3
Published: 2021-01-17 01:14:10

---
title: Zeek The Geek en ReactJS - Primera Parte
published: true
description: Recreando el clásico juego Zeek the Geek en ReactJS
tags: reactjs, pwa, games, css3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2hlpqyuzoa35gc2f6m47.png
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/55k34hks979mee2hxjrt.gif)

* **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](https://reactjs.org/), en este caso un juego clásico como es Zeek The Geek.

* [Segunda Parte](https://dev.to/jorger/zeek-the-geek-en-reactjs-segunda-parte-499n)
* [Tercera Parte](https://dev.to/jorger/zeek-the-geek-en-reactjs-tercera-parte-2928)
* [Cuarta Parte](https://dev.to/jorger/zeek-the-geek-en-reactjs-cuarta-parte-26bm)


## El Juego

Zeek the Geek es un juego similar al [Sokoban](https://en.wikipedia.org/wiki/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](http://cd.textfiles.com/hotgames/PROGRAMS/ZEEK1_10/ZEEK.TXT) 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

![LP](https://github.com/Jorger/little_professor_reactjs/raw/master/public/images/little_professor_calculadora.gif?raw=true)

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

### 2. Binary fun: 

![BF](https://github.com/Jorger/binary_fun_reactjs/raw/master/Binary_fun.gif?raw=true)

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

### 3. Calculator the game

![CG](https://github.com/Jorger/Calculator_The_Game_ReactJS/raw/master/images/resolve_level.gif?raw=true)

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

### 4. El Parqués/parchis.

![parchis](https://camo.githubusercontent.com/f3f2fc69be112c9ea857f058c087fabf222eade18cc23ff86e136f5bfb7249c1/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f70726163746963616c6465762f696d6167652f66657463682f732d2d3259395073664f4e2d2d2f635f6c696d6974253243665f6175746f253243666c5f70726f6772657373697665253243715f3636253243775f3838302f68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f4a6f726765722f70617263686973692d67616d652f6d61737465722f696d616765735f7475746f7269616c2f696d675f30312e676966253346746f6b656e253344414141484b59564f41373458363345534c59453333434b364b50354157)


* 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

![Alt Text](https://camo.githubusercontent.com/60adad3fdfcbb70f2f4878f4227bb5dad4419dcf9258115b7c63fd0718dcf454/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f70726163746963616c6465762f696d6167652f66657463682f732d2d5f6d306175774d472d2d2f635f6c696d6974253243665f6175746f253243666c5f70726f6772657373697665253243715f3636253243775f3838302f68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f692f30687467756479613831383378676768616a616c2e676966)


* 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](https://mrsquare.herokuapp.com/), puntualmente el uso de [react-srping](https://www.react-spring.io/) 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](https://en.wikipedia.org/wiki/Visual_Basic) y [Flash](https://en.wikipedia.org/wiki/Adobe_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

{% youtube Tp-NjgZVCLg %}

El mismo nivel en la nueva versión web:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h6nbkt58fblktoe3md28.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tv7uxmbas9shmqh4coqz.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7pazb8nh7f7hmtjkscrl.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/109by6qvklbz5orbhuua.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d7hbqud4ckkf2rx74kww.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59atnwontgxygwbxdlvp.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrhxnh377yhhn4shz694.gif)

### 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](https://www.npmjs.com/package/share-api-polyfill)

### Sounds

Habilita/deshabilita los sonidos del juego.

## Stack

Como lo he mencionado el juego ha sido desarrollado en [ReactJS](https://reactjs.org/), en este caso haciendo uso del paquete conocido [Create React App](https://create-react-app.dev/), a diferencia de otros juegos como el [parchís](https://parchisreact.herokuapp.com/) y [Mr. Square](https://mrsquare.herokuapp.com/) éste juego no cuenta con un componente de backend

Otros paquetes utilizados son:

### [nuka-carousel](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/share-api-polyfill)

Si el navegador donde se está jugando el juego no cuenta con la opción de [compartir nativa](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share), se ejecutará está librería, la cual presenta la misma interfaz de la api nativa.

### [sweetalert](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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"](https://howlerjs.com/#sprite), 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](https://dev.to/jorger/zeek-the-geek-en-reactjs-segunda-parte-499n) veremos más acerca del juego, así como los bloques que lo componen.