Tag 32 beim Lernen des MERN-Stacks
Heute habe ich ein Snake-and-Ladder-Spiel gebaut.
Ich habe HTML5, CSS3 und Vanilla JavaScript verwendet.
Gestern habe ich Schere, Stein, Papier gebaut. Heute wollte ich eine größere Herausforderung. Ich musste Positionen auf einem 100-Felder-Raster verfolgen.
Ich habe mich auf zwei technische Hauptbereiche konzentriert:
Raster-Generierung Ich habe nicht 100 einzelne HTML-Divs geschrieben. Ich habe eine Schleife verwendet, um das Raster programmatisch zu erstellen. Ich habe CSS Grid verwendet, um ein 10x10-Layout zu erstellen.
Spiellogik Ich habe lange if-else-Anweisungen für die Schlangen und Leitern vermieden. Ich habe ein JavaScript-Objekt verwendet, um die Bewegungen abzubilden. Das macht den Code sauber.
Das Objekt bildet ein Startfeld auf ein Zielfeld ab:
- Leitern bewegen dich nach oben.
- Schlangen bewegen dich nach unten.
Beispielhafte Logik: 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 };
Die Umsetzung hat mich gelehrt, wie man den State und Koordinaten in einem Spiel verwaltet.
Quelle: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1