[JavaScript] Esercizio per realizzare il gioco del campo minato

Vediamo come realizzare un prototipo del gioco del campo minato, ideato da Robert Donner e Curt Johnson e pubblicato nel 1990 nella raccolta Microsoft Entertainment Pack 1 per Windows 3.1. Negli anni successivi il gioco divenne famoso anche con il nome Prato Fiorito.

Il gioco si basa sullo scoprire le mine nascoste nel campo, quando si scopre una cella che non contiene mine questa può essere vuota, oppure avere un numero che ci indica quante mine limitrofe sono presenti. Il risultato che vogliamo ottenere sarà simile a questo:

Per questo esercizio ho utilizzato il font Digital Counter 7, sviluppato da Sizenko Alexander

Anzitutto abbiamo bisogno di creare lo spazio per il nostro gioco. Creiamo quindi una pagina HTML come nel codice seguente:

Ogni cella del gioco dovrà contenere 4 proprietà diverse:

  1. indicatore se c’è o meno una mina
  2. indicatore se la cella sia o meno aperta
  3. il conteggio delle mine limitrofe
  4. indicatore se è stata messa o meno una bandierina

Faccio notare come i punti 3 e 1 possono essere riassunti in un’unica variabile, all’occorenza.

Creiamo quindi anzitutto un oggetto opportuno nel modo seguente:

Dentro a $(document).ready(function() {}); andiamo ad inizializzare il resto del gioco come segue.

Anzitutto popoliamo il nostro campo di celle:

Andiamo poi a distribuire tutte le mine, in base al numero prescelto.

Costruiamo ora una funzione ricorsiva per il controllo delle mine medesime.

Aggiungiamo anche una funzione per quando il gioco sarà finito e vorremo visualizzare tutte le mine:

A questo punto aggiungiamo una funzione per consentire il click sulle singole caselle:

E una per aggiungere le bandierine:

Il file JavaScript nel suo complesso sarà simile al seguente:

Affinché il tutto funzioni abbiamo bisogno anche di un po’ di CSS:

E il gioco è fatto.

Qui è possibile trovare una versione funzionante del gioco (con qualche aggiunta extra).

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.