𝟯𝟮𝗲 𝗷𝗼𝘂𝗿 𝗱'𝗮𝗽𝗽𝗿𝗲𝗻𝘁𝗶𝘀𝘀𝗮𝗴𝗲 𝗱𝘂 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
J'ai conçu un jeu de Serpents et Échelles aujourd'hui.
Ce projet a nécessité une manipulation complexe de tableaux et une logique rigoureuse. J'ai utilisé HTML5, CSS3 et du Vanilla JavaScript.
Hier, j'ai créé un Pierre-Feuille-Ciseaux. Aujourd'hui, je suis passé à une grille de 100 cases. Cela a nécessité le suivi des positions à travers une disposition mathématique.
Voici comment je l'ai construit :
- J'ai utilisé une boucle pour créer la grille. Je n'ai pas codé en dur 100 divs.
- J'ai utilisé CSS Grid pour créer une disposition de 10x10.
- J'ai utilisé un objet JavaScript pour gérer les échelles et les serpents.
La carte de l'objet lie une case de déclenchement à une case de destination. Cela permet d'éviter de longues instructions if-else.
Exemple de carte :
- Échelles : 4 vers 14, 9 vers 31, 28 vers 84.
- Serpents : 17 vers 7, 54 vers 34, 98 vers 79.
La gestion des transitions spatiales sur une interface dynamique m'a beaucoup appris sur la gestion d'état.
Source : https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1