𝗧𝗮𝗴 𝟯𝟮 𝗯𝗲𝗶𝗺 𝗟𝗲𝗿𝗻𝗲𝗻 𝗱𝗲𝘀 𝗠𝗘𝗥𝗡-𝗦𝘁𝗮𝗰𝗸𝘀
Ich habe heute ein Snake and Ladder Spiel gebaut.
Dieses Projekt erforderte komplexe Array-Manipulation und Logik. Ich habe HTML5, CSS3 und Vanilla JavaScript verwendet.
Gestern habe ich Schere, Stein, Papier gebaut. Heute bin ich zu einem 100-Felder-Raster übergegangen. Dies erforderte das Verfolgen von Positionen über ein mathematisches Layout hinweg.
So habe ich es gebaut:
- Ich habe eine Schleife verwendet, um das Raster zu erstellen. Ich habe nicht 100 Divs hartcodiert.
- Ich habe CSS Grid verwendet, um ein 10x10-Layout zu erstellen.
- Ich habe ein JavaScript-Objekt verwendet, um Leitern und Schlangen zu verwalten.
Die Objekt-Map verknüpft ein Trigger-Feld mit einem Ziel-Feld. Dies vermeidet lange if-else-Anweisungen.
Beispiel-Map:
- Leitern: 4 zu 14, 9 zu 31, 28 zu 84.
- Schlangen: 17 zu 7, 54 zu 34, 98 zu 79.
Das Verwalten räumlicher Übergänge auf einer dynamischen Benutzeroberfläche hat mich viel über State Management gelehrt.
Quelle: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1