Photo by David Clode on Unsplash

Uno dei miei primi progetti fatti per studiare un linguaggio. In questo caso il turno era di JavaScript ES6.

Il progetto è fatto solo ed esclusivamente per provare le classi, i costruttori e i metodi. Il codice è abbastanza vergognoso ma è stato fatto molto tempo fa e devo dire che il gioco alla fine funziona abbastanza bene.

La triste sorte del serpentello

Il movimento del serpente

Il gioco credo lo conosciate tutti.
Per i pochi: abbiamo un povero serpente, rinchiuso in un quadrato, con l'unico obiettivo di mangiare piccoli quadratini neri che appariranno sul suo percorso. Il serpente si muove continuamente e l'utente può scegliere solamente la direzione verso il quale farlo muovere.

Bene, dopo questa piccola intro vorrei parlare di come ho gestito il movimento. So benissimo che potevo usare un Canvas per gestire lo schermo di gioco ma ho preferito fare tutto tramite div. Non ricordo il motivo ma ricordo che quando iniziai il progetto lo trovavo più divertente e stimolante. PAZZO.

Codice raffigurante il movimento del folle serpente
Il movimento del mio folle Snake

Come potete vedere questi sono gli stili che vengono assegnati per gestire il movimento del mio serpentello.
Ho definito la dimensione di ogni quadratino che compone il serpente e il tempo di clock (ovvero ogni quanti secondi deve avvenire una nuova azione nel gioco).

Per utilizzare i dati reali prendiamo in considerazione:

snake.scale = 10 // Dimensione in px di ogni blocchetto che compone il serpente
game.clock = 1000 // Tempo in ms di clock del gioco (1 refresh / s)
Metodo JavaScript per gestire il movimento di tutti gli elementi del serpente
Metodo JS per gestire il movimento della serpe

Non so come mi sia venuta in mente una soluzione simile però devo dire che funziona abbastanza bene senza molti problemi.

Ci sono anche molti altri elementi da gestire:

  • Il cibo
  • La grandezza del serpente dopo aver mangiato
  • La sconfitta (esatto dobbiamo impostare anche lei)
  • La possibilità di giocare nuovamente
  • Facoltativo: La difficoltà (velocità di clock)

Per chi è ancora interessato può trovare la repository nel mio profilo Github e può trovare una versione attualmente funzionante qui.