𝗗𝗶́𝗮 𝟯𝟮 𝗱𝗲 𝗔𝗽𝗿𝗲𝗻𝗱𝗶𝘇𝗮𝗷𝗲 𝗱𝗲𝗹 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
Hoy construí un juego de Serpientes y Escaleras.
Utilicé HTML5, CSS3 y Vanilla JavaScript.
Ayer construí Piedra, Papel o Tijera. Hoy quería un desafío mayor. Necesitaba rastrear posiciones en una cuadrícula de 100 celdas.
Me enfoqué en dos áreas técnicas principales:
Generación de la cuadrícula No escribí 100 divs de HTML por separado. Utilicé un bucle para crear la cuadrícula de forma programática. Usé CSS Grid para crear un diseño de 10x10.
Lógica del juego Evité las sentencias if-else largas para las serpientes y las escaleras. Utilicé un objeto de JavaScript para mapear los movimientos. Esto hace que el código sea limpio.
El objeto mapea una casilla de inicio a una casilla de destino:
- Las escaleras te suben.
- Las serpientes te bajan.
Lógica de ejemplo: const gameModifications = { 4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99, 17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79 };
Construir esto me enseñó cómo gestionar el estado y las coordenadas en un juego.
Fuente: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1