El mundo no necesita más to-do apps. Para aprender nuevas tecnologías hay que tener un proyecto interesante y completamente inútil.
Como un juego. Como Pacman.
La idea es aprender componentes de Vue y state management, gráficos SVG, animaciones, pathfinding para los fantasmas, quizás sonidos y lo que me encuentre en el camino.
Qué me espera.
El laberinto de Pacman es un área rectangular de 21x27 bloques cuadrados, con dos pasillos en el medio del mapa conectados entre sí, que permiten a Pacman y los fantasmas teletransportarse al otro lado.
Cada bloque del mapa puede ser uno de estos 9 tipos:
| Gráfico | Nombre | Descripción |
|---|---|---|
| Pared | Instransitable. | |
| Esquina | Instransitable. | |
| Intersección | Instransitable. | |
| Fin de pared | Instransitable. | |
| Borde de caja de salida de fantasmas | Instransitable. | |
| "Puerta" de la caja de fantasmas | Los fantasmas pueden cruzar, Pacman no. | |
| Punto | El objetivo del juego: "comer" todos los puntos. | |
| Power-up | Forma parte del objetivo y permite a Pacman "comer" los fantasmas por un tiempo limitado. | |
| Espacio vacío | Es transitable si Pacman o sus enemigos tienen acceso directo. |
Sobre estos bloques pueden o no transitar Pacman y sus enemigos:
| Gráfico | Nombre | Propiedades |
|---|---|---|
| Pacman | Controlable en 4 direcciones (↔ ↕). | |
| Blinky | Después de que Pac-Man coma cierta cantidad de puntos, su velocidad incrementa considerablemente (Wikipedia) | |
| Inky | No es tan rápido como Blinky pero actúa de manera errática así que es difícil predecir cómo va a reaccionar. En el juego original de Japón (Puck-Man) este fantasma solía evitar a Pac-Man y era considerado temeroso. (Wikipedia). | |
| Pinky | Rodea los obstáculos al contrario de las manecillas del reloj. Esta suele colocarse en frente de pacman y cortarle el paso u orbita alrededor de Pac-Man para confundir y distraer al jugador para que uno de sus compañeros lo atrape (Wikipedia). | |
| Clyde | Él no persigue a Pac-Man, sino que deambula por el laberinto sin una ruta específica (Wikipedia). |
Ya con las cosas claras, este es el diseño del laberinto que armé:
(link)
Es el laberinto clásico con los pasillos de teletransporte.
Por dónde empezar.
Ni idea. Por lo pronto voy a dejar el proyecto principal en GitHub y las ideas que se me ocurran en CodePen. Según avance iré publicando.