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

---
title: Zeek The Geek en ReactJS - Segunda 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
---

En la [primera parte](https://dev.to/jorger/zeek-the-geek-en-reactjs-primera-parte-1ch4) 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.

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

En esta parte se abordará los bloques que componen el juego.

# Bloques del juego.

El juego cuenta con una variedad de tipos de bloques como son:

## 1. Zeek

Es el personaje principal, Zeek debe moverse a través del escenario, su objetivo es el de recoger tantas flores amarillas y tesoros pueda, su objetivo final será recoger el hongo que le permitirá finalizar el escenario.

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

Si no se mueve Zeek por un buen tiempo, se dormirá, se despertará cuando se indique que se debe mover de nuevo o si algo externo lo despierta (un láser o Piclasops)

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

Si llegase a comerse una flor azul o un hongo malvado (Toadstools), será envenenado, si se encuentra con un Piclasops (dino), morirá o si se encuentra en la vista de un láser será eliminado 😞


## 2. Piclasops (Dino).

Piclasops (o dino) eliminará algunos bloques en el escenario 

* Flores amarillas, azules, púrpura
* Huevos
* Manzanas/Manzanas con hongos
* Hongos (tanto buenos como malos)
* Píldoras de invisibilidad.
* Y a Zeek

**Si un dino se come a un hongo bueno y es el único en el escenario, Zeek morirá. 💀**

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

### Reglas que rigen al dino.

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

* Pueden existir varios dinos en el escenario, cuando un dino se encuentra con otro colisionará, 
* Un dino buscará girar siempre hacia la izquierda si no está disponible, buscará la dirección que esté disponible (en el sentido de las manecillas del reloj), si no existe ninguna regresará por el mismo camino en venía
* Un dino puede estar inicialmente bloqueado y haciendo uso de otro bloque se puede desbloquear.
* Se puede eliminar un dino a través de una dinamita 

### Dino como ayuda de Zeek.

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

El dino también puede servir como ayuda para Zeek, ya que puede eliminar bloques malos para Zeek, como las flores azules y el hongo malo, además de servir como elemento de bloqueo en movimiento contra los láseres.

## 3. Manzanas.

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

Las manzanas son un bloque que Zeek puede mover en el escenario, son útiles para:

* Bloquear un láser.
* Alimentar a las flores púrpura.

Una manzana con un gusano, hará que la digestión de la flor púrpura dure más.


## 4. Flores púrpura.

Estás flores son uno de los principales enemigos de Zeek esta tiene tres estados:

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

* Cerrada: En este estado es inofensiva para Zeek, pero si éste se acerca a la flor cuando está en este estado, se abrirá, si Zeek permanece quieto la flor se lo comerá.
* Abierta: Si Zeek pasa cerca se lo comerá.
* Digiriendo: Si a la flor se le da una manzana, comenzará digerir, lo cual hará que sea inofensiva, una vez termine de digerir pasará a un estado cerrado.

## 5. Puerta.

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

Actúa como un bloque de bloqueo, no se puede pasar quitar una puerta si no se cuenta con una llave, o si se elimina con una dinamita

## 6. Llave.

Permite abrir las puertas que se describieron anteriormente, Zeek sólo puede tener una llave al mismo tiempo, es decir si ya ha recogido una llave, no podrá recoger otra.


## 7. Tesoros.

Zeek podrá tomar estos tesoros, otorgándole 1000 puntos por cada tesoro que recoja.

## 8. Dinamita.

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

Es un elemento que Zeek puede mover, al moverla la activará, es por ello que Zeek debe ser cuidadoso, si Zeek está cerca cuando al dinamita explota eliminará a Zeek también, la dinamita tiene la habilidad de eliminar la mayoría de los elementos a su alrededor, si uno de los bloques que elimina es el "hongo bueno", y si es el único hongo en el escenario, Zeek morirá

Si se encuentra otra dinamita cerca se activará, creando una reacción en cadena.

## 9. Píldora de invisibilidad.

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

Permite que Zeek zea invisible a los láseres y las flores púrpura, durante el tiempo que es invisible podrá pasar cerca de estos bloques y no será eliminado, pero no es invisible a los dinos o a los bloques como flores azules y dinamita

## 10. Láser.

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

Los láseres siempre estarán mirando a Zeek, si no existe ningún elemento entre Zeek y el láser lo eliminará.

## 11. Cristales Mágicos.

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

Son elementos que puede mover Zeek, pueden servir para bloquear a un láser, pero si un cristal mágico colisiona contra otra u otros, se eliminará.

## 12. Hongo.

Hongos que Zeek recolecta para el suministro de su energía, una vez que Zeek se ha comido un hongo, podrá pasar al siguiente escenario, otros elementos pueden destruir un hongo como son el dino o la dinamita, si esto llegase a pasar Zeek morirá (siempre y cuando sólo exista un hongo en el escenario)

## 13. Toadstools (Hongo malo)

Toadstools que son fatales si se comen, la idea es engañar a Zeek, ya que son muy parecidos.

## 14. Flores Amarillas.

Estás flores le darán a Zeek 50 puntos cada vez que las recoge, además sirven como elementos de bloqueo contra un láser.

## 15. Flores Azules.

Son flores malvadas, si Zeek llegase a tomar una morirá.

## 16. Huevo Azul.

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

Cuando Zeek toma un huevo azul, todas las flores amarillas se convierten en flores azules, del mismo modo las flores azules se convierten en flores amarillas.

## 17. Bola Amarilla.

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

Es un bloque que Zeek puede mover en el escenario, sirve para bloquear láser e incluso bloquear a los dinos, no es un elemento que se pueda destruir con una dinamita.

## 18. Barriles amarillos.

Son elementos que no se pueden mover o eliminar, se pueden clasificar como muros.

## 19. Muros.

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

Son elementos que no se pueden mover, pero si actúan como elementos bloqueantes, en total existen 10 tipos de muros, los cuales se pueden combinar de diferentes formas.

_______

En esta segunda parte quise ahondar en cada uno de los bloques del juego, así como mostrar como se comportan estos con el personaje o con otros bloques.

En la [tercera parte](https://dev.to/jorger/zeek-the-geek-en-reactjs-tercera-parte-2928) mostraré más acerca de los retos técnicos que tuvo el desarrollo de este juego haciendo uso de ReactJS