𝗗𝗶𝗮 𝟯𝟮 𝗱𝗲 𝗔𝗽𝗿𝗲𝗻𝗱𝗶𝘇𝗮𝗴𝗲𝗺 𝗱𝗮 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡
Hoje eu construí um jogo de Cobras e Escadas.
Usei HTML5, CSS3 e Vanilla JavaScript.
Ontem eu construí um Jogo de Pedra, Papel e Tesoura. Hoje eu queria um desafio maior. Eu precisava rastrear posições em uma grade de 100 células.
Eu foquei em duas áreas técnicas principais:
Geração de Grade Eu não escrevi 100 divs HTML separadas. Usei um loop para criar a grade programaticamente. Usei CSS Grid para criar um layout de 10x10.
Lógica do Jogo Evitei longas instruções if-else para as cobras e escadas. Usei um objeto JavaScript para mapear os movimentos. Isso deixa o código limpo.
O objeto mapeia uma casa inicial para uma casa de destino:
- As escadas te levam para cima.
- As cobras te levam para baixo.
Exemplo de lógica: 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 isso me ensinou como gerenciar estado e coordenadas em um jogo.
Fonte: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1