𝗗𝗶𝗲𝗻 𝟯𝟮 𝘂𝗰𝘇𝗲𝗻𝗶𝗮 𝘀𝘁𝗮𝗰𝗸𝘂 𝗠𝗘𝗥𝗡
Dzisiaj zbudowałem grę w Węże i Drabiny.
Ten projekt wymagał złożonej manipulacji tablicami i logiki. Użyłem HTML5, CSS3 oraz Vanilla JavaScript.
Wczoraj zbudowałem Kamień, Papier, Nożyce. Dzisiaj przeszedłem do siatki 100 pól. Wymagało to śledzenia pozycji w układzie matematycznym.
Oto jak to zbudowałem:
- Użyłem pętli do stworzenia siatki. Nie wpisywałem na sztywno 100 elementów div.
- Użyłem CSS Grid do stworzenia układu 10x10.
- Użyłem obiektu JavaScript do zarządzania drabinami i wężami.
Mapa obiektowa łączy pole wyzwalające z polem docelowym. Pozwala to uniknąć długich instrukcji if-else.
Przykład mapy:
- Drabiny: 4 na 14, 9 na 31, 28 na 84.
- Węże: 17 na 7, 54 na 34, 98 na 79.
Zarządzanie przejściami przestrzennymi na dynamicznym interfejsie nauczyło mnie wiele o zarządzaniu stanem.
Źródło: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1