𝗚𝗶𝗼𝗿𝗻𝗼 𝟯𝟮 𝗱𝗶 𝗔𝗽𝗽𝗿𝗲𝗻𝗱𝗶𝘀𝘁𝗮𝗴𝗲 𝗱𝗲𝗹𝗹𝗼 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡

Oggi ho costruito un gioco di Serpenti e Scale.

Ho usato HTML5, CSS3 e Vanilla JavaScript.

Ieri ho costruito Sasso, Carta, Forbice. Oggi volevo una sfida più grande. Avevo bisogno di tracciare le posizioni su una griglia di 100 celle.

Mi sono concentrato su due aree tecniche principali:

  1. Generazione della griglia Non ho scritto 100 div HTML separati. Ho usato un ciclo per creare la griglia programmaticamente. Ho usato CSS Grid per creare un layout 10x10.

  2. Logica di gioco Ho evitato lunghe istruzioni if-else per i serpenti e le scale. Ho usato un oggetto JavaScript per mappare i movimenti. Questo rende il codice pulito.

L'oggetto mappa una casella di partenza a una casella di destinazione:

Esempio di logica:

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
};

Costruire questo mi ha insegnato come gestire lo stato e le coordinate in un gioco.

Fonte: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1