𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
Hoy construí un juego de Serpientes y Escaleras.
Este proyecto requirió una manipulación de arreglos y una lógica complejas. Utilicé HTML5, CSS3 y Vanilla JavaScript.
Ayer construí Piedra, Papel o Tijera. Hoy pasé a una cuadrícula de 100 celdas. Esto requirió el seguimiento de posiciones a través de un diseño matemático.
Así es como lo construí:
- Utilicé un bucle para crear la cuadrícula. No codifiqué 100 divs manualmente.
- Utilicé CSS Grid para crear un diseño de 10x10.
- Utilicé un objeto JavaScript para gestionar las escaleras y las serpientes.
El mapa de objetos vincula una casilla de activación con una casilla de destino. Esto evita largas sentencias if-else.
Mapa de ejemplo:
- Escaleras: 4 a 14, 9 a 31, 28 a 84.
- Serpientes: 17 a 7, 54 a 34, 98 a 79.
Gestionar las transiciones espaciales en una interfaz dinámica me enseñó mucho sobre la gestión de estados.
Fuente: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1