El Juego de la Vida con Angular, React y TypeScript

0
2233

Puedes ver todos los tutoriales del Juego de la vida aquí: Tutoriales Juego de la vida.

¿Cuáles son las reglas del juego?

El juego consiste en una cuadrícula de células.
Cada célula tiene 8 vecinos, en el lateral, vertical y diagonales.

Las células siguen ciertas normas:

Si la célula está viva:

  • Y tiene menos de dos vecinos vivos -> Muere
  • Y tiene dos o tres vecinos vivos -> Vive
  • Y tiene más de tres vecinos vivos -> Muere

Si la célula está muerta:

  • Y tiene tres vecinos vivos -> Nace

Estas sencillas reglas, en combinación, pueden crear mecánicas muy complejas.

Glider gun de Gosper

Análisis

He decidido separar la lógica del juego de la lógica de presentación.
Esto permite reutilizar el código del juego en Angular y React.

Implementación en TypeScript

En esta implementación se almacenan las células en un array de una dimensión.
Con la ventaja de que es una forma más sencilla de guardar los datos.
Y con la desventaja es que habrá que “simular” la bidimensionalidad.

 

Probando la implementación

Para probar que el juego funciona he creado un par de funciones de parseo que harán que el código sea más fácil de escribir y de leer.

Este código es compatible con Jest en React y Jasmine en Angular.

Conexión con React

La implementación en React utiliza un componente funcional y hooks de estado.

 

Conexión con Angular

La implementación en Angular utiliza un Subscriber  para ejecutar la función tick cada 200 milisegundos.

Conclusiones

La tecnología ha cambiado mucho desde que Conway inventó el Juego de la Vida en 1970. Con frameworks y librerías modernas de web, podemos implementarlo con mucha facilidad.

Podéis ver todos los tutoriales sobre el juego de la vida en https://www.adictosaltrabajo.com/2020/04/30/el-juego-de-la-vida-de-conway/

Dejar respuesta

Please enter your comment!
Please enter your name here