𝗝𝗼𝘂𝗿 𝟯𝟮 𝗱𝗲 𝗹'𝗮𝗽𝗽𝗿𝗲𝗻𝘁𝗶𝘀𝘀𝗮𝗴𝗲 𝗱𝗲 𝗹𝗮 𝘀𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡
J'ai créé un jeu de Serpents et Échelles aujourd'hui.
J'ai utilisé HTML5, CSS3 et Vanilla JavaScript.
Hier, j'ai créé un Pierre-Papier-Ciseaux. Aujourd'hui, je voulais un défi plus important. Je devais suivre les positions sur une grille de 100 cases.
Je me suis concentré sur deux aspects techniques principaux :
Génération de la grille Je n'ai pas écrit 100 divs HTML séparés. J'ai utilisé une boucle pour créer la grille de manière programmatique. J'ai utilisé CSS Grid pour créer une mise en page de 10x10.
Logique de jeu J'ai évité les longues instructions if-else pour les serpents et les échelles. J'ai utilisé un objet JavaScript pour mapper les mouvements. Cela rend le code propre.
L'objet associe une case de départ à une case de destination :
- Les échelles vous font monter.
- Les serpents vous font descendre.
Exemple de logique : 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 };
La réalisation de ce projet m'a appris à gérer l'état et les coordonnées dans un jeu.
Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1