𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
I built a Snake and Ladder game today.
I used HTML5, CSS3, and Vanilla JavaScript.
Yesterday I built Rock Paper Scissors. Today I wanted a bigger challenge. I needed to track positions on a 100-cell grid.
I focused on two main technical areas:
Grid Generation I did not write 100 separate HTML divs. I used a loop to create the grid programmatically. I used CSS Grid to create a 10x10 layout.
Game Logic I avoided long if-else statements for the snakes and ladders. I used a JavaScript object to map the moves. This makes the code clean.
The object maps a starting tile to a destination tile:
- Ladders move you up.
- Snakes move you down.
Example logic: 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 };
Building this taught me how to manage state and coordinates in a game.
Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1