Juego de la vida con vue, typescript y neomorfismo

0
118

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

En este tutorial realizaremos un pequeño homenaje a John Horton Conway desarrollando su famoso juego de la vida con Vue, typescript e incluyendo algunos toques de neomorfismo.

Índice de contenidos

1. Introducción

El Juego de la vida es un sencillo juego con unas reglas muy simples en el cual nadie gana ni pierde.

La primera aparición del juego fue en 1970 en la revista Scientific American.

Para saber más acerca de la historia del juego puedes consultar la wikipedia.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2,7 Ghz Intel Core i7, 16GB DDR3).
  • Sistema Operativo: Mac OS Catalina 10.15.3
  • Entorno de desarrollo: Visual Studio Code
  • Framework: Vue
  • Lenguaje de programación: Typescript

3. Reglas del juego

Regla número 1: Para que una célula siga viva, esta debe tener 2 ó 3 vecinos vivos. Si tiene más muere debido a la superpoblación, si tiene menos entonces muere debido a la soledad.

Regla número 2: Si una célula muerta tiene exactamente 3 vecinas vivas revive.

4. Empezamos el juego

El primer paso a realizar es crear nuestra interfaz, utilizaremos un panel canvas, tres botones y un slider para poder elegir el tamaño de los pixeles.

 

5. Estilos

Ahora le damos unos toques de neomorfismo a los botones, slider y contenedor donde estará el canvas.

 

6. Código

Primero definimos las variables que usaremos.

Después creamos los métodos que nos llenarán aleatoriamente el panel de células vivas y muertas. Con esto partimos con un panel diferente en cada nuevo juego.

Ahora necesitaremos saber si los vecinos de cada célula están vivos o muertos y así poder determinar el estado de la célula.

Ahora necesitaremos un método que nos ayude en cada iteración para repintar el panel.

Y ahora haremos los métodos encargados de pausar el juego y de empezarlo.

7. Resultado final

Como resultado final tendremos un juego de la vida con esta apariencia.

 

8. Referencias

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