𝗚𝗶𝗼𝗿𝗻𝗼 𝟯𝟮 𝗱𝗶 𝗔𝗽𝗽𝗿𝗲𝗻𝗱𝗶𝘀𝘁𝗮𝗴𝗴𝗶𝗼 𝗱𝗲𝗹𝗹𝗼 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡
Oggi ho costruito un gioco di Serpenti e Scale.
Questo progetto ha richiesto una manipolazione di array e una logica complessa. Ho usato HTML5, CSS3 e Vanilla JavaScript.
Ieri ho costruito Sasso, Carta, Forbici. Oggi sono passato a una griglia di 100 celle. Ciò ha richiesto il tracciamento delle posizioni attraverso un layout matematico.
Ecco come l'ho costruito:
- Ho usato un ciclo per creare la griglia. Non ho inserito manualmente 100 div.
- Ho usato CSS Grid per creare un layout 10x10.
- Ho usato un oggetto JavaScript per gestire scale e serpenti.
La mappa dell'oggetto collega una casella di attivazione a una casella di destinazione. Questo evita lunghi blocchi if-else.
Esempio di mappa:
- Scale: da 4 a 14, da 9 a 31, da 28 a 84.
- Serpenti: da 17 a 7, da 54 a 34, da 98 a 79.
Gestire le transizioni spaziali su un'interfaccia dinamica mi ha insegnato molto sulla gestione dello stato.
Fonte: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1