𝗗𝘇𝗶𝗲𝗻 𝟯𝟮 𝗻𝗮𝘂𝗸𝗶 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
Dzisiaj zbudowałem grę w Węże i Drabiny.
Użyłem HTML5, CSS3 i Vanilla JavaScript.
Wczoraj zbudowałem Kamień, Papier, Nożyce. Dzisiaj chciałem większego wyzwania. Musiałem śledzić pozycje na siatce 100 pól.
Skupiłem się na dwóch głównych obszarach technicznych:
Generowanie siatki Nie pisałem 100 oddzielnych elementów div HTML. Użyłem pętli, aby stworzyć siatkę programowo. Użyłem CSS Grid, aby stworzyć układ 10x10.
Logika gry Unikałem długich instrukcji if-else dla węży i drabin. Użyłem obiektu JavaScript do mapowania ruchów. Dzięki temu kod jest czysty.
Obiekt mapuje pole startowe na pole docelowe:
- Drabiny przenoszą Cię w górę.
- Węże przenoszą Cię w dół.
Przykład logiki: 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 };
Budowa tego nauczyła mnie, jak zarządzać stanem i współrzędnymi w grze.
Źródło: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1