JavaScript Archivi - Petar Karan

26 Novembre 2022 Nessun commento

[JavaScript] Calcola il percorso più breve tra due punti su una griglia

Vediamo oggi come creare in JavaScript una griglia sulla quale posizionare due punti e trovare il percorso più breve evitando degli ostacoli.

A titolo di curiosità ho svolto un esercizio simile (ma senza l’uso di Nodi) in Python: [python] Esercizio su funzioni ricorsive e calcolo del percorso minore possibile

Il risultato che vogliamo ottenere sarà simile a questo (avere la possibilità di impostare una dimensione e il numero di ostacoli). Versione semplice:

Versione un po’ più complicata:

Questo esercizio è consultabile anche al seguente link.

Procediamo con ordine e andiamo anzitutto a creare una classe per gestire le singole celle e quelle ad esse collegate. Vogliamo creare un sistema collegato a nodi, che rappresenti la connessione tra tutte le celle. Definiamo perciò una classe nel modo seguente:

const CellaTipo = {
	Vuota: 0,
	Ostacolo: 1,
	Partenza: 2,
	Fine: 3,
	Percorso: 4
}

class Cella {
	constructor(tipo = CellaTipo.Vuota) {
		this.tipo = tipo;
		this.vicini = [];
		this.coor = {r:null,c:null};
	}
	addVicino(nodo) {
		if(!this.vicini.includes(nodo)) 
			this.vicini.push(nodo);
		if(!nodo.vicini.includes(this)) 
			nodo.vicini.push(this);
	}
	setCoor(r,c) {
		this.coor.r = r;
		this.coor.c = c;
		return this;
	}
}

const CellaTipo = {

Vuota: 0,

Ostacolo: 1,

Partenza: 2,

Fine: 3,

Percorso: 4

}

class Cella {

constructor(tipo = CellaTipo.Vuota) {

this.tipo = tipo;

this.vicini = [];

this.coor = {r:null,c:null};

}

addVicino(nodo) {

if(!this.vicini.includes(nodo))

this.vicini.push(nodo);

if(!nodo.vicini.includes(this))

nodo.vicini.push(this);

}

setCoor(r,c) {

this.coor.r = r;

this.coor.c = c;

return this;

}

In particolare voglio mettere in evidenza il metodo addVicino(nodo)

	addVicino(nodo) {
		if(!this.vicini.includes(nodo)) 
			this.vicini.push(nodo);
		if(!nodo.vicini.includes(this)) 
			nodo.vicini.push(this);
	}

addVicino(nodo) {

if(!this.vicini.includes(nodo))

this.vicini.push(nodo);

if(!nodo.vicini.includes(this))

nodo.vicini.push(this);

}

Vogliamo che ogni nodo sia interconnesso con il proprio vicino, quindi se abbiamo due nodi A e B allora A avrà nei vicini B e B avrà nei vicini A.

Costruiamo adesso la classe che creerà la mappa. Nel codice ho inserito i commenti ai vari metodi:

class Mappa {
	
	/*
	COSTRUTTORE: Di predefinito partiamo con 10 x 10 come dimensione della mappa e con un numero di ostacoli da definire (poi metteremo anche quello a 10)
	*/
	constructor(n = 10,ostacoli) {
		
		this.nodi = [];
		this.n = n;
		this.inizio = null;
		this.fine = null;
		
		this.setOstacoli(ostacoli);
		this.costruisciMappa();
		this.costruisciOstacoli();
		
	}
	
	/*
	COSTRUIAMO LA MAPPA: Noi sappiamo che la mappa è una griglia quadrata limitata, dove gli spostamenti possibili sono solo in verticale e orizzontale, non è possibile spostarsi in diagonale.
	NB: I nodi li mettiamo in una lista di nodi unidimensionale, rispetto alla mappa bidimensionale
	*/
	costruisciMappa() {
		
		this.nodi = [];
		
		for(var r = 0; r < this.n; r++ ) {
			for(var c = 0; c < this.n; c++ ) {
				// qui convertiamo le coordinate in una sola dimensione
				var posCorr = r * this.n + c;
				// aggiungiamo il nodo
				this.nodi.push((new Cella()).setCoor(r,c));
				if( c > 0 ) {
					// colleghiamo subito il nodo con quelli appena precedenti
					this.nodi[posCorr].addVicino(this.nodi[posCorr-1]);
				}
				if( r > 0 ) {
					// colleghiamo subito il nodo con quelli soprastanti
					this.nodi[posCorr].addVicino(this.nodi[posCorr-this.n]);
				}
			}
		}
		
	}
	
	// impostiamo il numero di ostacoli
	setOstacoli(ostacoli) {
		this.ostacoli = ostacoli;
	}
	
	// creiamo gli ostacoli con una funzione casuale
	costruisciOstacoli() {
		
		var o = 0;
		while(o < this.ostacoli) {
			// troviamo una posizione casuale all'interno della lista dei nodi
			var pos = Math.round((this.n*this.n-1)*Math.random());
			// nel caso in cui la cella sia vuota
			if( this.nodi[pos].tipo == CellaTipo.Vuota ) {
				// impostiamo l'ostacolo
				this.nodi[pos].tipo = CellaTipo.Ostacolo;
				o++;
			}
		}
		
	}
	
	hasPartenza() {
		return this.inizio != null;
	}
	
	hasFine() {
		return this.fine != null;
	}
	
	getNodo(r,c) {
		var pos = r * this.n + c;
		return this.nodi[pos];
	}
	
	// impostiamo la partenza
	setPartenza(r,c) {
		if( this.inizio != null ) return false;
		var pos = r * this.n + c;
		if( this.nodi[pos].tipo == CellaTipo.Vuota ) {
			this.nodi[pos].tipo = CellaTipo.Partenza;
			this.inizio = pos;
			return true;
		}
		return false;
	}
	
	// impostiamo la fine
	setFine(r,c) {
		if( this.fine != null ) return false;
		var pos = r * this.n + c;
		if( this.nodi[pos].tipo == CellaTipo.Vuota ) {
			this.nodi[pos].tipo = CellaTipo.Fine;
			this.fine = pos;
			return true;
		}
		return false;
	}
	
	// calcoliamo il percorso, facendo anche un po' di statistiche 
	calcolaPercorso() {
		if( this.inizio != null && this.fine != null ) {
		
			this.percorsi = [];
			this.shortest = [];
			this.maxlen = null;
			
			this.scartati_lung = 0;
			this.scartati_vici = 0;
			this.tstart = new Date();
			
			this.calcolo(this.nodi[this.inizio],[]);
			
			this.tend = new Date();
			
			console.log("Tempo di calcolo: "+Math.round((this.tend-this.tstart))+"ms, Scartati troppo lunghi: "+this.scartati_lung+", Scartati per vicini: "+this.scartati_vici);
		
		}
		return null;
	}
	
	// controlliamo che il percorso non curvi inutilmente, in base al numero di vicini prossimi ad ogni nodo
	nMaxVicini(nodo,percorso) {
		
		var vicini = 0;
		for(var i = 0; i < percorso.length; i++ ) {
			if(nodo.vicini.includes(percorso[i])) vicini++;
		}
		return vicini;
		
	}
	
	/*
	CALCOLO: qui calcoliamo il percorso a partire da un nodo dato in poi, spostandoci su ogni vicino del nodo, finché non troviamo il nodo finale
	*/
	calcolo(nodo,percorso) {
		
		// se la lunghezza del percorso attuale supera il percorso dalla lunghezza minima trovato, allora interrompiamo la funzione ricorsiva
		if( this.maxlen != null && percorso.length >= this.maxlen ) 
		{
			this.scartati_lung++;
			return;
		}
		
		// se il nodo non è già contenuto nel percorso, aggiungiamolo
		if( !percorso.includes(nodo) ) {
			
			// se il numero di vicini è maggiore di 2 interrompiamo il calcolo
			if( this.nMaxVicini(nodo,percorso) > 2 ) {
				this.scartati_vici++;
				return;
			}
			
			percorso.push(nodo);
			// proseguiamo su ogni vicino del nodo
			for(var i = 0; i < nodo.vicini.length; i++ ) {
				if( nodo.vicini[i].tipo == CellaTipo.Fine ) {
					// abbiamo trovato un percorso
					percorso.push(nodo.vicini[i]);
					var len = percorso.length;
					if( len < this.maxlen || this.maxlen == null ) {
						this.maxlen = len;
						this.shortest = percorso.slice();
					}
					this.percorsi.push(percorso.slice());
				}
				if( nodo.vicini[i].tipo == CellaTipo.Vuota ) {
					this.calcolo(nodo.vicini[i],percorso.slice());
				}
			}
		}
		
	}
	
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

class Mappa {

COSTRUTTORE: Di predefinito partiamo con 10 x 10 come dimensione della mappa e con un numero di ostacoli da definire (poi metteremo anche quello a 10)

constructor(n = 10,ostacoli) {

this.nodi = [];

this.n = n;

this.inizio = null;

this.fine = null;

this.setOstacoli(ostacoli);

this.costruisciMappa();

this.costruisciOstacoli();

}

COSTRUIAMO LA MAPPA: Noi sappiamo che la mappa è una griglia quadrata limitata, dove gli spostamenti possibili sono solo in verticale e orizzontale, non è possibile spostarsi in diagonale.

NB: I nodi li mettiamo in una lista di nodi unidimensionale, rispetto alla mappa bidimensionale

costruisciMappa() {

this.nodi = [];

for(var r = 0; r < this.n; r++ ) {

for(var c = 0; c < this.n; c++ ) {

// qui convertiamo le coordinate in una sola dimensione

var posCorr = r * this.n + c;

// aggiungiamo il nodo

this.nodi.push((new Cella()).setCoor(r,c));

if( c > 0 ) {

// colleghiamo subito il nodo con quelli appena precedenti

this.nodi[posCorr].addVicino(this.nodi[posCorr-1]);

}

if( r > 0 ) {

// colleghiamo subito il nodo con quelli soprastanti

this.nodi[posCorr].addVicino(this.nodi[posCorr-this.n]);

}

// impostiamo il numero di ostacoli

setOstacoli(ostacoli) {

this.ostacoli = ostacoli;

}

// creiamo gli ostacoli con una funzione casuale

costruisciOstacoli() {

var o = 0;

while(o < this.ostacoli) {

// troviamo una posizione casuale all'interno della lista dei nodi

var pos = Math.round((this.n*this.n-1)*Math.random());

// nel caso in cui la cella sia vuota

if( this.nodi[pos].tipo == CellaTipo.Vuota ) {

// impostiamo l'ostacolo

this.nodi[pos].tipo = CellaTipo.Ostacolo;

o++;

}

hasPartenza() {

return this.inizio != null;

}

hasFine() {

return this.fine != null;

}

getNodo(r,c) {

var pos = r * this.n + c;

return this.nodi[pos];

}

// impostiamo la partenza

setPartenza(r,c) {

if( this.inizio != null ) return false;

var pos = r * this.n + c;

if( this.nodi[pos].tipo == CellaTipo.Vuota ) {

this.nodi[pos].tipo = CellaTipo.Partenza;

this.inizio = pos;

return true;

}

return false;

}

// impostiamo la fine

setFine(r,c) {

if( this.fine != null ) return false;

var pos = r * this.n + c;

if( this.nodi[pos].tipo == CellaTipo.Vuota ) {

this.nodi[pos].tipo = CellaTipo.Fine;

this.fine = pos;

return true;

}

return false;

}

// calcoliamo il percorso, facendo anche un po' di statistiche

calcolaPercorso() {

if( this.inizio != null && this.fine != null ) {

this.percorsi = [];

this.shortest = [];

this.maxlen = null;

this.scartati_lung = 0;

this.scartati_vici = 0;

this.tstart = new Date();

this.calcolo(this.nodi[this.inizio],[]);

this.tend = new Date();

console.log("Tempo di calcolo: "+Math.round((this.tend-this.tstart))+"ms, Scartati troppo lunghi: "+this.scartati_lung+", Scartati per vicini: "+this.scartati_vici);

}

return null;

}

// controlliamo che il percorso non curvi inutilmente, in base al numero di vicini prossimi ad ogni nodo

nMaxVicini(nodo,percorso) {

var vicini = 0;

for(var i = 0; i < percorso.length; i++ ) {

if(nodo.vicini.includes(percorso[i])) vicini++;

}

return vicini;

}

CALCOLO: qui calcoliamo il percorso a partire da un nodo dato in poi, spostandoci su ogni vicino del nodo, finché non troviamo il nodo finale

calcolo(nodo,percorso) {

// se la lunghezza del percorso attuale supera il percorso dalla lunghezza minima trovato, allora interrompiamo la funzione ricorsiva

if( this.maxlen != null && percorso.length >= this.maxlen )

{

this.scartati_lung++;

return;

}

// se il nodo non è già contenuto nel percorso, aggiungiamolo

if( !percorso.includes(nodo) ) {

// se il numero di vicini è maggiore di 2 interrompiamo il calcolo

if( this.nMaxVicini(nodo,percorso) > 2 ) {

this.scartati_vici++;

return;

}

percorso.push(nodo);

// proseguiamo su ogni vicino del nodo

for(var i = 0; i < nodo.vicini.length; i++ ) {

if( nodo.vicini[i].tipo == CellaTipo.Fine ) {

// abbiamo trovato un percorso

percorso.push(nodo.vicini[i]);

var len = percorso.length;

if( len < this.maxlen || this.maxlen == null ) {

this.maxlen = len;

this.shortest = percorso.slice();

}

this.percorsi.push(percorso.slice());

}

if( nodo.vicini[i].tipo == CellaTipo.Vuota ) {

this.calcolo(nodo.vicini[i],percorso.slice());

}

In particolare vorrei soffermarmi sul controllo dei vicini con il metodo nMaxVicini(nodo,percorso)

Durante la ricerca del percorso voglio evitare tutti quei percorsi che si annodano a serpentina, perché tanto non sarebbero mai il percorso migliore. Se un percorso è così annodato, significa che esiste un nodo che ha almeno 3 vicini, durante la costruzione almeno 2 (ricordiamoci che il nodo successivo non è stato ancora aggiunto). Quindi ogni nodo, durante la costruzione, non deve avere più di un vicino.

Completiamo il tutto con la creazione della griglia vera e propria:

var mappa = null;

function avvioMappa(d, o) {
	
	mappa = new Mappa(d, o);
	
	$('#griglia').html("");
	$('#griglia').css("width",(d*52)+"px");
	$('#griglia').css("height",(d*52)+"px");
	
	for(var r = 0; r < d; r++ ) {
		for(var c = 0; c < d; c++ ) {
			var cont = mappa.getNodo(r,c).tipo == CellaTipo.Ostacolo ? "X" : "&nbsp;";
			$('#griglia').append('<div class="cella'+(cont=="X"?" ostacolo":"")+'" data-row="'+r+'" data-col="'+c+'">'+cont+'</div>');
		}
	}
	
	$('.cella').unbind();
	$('.cella').click(function() {
		var r = parseInt($(this).attr("data-row"));
		var c = parseInt($(this).attr("data-col"));
		if( !mappa.hasPartenza() ) {
			if( !mappa.setPartenza(r,c) ) alert("casella non valida");
			else $(this).html("A").css("color","red");
		} else {
			if( !mappa.setFine(r,c) ) alert("casella non valida");
			else $(this).html("B").css("color","green");
		}
	});
	
	$('#trova').unbind();
	$('#trova').click(function(){
		
		if( mappa.hasFine() ) {
			
			mappa.calcolaPercorso();
			
			if( mappa.shortest.length > 0 ) {
				
				for(var i = 0; i < mappa.shortest.length; i++ ) {
					var r = mappa.shortest[i].coor.r;
					var c = mappa.shortest[i].coor.c;
					if( mappa.shortest[i].tipo == CellaTipo.Vuota )
						$('.cella[data-row='+r+'][data-col='+c+']').html("&bull;").css("color","blue");
				}
				
			} else {
				alert("Impossibile trovare percorso!");
			}
			
		} else {
			alert("Imposta percorso!");
		}
		
	});
	
}

$(document).ready(function(){
		
	$('#mostra').click(function(){
		
		var dim = parseInt($('#dimensione').val());
		var ost = parseInt($('#ostacoli').val());
		
		if( dim > 1 && ost >= 0 && ost <= dim * dim ) {
		
			avvioMappa(dim, ost);
		
		} else {
			
			alert("Valori non validi!");
			
		}
		
	});
	
});

var mappa = null;

function avvioMappa(d, o) {

mappa = new Mappa(d, o);

$('#griglia').html("");

$('#griglia').css("width",(d*52)+"px");

$('#griglia').css("height",(d*52)+"px");

for(var r = 0; r < d; r++ ) {

for(var c = 0; c < d; c++ ) {

var cont = mappa.getNodo(r,c).tipo == CellaTipo.Ostacolo ? "X" : " ";

$('#griglia').append('<div class="cella'+(cont=="X"?" ostacolo":"")+'" data-row="'+r+'" data-col="'+c+'">'+cont+'</div>');

}

$('.cella').unbind();

$('.cella').click(function() {

var r = parseInt($(this).attr("data-row"));

var c = parseInt($(this).attr("data-col"));

if( !mappa.hasPartenza() ) {

if( !mappa.setPartenza(r,c) ) alert("casella non valida");

else $(this).html("A").css("color","red");

} else {

if( !mappa.setFine(r,c) ) alert("casella non valida");

else $(this).html("B").css("color","green");

}

});

$('#trova').unbind();

$('#trova').click(function(){

if( mappa.hasFine() ) {

mappa.calcolaPercorso();

if( mappa.shortest.length > 0 ) {

for(var i = 0; i < mappa.shortest.length; i++ ) {

var r = mappa.shortest[i].coor.r;

var c = mappa.shortest[i].coor.c;

if( mappa.shortest[i].tipo == CellaTipo.Vuota )

$('.cella[data-row='+r+'][data-col='+c+']').html("•").css("color","blue");

}

} else {

alert("Impossibile trovare percorso!");

}

} else {

alert("Imposta percorso!");

}

});

}

$(document).ready(function(){

$('#mostra').click(function(){

var dim = parseInt($('#dimensione').val());

var ost = parseInt($('#ostacoli').val());

if( dim > 1 && ost >= 0 && ost <= dim * dim ) {

avvioMappa(dim, ost);

} else {

alert("Valori non validi!");

}

});

E naturalmente con un po’ di CSS:

#griglia {
	width: 520px;
	height: 520px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 12px;
}
.cella {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border: 1px solid #333;
	text-align: center;
	font-family: Verdana;
	font-size: 32px;
	cursor: pointer;
}
.ostacolo {
	background-color: #f00;
}

#griglia {

width: 520px;

height: 520px;

display: flex;

flex-wrap: wrap;

margin-top: 12px;

}

.cella {

width: 50px;

height: 50px;

line-height: 50px;

border: 1px solid #333;

text-align: center;

font-family: Verdana;

font-size: 32px;

cursor: pointer;

}

.ostacolo {

background-color: #f00;

}

E infine la pagina HTML per mettere il tutto insieme.

<html>

	<head>
		<title>Calcolo del percorso</title>
		<link href="percorso.css" rel="stylesheet">
	</head>
	
	<body>
	
		<input type="text" id="dimensione" value="10" placeholder="dimensione">
		<input type="text" id="ostacoli" value="10" placeholder="n. ostacoli">
		<button type="button" id="mostra">Mostra griglia</button>
		<button type="button" id="trova">Trova percorso</button>
	
		<div id="griglia"></div>
	
	</body>
	
	<script src="jquery-3.6.1.min.js"></script>
	<script src="percorso.js"></script>
	<script src="main.js"></script>


</html>

<html>

<head>

<title>Calcolo del percorso</title>

</head>

<body>

<button type="button" id="mostra">Mostra griglia</button>

<button type="button" id="trova">Trova percorso</button>

</body>

</html>

Vediamo infine un esempio funzionante del codice.

Vedi articolo

23 Novembre 2022 Nessun commento

[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:

<html>
	
	<head>
		<title>Campo Minato</title>
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href="campominato.css" rel="stylesheet">
	</head>
	
	<body>
	
		<div id="griglia"></div>
		
		<div id="stato"></div>
	
	</body>
	
	<script src="jquery-3.6.1.min.js"></script>
	<script src="campominato.js"></script>


</html>

<html>

<head>

<title>Campo Minato</title>

</head>

<body>

</body>

</html>

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

indicatore se c’è o meno una mina
indicatore se la cella sia o meno aperta
il conteggio delle mine limitrofe
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:

class Cella {
	constructor(mina) {
		this.mina = mina;
		this.aperta = false;
		this.cont = 0;
		this.flag = false;
	}
}

class Cella {

constructor(mina) {

this.mina = mina;

this.aperta = false;

this.cont = 0;

this.flag = false;

}

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

Anzitutto popoliamo il nostro campo di celle:

for(r = 0; r < n; r++) {
	campo[r] = [];
	for(c = 0; c < n; c++) {
		campo[r][c] = new Cella(false);
		$('#griglia').append('<div class="cella" data-row="'+r+'" data-col="'+c+'">&nbsp;</div>');
	}
	//$('#griglia').append("<br>");
}

for(r = 0; r < n; r++) {

campo[r] = [];

for(c = 0; c < n; c++) {

campo[r][c] = new Cella(false);

$('#griglia').append('<div class="cella" data-row="'+r+'" data-col="'+c+'"> </div>');

}

//$('#griglia').append("<br>");

}

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

m = 0;
while(m < mine) {
	pr = Math.round((n-1)*Math.random());
	pc = Math.round((n-1)*Math.random());
	if( !campo[pr][pc].mina ) {
		campo[pr][pc].mina = true;
		for(i=-1;i<=1;i++)
			for(j=-1;j<=1;j++) {
				dr = pr + i;
				dc = pc + j;
				if( dr >= 0 && dc >= 0 && dr < n && dc < n ) {
					campo[dr][dc].cont++;
				}
			}
		m++;
	}
}

m = 0;

while(m < mine) {

pr = Math.round((n-1)*Math.random());

pc = Math.round((n-1)*Math.random());

if( !campo[pr][pc].mina ) {

campo[pr][pc].mina = true;

for(i=-1;i<=1;i++)

for(j=-1;j<=1;j++) {

dr = pr + i;

dc = pc + j;

if( dr >= 0 && dc >= 0 && dr < n && dc < n ) {

campo[dr][dc].cont++;

}

m++;

}

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

function controlla(r, c) {
	
	if( campo[r][c].aperta ) return true;
	
	campo[r][c].aperta = true;
	cAperte++;
	
	$('.cella[data-row='+r+'][data-col='+c+']').html(campo[r][c].cont ? campo[r][c].cont : "&nbsp;");
	$('.cella[data-row='+r+'][data-col='+c+']').addClass("aperta");
	
	if( campo[r][c].cont ) 
		$('.cella[data-row='+r+'][data-col='+c+']').addClass("colore-" + (campo[r][c].cont<4?campo[r][c].cont:4));
	
	if( !campo[r][c].mina && !campo[r][c].cont ) {
		
		for(var dr=r-1;dr<=r+1;dr++)
			for(var dc=c-1;dc<=c+1;dc++)
				if(dc >= 0 && dr >= 0 && dc < n && dr < n)
					controlla(dr,dc);
				
	} else if( campo[r][c].mina ) {
		// qui mettiamo la mina
		$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');
		$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");
		return false;
	}
	
	return true;
	
}

function controlla(r, c) {

if( campo[r][c].aperta ) return true;

campo[r][c].aperta = true;

cAperte++;

$('.cella[data-row='+r+'][data-col='+c+']').html(campo[r][c].cont ? campo[r][c].cont : " ");

$('.cella[data-row='+r+'][data-col='+c+']').addClass("aperta");

if( campo[r][c].cont )

$('.cella[data-row='+r+'][data-col='+c+']').addClass("colore-" + (campo[r][c].cont<4?campo[r][c].cont:4));

if( !campo[r][c].mina && !campo[r][c].cont ) {

for(var dr=r-1;dr<=r+1;dr++)

for(var dc=c-1;dc<=c+1;dc++)

if(dc >= 0 && dr >= 0 && dc < n && dr < n)

controlla(dr,dc);

} else if( campo[r][c].mina ) {

// qui mettiamo la mina

$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');

$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");

return false;

}

return true;

}

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

function scopriMine() {
	for(var r = 0; r < n; r++)
		for(var c = 0; c < n; c++) 
			if(campo[r][c].mina) {
				campo[r][c].aperta = true;
				$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');
				$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");
			}
}

function scopriMine() {

for(var r = 0; r < n; r++)

for(var c = 0; c < n; c++)

if(campo[r][c].mina) {

campo[r][c].aperta = true;

$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');

$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");

}

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

$('.cella').click(function() {
	if( gioco ) {
		var r = parseInt($(this).attr("data-row"));
		var c = parseInt($(this).attr("data-col"));
		if( !controlla(r,c) ) {
			// ha perso
			gioco = false;
			$('#stato').html("Hai perso!");
		} else if( n*n - cAperte <= mine ) {
			// hai vinto
			gioco = false;
			$('#stato').html("Hai vinto!");
		}
		if( !gioco ) scopriMine();
	} else {
		alert("Gioco finito!");
	}
});

$('.cella').click(function() {

if( gioco ) {

var r = parseInt($(this).attr("data-row"));

var c = parseInt($(this).attr("data-col"));

if( !controlla(r,c) ) {

// ha perso

gioco = false;

$('#stato').html("Hai perso!");

} else if( n*n - cAperte <= mine ) {

// hai vinto

gioco = false;

$('#stato').html("Hai vinto!");

}

if( !gioco ) scopriMine();

} else {

alert("Gioco finito!");

}

});

E una per aggiungere le bandierine:

$('.cella').contextmenu(function(e) {
	e.stopPropagation();
	e.preventDefault();
	var r = parseInt($(this).attr("data-row"));
	var c = parseInt($(this).attr("data-col"));
	if( !campo[r][c].aperta ) {
		if( campo[r][c].flag ) $(this).html('&nbsp;');
		else $(this).html('<i class="fa fa-flag"></i>');
		campo[r][c].flag = !campo[r][c].flag;
	}
});

$('.cella').contextmenu(function(e) {

e.stopPropagation();

e.preventDefault();

var r = parseInt($(this).attr("data-row"));

var c = parseInt($(this).attr("data-col"));

if( !campo[r][c].aperta ) {

if( campo[r][c].flag ) $(this).html(' ');

else $(this).html('<i class="fa fa-flag"></i>');

campo[r][c].flag = !campo[r][c].flag;

}

});

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

class Cella {
	constructor(mina) {
		this.mina = mina;
		this.aperta = false;
		this.cont = 0;
		this.flag = false;
	}
}

var n = 10;
var mine = 10;
var campo = [];
var cAperte = 0;
var gioco = true;

$(document).ready(function() {
	
	$('#griglia').css("height",$('#griglia').width()+"px");
	
	for(r = 0; r < n; r++) {
		campo[r] = [];
		for(c = 0; c < n; c++) {
			campo[r][c] = new Cella(false);
			$('#griglia').append('<div class="cella" data-row="'+r+'" data-col="'+c+'">&nbsp;</div>');
		}
		//$('#griglia').append("<br>");
	}


	$('.cella').css("line-height",$('.cella').width()+"px");
	$('.cella').css("font-size",(32/50)*$('.cella').width()+"px");

	m = 0;
	while(m < mine) {
		pr = Math.round((n-1)*Math.random());
		pc = Math.round((n-1)*Math.random());
		if( !campo[pr][pc].mina ) {
			campo[pr][pc].mina = true;
			for(i=-1;i<=1;i++)
				for(j=-1;j<=1;j++) {
					dr = pr + i;
					dc = pc + j;
					if( dr >= 0 && dc >= 0 && dr < n && dc < n ) {
						campo[dr][dc].cont++;
					}
				}
			m++;
		}
	}

	function controlla(r, c) {
		
		if( campo[r][c].aperta ) return true;
		
		campo[r][c].aperta = true;
		cAperte++;
		
		$('.cella[data-row='+r+'][data-col='+c+']').html(campo[r][c].cont ? campo[r][c].cont : "&nbsp;");
		$('.cella[data-row='+r+'][data-col='+c+']').addClass("aperta");
		
		if( campo[r][c].cont ) 
			$('.cella[data-row='+r+'][data-col='+c+']').addClass("colore-" + (campo[r][c].cont<4?campo[r][c].cont:4));
		
		if( !campo[r][c].mina && !campo[r][c].cont ) {
			
			for(var dr=r-1;dr<=r+1;dr++)
				for(var dc=c-1;dc<=c+1;dc++)
					if(dc >= 0 && dr >= 0 && dc < n && dr < n)
						controlla(dr,dc);
					
		} else if( campo[r][c].mina ) {
			// qui mettiamo la mina
			$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');
			$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");
			return false;
		}
		
		return true;
		
	}

	function scopriMine() {
		for(var r = 0; r < n; r++)
			for(var c = 0; c < n; c++) 
				if(campo[r][c].mina) {
					campo[r][c].aperta = true;
					$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');
					$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");
				}
	}

	$('.cella').click(function() {
		if( gioco ) {
			var r = parseInt($(this).attr("data-row"));
			var c = parseInt($(this).attr("data-col"));
			if( !controlla(r,c) ) {
				// ha perso
				gioco = false;
				$('#stato').html("Hai perso!");
			} else if( n*n - cAperte <= mine ) {
				// hai vinto
				gioco = false;
				$('#stato').html("Hai vinto!");
			}
			if( !gioco ) scopriMine();
		} else {
			alert("Gioco finito!");
		}
	});

	$('.cella').contextmenu(function(e) {
		e.stopPropagation();
		e.preventDefault();
		var r = parseInt($(this).attr("data-row"));
		var c = parseInt($(this).attr("data-col"));
		if( !campo[r][c].aperta ) {
			if( campo[r][c].flag ) $(this).html('&nbsp;');
			else $(this).html('<i class="fa fa-flag"></i>');
			campo[r][c].flag = !campo[r][c].flag;
		}
	});
	
	
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

class Cella {

constructor(mina) {

this.mina = mina;

this.aperta = false;

this.cont = 0;

this.flag = false;

}

var n = 10;

var mine = 10;

var campo = [];

var cAperte = 0;

var gioco = true;

$(document).ready(function() {

$('#griglia').css("height",$('#griglia').width()+"px");

for(r = 0; r < n; r++) {

campo[r] = [];

for(c = 0; c < n; c++) {

campo[r][c] = new Cella(false);

$('#griglia').append('<div class="cella" data-row="'+r+'" data-col="'+c+'"> </div>');

}

//$('#griglia').append("<br>");

}

$('.cella').css("line-height",$('.cella').width()+"px");

$('.cella').css("font-size",(32/50)*$('.cella').width()+"px");

m = 0;

while(m < mine) {

pr = Math.round((n-1)*Math.random());

pc = Math.round((n-1)*Math.random());

if( !campo[pr][pc].mina ) {

campo[pr][pc].mina = true;

for(i=-1;i<=1;i++)

for(j=-1;j<=1;j++) {

dr = pr + i;

dc = pc + j;

if( dr >= 0 && dc >= 0 && dr < n && dc < n ) {

campo[dr][dc].cont++;

}

m++;

}

function controlla(r, c) {

if( campo[r][c].aperta ) return true;

campo[r][c].aperta = true;

cAperte++;

$('.cella[data-row='+r+'][data-col='+c+']').html(campo[r][c].cont ? campo[r][c].cont : " ");

$('.cella[data-row='+r+'][data-col='+c+']').addClass("aperta");

if( campo[r][c].cont )

$('.cella[data-row='+r+'][data-col='+c+']').addClass("colore-" + (campo[r][c].cont<4?campo[r][c].cont:4));

if( !campo[r][c].mina && !campo[r][c].cont ) {

for(var dr=r-1;dr<=r+1;dr++)

for(var dc=c-1;dc<=c+1;dc++)

if(dc >= 0 && dr >= 0 && dc < n && dr < n)

controlla(dr,dc);

} else if( campo[r][c].mina ) {

// qui mettiamo la mina

$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');

$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");

return false;

}

return true;

}

function scopriMine() {

for(var r = 0; r < n; r++)

for(var c = 0; c < n; c++)

if(campo[r][c].mina) {

campo[r][c].aperta = true;

$('.cella[data-row='+r+'][data-col='+c+']').html('<i class="fa fa-bomb"></i>');

$('.cella[data-row='+r+'][data-col='+c+']').addClass("mina");

}

$('.cella').click(function() {

if( gioco ) {

var r = parseInt($(this).attr("data-row"));

var c = parseInt($(this).attr("data-col"));

if( !controlla(r,c) ) {

// ha perso

gioco = false;

$('#stato').html("Hai perso!");

} else if( n*n - cAperte <= mine ) {

// hai vinto

gioco = false;

$('#stato').html("Hai vinto!");

}

if( !gioco ) scopriMine();

} else {

alert("Gioco finito!");

}

});

$('.cella').contextmenu(function(e) {

e.stopPropagation();

e.preventDefault();

var r = parseInt($(this).attr("data-row"));

var c = parseInt($(this).attr("data-col"));

if( !campo[r][c].aperta ) {

if( campo[r][c].flag ) $(this).html(' ');

else $(this).html('<i class="fa fa-flag"></i>');

campo[r][c].flag = !campo[r][c].flag;

}

});

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

#stato {
	font-size: 32px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	width: 600px;
}
#griglia {
	width: 600px;
	height: 600px;
}
.cella {
    border: 4px outset #bbb;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    cursor: pointer;
	text-align: center;
	margin: 1px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 32px;
	position: relative;
	vertical-align: middle;
}
.cella i {
	position: absolute;
	transform: translate(50%,-50%);
	top: 50%;
	right: 50%;
}
.cella:hover {
	background-color: #aaa;
}
.aperta {
	background-color: #fff;
}
.colore-1 {color: blue;}
.colore-2 {color: green;}
.colore-3 {color: red;}
.colore-4 {color: purple;}
.mina {
	background-color: rgb(255,0,0);
	color: #000;
}

#stato {

font-size: 32px;

text-align: center;

font-family: 'Roboto', sans-serif;

width: 600px;

}

#griglia {

width: 600px;

height: 600px;

}

.cella {

border: 4px outset #bbb;

display: inline-block;

width: 50px;

height: 50px;

background-color: #ccc;

cursor: pointer;

text-align: center;

margin: 1px;

font-family: 'Roboto', sans-serif;

font-weight: 700;

font-size: 32px;

position: relative;

vertical-align: middle;

}

.cella i {

position: absolute;

transform: translate(50%,-50%);

top: 50%;

right: 50%;

}

.cella:hover {

background-color: #aaa;

}

.aperta {

background-color: #fff;

}

.colore-1 {color: blue;}

.colore-2 {color: green;}

.colore-3 {color: red;}

.colore-4 {color: purple;}

.mina {

background-color: rgb(255,0,0);

color: #000;

}

E il gioco è fatto.

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

Vedi articolo

26 Ottobre 2020 Nessun commento

[javascript] Uncaught TypeError: Cannot read property ‘msie’ of undefined

Dalla versione jQuery 1.9 alcune funzionalità sono state deprecate, tra le quali anche quella di $.browser. Questo pò produrre errori come: Uncaught TypeError: Cannot read property 'msie' of undefined

Per risolvere il problema è sufficiente aggiungere la seguente istruzione dopo aver importato jQuery:

jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();

jQuery.browser = {};

(function () {

jQuery.browser.msie = false;

jQuery.browser.version = 0;

if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {

jQuery.browser.msie = true;

jQuery.browser.version = RegExp.$1;

}

})();

Vedi articolo

16 Marzo 2020 1 commento

Simulazione sull’espansione del contagio da Coronavirus (COVID-19)

Se stai cercando informazioni sul Coronavirus (COVID-19) ti raccomando di visitare i seguenti siti ufficiali:

Informazioni sul Coronavirus in Italia (Ministero della Salute)

Informazioni sul Coronavirus nel mondo (Organizzazione Mondiale della Sanità)

Panoramica delle condizioni del Coronavirus (Organizzazione Mondiale della Sanità)

Domande e risposte sul Coronavirus (Organizzazione Mondiale della Sanità)

Io non sono un medico e il presente articolo è stato ispirato da quello pubblicato sul The Whashington Post: Why outbreaks like coronavirus spread exponentially, and how to “flatten the curve”

Quello che mi interessa in questa sede è dare uno spunto di programmazione a tutti quelli che, come me, ora sono chiusi in casa ed hanno voglia di ingannare il tempo con qualcosa di diverso dal solito (insomma, buttandosi a fare un po’ di programmazione!).

Spero che questo sia anche un ottimo esempio del perché, in questo momento, dobbiamo fare di tutto per restare il più possibile a casa ed evitare il contatto con gli altri, per la nostra e la loro salute, anche se sono nostri familiari o amici.

Fatte queste premesse arriviamo a noi: quello che vogliamo fare è costruire un simulatore, similmente a quanto dimostrato dal The Whashington Post, su come si possa espandere un’epidemia e quanto sia utile ridurre al minimo l’interazione tra i vari membri della popolazione.

Il simulatore è costruito interamente in JavaScript utilizzando l’elemento canvas del HTML5.

La versione interattiva del simulatore, realizzato come illustrato nell’articolo, si trova in fondo all’articolo

Quello che vogliamo costruire è un simulatore come questo di seguito:

I parametri in input che vogliamo passare al simulatore saranno:

la popolazione totale (800 nel mio caso)
il numero di malati iniziali (ne basta anche solo 1)
il numero di quelli che restano fermi
il tempo di guarigione in millisecondi (3000 nel mio caso)

Giocando un po’ con il simulatore ci accorgeremo subito del perché restare a casa è in questo momento fondamentale.

Partendo dai parametri precedenti e impostando a 0 il numero di quelli fermi otterremo una curva simile alla seguente:

In questo caso il contagio ha raggiunto un picco massimo del 81% della popolazione, infettando tutti quanti alla fine della simulazione. Nella realtà questo picco rappresenta il massimo impatto sul sistema sanitario, che nella realtà sarebbe al collasso se dovesse avvenire qualcosa di simile.

Se aumentiamo il numero della popolazione che sta ferma (200 individui, ovvero il 25%) abbiamo una curva simile alla seguente:

Notiamo che il picco massimo è sceso leggermente, arrivando al 68%, ma restando comunque molto alto.

Attuando misure più restrittive e fermando il 75% della popolazione, ossia 600 individui su 800, avremo una curva come la seguente:

Il picco si è dimezzato in questo caso, arrivando ad un massimo del 39%. Con misure ancora più restrittive, arrivando a fermare 700 individui, quindi l’87,5% della popolazione, si arriva a picchi ancora inferiori, ma non inesistenti (si parla del 21%):

Questo modello rappresenta, sebbene in linea di massima, molto bene la situazione attuale. Le misure restrittive servono principalmente per evitare il collasso del sistema sanitario e dare la possibilità ai medici di occuparsi di tutti quanti i pazienti più gravi, cosa che in caso contrario sarebbe impossibile. Il contagio allungherà così la sua presenza nel tempo, ma verrà anche abbattuto il suo impatto sulla società.

Inutile dire come questa simulazione sia molto approssimativa e non tiene conto di altri fattori, tra il quale anche il decesso dei malati.

Detto tutto questo arriviamo al codice vero e proprio. Anzitutto creiamo l’interfaccia in HTML nel modo seguente:

<div>
	Popolazione <input type="text" value="800" id="npallini" size="4">
	Malati iniziali <input type="text" value="1" id="nmalati" size="4">
	Fermi <input type="text" value="600" id="nfermi" size="4">
	T. guarigione <input type="text" value="2000" id="tempoguarigione" size="4">
	<input type="button" value="INIZIA" id="inizia" onclick="simulazione()">
</div>
<canvas id="particelle" width="800px" height="600px"></canvas>
<canvas id="grafico" width="800px" height="120px"></canvas>
<div id="info"></div>

<div>

Popolazione <input type="text" value="800" id="npallini" size="4">

Malati iniziali <input type="text" value="1" id="nmalati" size="4">

Fermi <input type="text" value="600" id="nfermi" size="4">

T. guarigione <input type="text" value="2000" id="tempoguarigione" size="4">

</div>

Procediamo adesso con il codice in JavaScript, che riporto di seguito con i commenti all’interno del codice:

// registriamo l'id dell'animazione fornito da requestAnimationFrame
// in partenza questo valore sarà null
idSimulazione = null;
// vogliamo dare la possibilità di interrompere l'animazione
// di predefinito non vi è alcuna chiamata stop ovviamente
stop = false;

// questa funzione viene chiamata quando si clicca sul pulsante INIZIA
function simulazione() {
	
	/* GESTIONE DEL PULSANTE - INIZIO */
	// leggiamo il valore del pulsante
	var pulsante = document.getElementById("inizia").value;
	
	// se il testo è FERMA, dobbiamo fermare l'animazione
	if( pulsante == "FERMA" ) {
		// cancelliamo la chiamata al browser per effettuare l'animazione
		window.cancelAnimationFrame( idSimulazione );
		// impostiamo stop su true, in modo da fermare i cicli di seguito
		stop = true;
		// cambiamo il valore del pulsante su inizia
		document.getElementById("inizia").value = "INIZIA";
	// altrimenti la iniziamo
	} else {
		stop = false;
		// cambiamo il valore del pulsante su ferma
		document.getElementById("inizia").value = "FERMA";
	}
	/* GESTIONE DEL PULSANTE - FINE */
	
	// preleviamo il riferimento al canvas delle particelle
	var canvas = document.getElementById("particelle");
	var ctx = canvas.getContext("2d");
	
	// preleviamo il riferimento al canvas del grafico
	var grafico = document.getElementById("grafico");
	var gctx = grafico.getContext("2d");
	
	// ATTENZIONE! questi due passaggi sono importanti per entrambi i canvas
	gctx.beginPath(); // questo ci serve per evitare lo slowdown, in caso contrario il canvas terrà conto di tutte le precedenti scritture, rallentando visibilmente l'esecuzione dell'animazione
	// in questo modo puliamo il canvas
	gctx.clearRect(0, 0, grafico.width, grafico.height);
	
	// metodo per disegnare una riga verticale
	gctx.drawVerticalLine = function(left, top, width, color){
		this.fillStyle=color;
		this.fillRect(left, top, 1, width);
	};
		
	// queste sono le pareti del nostro spazio
	var pareti = [
		[5,5],
		[795,5],
		[795,595],
		[5,595]
	];
	
	// preimpostiamo tutti i valori
	var pallini = [];
	// popolazione
	var npallini = document.getElementById("npallini").value ? document.getElementById("npallini").value : 800;
	// n malati
	var nmalati = document.getElementById("nmalati").value ? document.getElementById("nmalati").value : 1;
	// n di quelli fermi
	var nfermi = document.getElementById("nfermi").value ? document.getElementById("nfermi").value : 600;
	// tempo di guarigione
	var tempoguarigione = document.getElementById("tempoguarigione").value ? document.getElementById("tempoguarigione").value : 2000;
	
	// altre variabili per il funzionamento del sistema
	var maxmalati = 0;	
	var frame = 0;
	var start = new Date().getTime() / 1000;
	
	// predisponiamo tutte le palline in modo casuale
	// ogni pallino rappresenta un membro della popolazione
	var pallinicalc = [];
	for( i = 0; i < npallini; i++ ) {
		var x = Math.floor(Math.random() * (canvas.width-20)) + 10;
		var y = Math.floor(Math.random() * (canvas.height-20)) + 10;
		var pos = [x, y];
		// verifichiamo che la posizione non sia già esistente, in tal caso non
		// aggiungiamo il pallino al numero totale
		var trovato = false;
		for( j = 0; j < pallinicalc.length; j++ ) {
			if(JSON.stringify(pos)==JSON.stringify(pallinicalc[j])) {
				trovato = true;
			}
		}
		if( !trovato ) {
			pallinicalc.push(pos);
		} else {
			i--; // se la posizione esiste di già, torniamo di uno indietro e riproviamo
		}
	}
	
	// con questa classe gestiamo ogni membro della popolazione
	class Pallino {
		
		constructor(x, y, stato, direzione, velocita) {
			this.x = x;
			this.y = y;
			// 0 = sano, 1 = malato, 2 = guarito
			this.stato = stato;
			// valore in pi-greco
			this.direzione = direzione;
			this.velocita = velocita;
			this.raggio = 5;
			// il tempo ci servirà per valure la guarigione
			this.tempo = stato ? new Date().getTime() : 0;
		}
		
		// calcoliamo l'urto sulle pareti
		// nel mio caso ho considerato solamente pareti verticali ed orizzontali
		urtoParete() {
			var nPareti = pareti.length;
			for( vi = 0; vi < nPareti; vi++ ) {
				var vf = vi < nPareti - 1 ? vi + 1 : 0;
				// calcoliamo il coefficiente angolare della parete
				var a = (pareti[vf][1]-pareti[vi][1])/(pareti[vf][0]-pareti[vi][0]);
				// parete orizzontale
				if( isFinite( a ) ) {
					var b = -1;
					var c = -a * pareti[vi][0] + pareti[vi][1];
					
					var d = Math.abs(a * this.x + b * this.y + c) / Math.sqrt(a*a+b*b);
					// invertiamo velocità e direzione
					if( d <= this.raggio ) {
						this.direzione = -this.direzione;
						this.velocita = this.velocita;
					}
				// parete verticale
				} else {
					// invertiamo velocità e direzione
					if( Math.abs( this.x - pareti[vf][0] ) <= this.raggio ) {
						this.direzione = -this.direzione;
						this.velocita = -this.velocita;
					}
				}
			}
		}
		
		// controlliamo se i pallini si toccano tra di loro
		urtoPallino(pallino) {
			// se il pallino non è se stesso
			if( this.x != pallino.x && this.y != pallino.y ) {
				// la massima distanza tra due pallini
				var d = Math.sqrt(Math.pow(this.x-pallino.x,2)+Math.pow(this.y-pallino.y,2));
				// la confrontiamo con la somma dei raggi di ciascun pallino
				if( d <= this.raggio + pallino.raggio ) {
					// questa è una semplificazione dell'urto elastico bidimensionale
					// visto che entrambi i pallini hanno la medesima massa
					// calcoliamo l'angolo di impatto e sommiamolo alla direzione
					var phi = Math.atan((this.y-pallino.y)/(this.x-pallino.x));
					this.direzione += phi / 2;
					if( this.stato < 1 && pallino.stato == 1 ) {
						this.stato = 1;
						this.tempo = new Date().getTime();
					}
				}
			}
		}
		
		// restituiamo il colore in base allo stato: sano, malato, guarito
		getColore() {
			var colori = ["#0095DD","#ed1c24","#3cb878"];
			return colori[this.stato];
		}
		
		// controlliamo le interazioni da eseguire su tutti
		controlla() {
			for(var j = 0; j < pallini.length; j++ ) { 
				this.urtoPallino(pallini[j]);
			}
			this.urtoParete();
			if( new Date().getTime() - this.tempo > tempoguarigione && this.tempo > 0) {
				this.stato = 2;
			}
		}
		
		// poi effettuiamo il movimento, derivato dai controlli precedenti
		muovi() {
			this.x += this.velocita * Math.cos(this.direzione);
			this.y += this.velocita * Math.sin(this.direzione);
		}
		
	}
	
	// creiamo tutti i pallini preimpostati in cima, distribuendo malati e sani
	for( i = 0; i < pallinicalc.length; i++ ) {
		var stato = nmalati-- > 0 ? 1 : 0;
		var velocita = nfermi-- > 0 ? 0 : 2;
		pallini.push(new Pallino(pallinicalc[i][0],pallinicalc[i][1],stato,2*Math.PI*Math.random(),velocita));
	}
	
	// avviamo il processo di disegno
	function disegna() {
		// ripuliamo il canvas come prima per il grafico
		ctx.beginPath(); // questo ci serve per evitare lo slowdown
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		var sani = 0;
		var malati = 0;
		var curati = 0;
		
		// disegniamo le pareti
		function disegnaPareti() {
			var nPareti = pareti.length;
			for( vi = 0; vi < nPareti; vi++ ) {
				var vf = vi < nPareti - 1 ? vi + 1 : 0;
				ctx.moveTo(pareti[vi][0], pareti[vi][1]);
				ctx.lineTo(pareti[vf][0], pareti[vf][1]);
				ctx.stroke();
			}
		}
		
		// disegniamo un pallino
		// NB sto usando Path2D per evitare che venga disegnato
		// il bordo di controno per ciascun pallino
		function disegnaPallino(x, y, colore, raggio) {
			var pallino = new Path2D();
			pallino.arc(x, y, raggio, 0, Math.PI*2, false);
			ctx.fillStyle = colore;
			ctx.fill(pallino);
		}
		
		// disegniamo tutti i pallini chiamando la funzione precedente
		function disegnaPallini() {
			for(i = 0; i < pallini.length; i++ ) {
				disegnaPallino(pallini[i].x,pallini[i].y,pallini[i].getColore(),pallini[i].raggio);
				// già che ci siamo contiamo lo stato attuale di sani e malati
				switch( pallini[i].stato ) {
					case 0: sani++; break;
					case 1: malati++; break;
					case 2: curati++; break;
				}
			}
		}
		
		// chiamiamo i controlli per il movimento dei pallini
		function muoviPallini() {
			for(i = 0; i < pallini.length; i++ ) {
				pallini[i].controlla();
			}
			for(i = 0; i < pallini.length; i++ ) {
				pallini[i].muovi();
			}
		}
		
		// disegniamo il grafico nel tempo e scriviamo tutti i parametri
		function disegnaGrafico() {
			var colori = ["#0095DD","#ed1c24","#3cb878"];
			maxmalati = malati > maxmalati ? malati : maxmalati;
			gctx.drawVerticalLine(frame, 0, grafico.height * curati / npallini, colori[2]);
			gctx.drawVerticalLine(frame, grafico.height * curati / npallini, grafico.height * sani / npallini, colori[0]);
			gctx.drawVerticalLine(frame, grafico.height * (curati+sani) / npallini, grafico.height * malati / npallini, colori[1]);
			document.getElementById("info").innerHTML = 'Sani: <span style="color:'+colori[0]+'">'+sani+'</span> &bull; Malati: <span style="color:'+colori[1]+'">'+malati+'</span> &bull; Guariti: <span style="color:'+colori[2]+'">'+curati+'</span> &bull; Picco malati: <span style="color:'+colori[1]+'">'+maxmalati+' ('+Math.round(100*maxmalati/npallini,2)+'% del totale)</span>';
		}
		
		disegnaPareti();
		disegnaPallini();
		muoviPallini();
		
		disegnaGrafico();
		
		// controlliamo se l'animazione prosegue o meno
		if( !stop ) idSimulazione = window.requestAnimationFrame(disegna);
		console.log("id: " + idSimulazione );
			
		var now = new Date().getTime() / 1000;
		
		// avanziamo di frame
		frame++;
	}
	
	function init() {
		idSimulazione = window.requestAnimationFrame(disegna);
	}
	
	init();

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

// registriamo l'id dell'animazione fornito da requestAnimationFrame

// in partenza questo valore sarà null

idSimulazione = null;

// vogliamo dare la possibilità di interrompere l'animazione

// di predefinito non vi è alcuna chiamata stop ovviamente

stop = false;

// questa funzione viene chiamata quando si clicca sul pulsante INIZIA

function simulazione() {

/* GESTIONE DEL PULSANTE - INIZIO */

// leggiamo il valore del pulsante

var pulsante = document.getElementById("inizia").value;

// se il testo è FERMA, dobbiamo fermare l'animazione

if( pulsante == "FERMA" ) {

// cancelliamo la chiamata al browser per effettuare l'animazione

window.cancelAnimationFrame( idSimulazione );

// impostiamo stop su true, in modo da fermare i cicli di seguito

stop = true;

// cambiamo il valore del pulsante su inizia

document.getElementById("inizia").value = "INIZIA";

// altrimenti la iniziamo

} else {

stop = false;

// cambiamo il valore del pulsante su ferma

document.getElementById("inizia").value = "FERMA";

}

/* GESTIONE DEL PULSANTE - FINE */

// preleviamo il riferimento al canvas delle particelle

var canvas = document.getElementById("particelle");

var ctx = canvas.getContext("2d");

// preleviamo il riferimento al canvas del grafico

var grafico = document.getElementById("grafico");

var gctx = grafico.getContext("2d");

// ATTENZIONE! questi due passaggi sono importanti per entrambi i canvas

gctx.beginPath(); // questo ci serve per evitare lo slowdown, in caso contrario il canvas terrà conto di tutte le precedenti scritture, rallentando visibilmente l'esecuzione dell'animazione

// in questo modo puliamo il canvas

gctx.clearRect(0, 0, grafico.width, grafico.height);

// metodo per disegnare una riga verticale

gctx.drawVerticalLine = function(left, top, width, color){

this.fillStyle=color;

this.fillRect(left, top, 1, width);

};

// queste sono le pareti del nostro spazio

var pareti = [

[5,5],

[795,5],

[795,595],

[5,595]

];

// preimpostiamo tutti i valori

var pallini = [];

// popolazione

var npallini = document.getElementById("npallini").value ? document.getElementById("npallini").value : 800;

// n malati

var nmalati = document.getElementById("nmalati").value ? document.getElementById("nmalati").value : 1;

// n di quelli fermi

var nfermi = document.getElementById("nfermi").value ? document.getElementById("nfermi").value : 600;

// tempo di guarigione

var tempoguarigione = document.getElementById("tempoguarigione").value ? document.getElementById("tempoguarigione").value : 2000;

// altre variabili per il funzionamento del sistema

var maxmalati = 0;

var frame = 0;

var start = new Date().getTime() / 1000;

// predisponiamo tutte le palline in modo casuale

// ogni pallino rappresenta un membro della popolazione

var pallinicalc = [];

for( i = 0; i < npallini; i++ ) {

var x = Math.floor(Math.random() * (canvas.width-20)) + 10;

var y = Math.floor(Math.random() * (canvas.height-20)) + 10;

var pos = [x, y];

// verifichiamo che la posizione non sia già esistente, in tal caso non

// aggiungiamo il pallino al numero totale

var trovato = false;

for( j = 0; j < pallinicalc.length; j++ ) {

if(JSON.stringify(pos)==JSON.stringify(pallinicalc[j])) {

trovato = true;

}

if( !trovato ) {

pallinicalc.push(pos);

} else {

i--; // se la posizione esiste di già, torniamo di uno indietro e riproviamo

}

// con questa classe gestiamo ogni membro della popolazione

class Pallino {

constructor(x, y, stato, direzione, velocita) {

this.x = x;

this.y = y;

// 0 = sano, 1 = malato, 2 = guarito

this.stato = stato;

// valore in pi-greco

this.direzione = direzione;

this.velocita = velocita;

this.raggio = 5;

// il tempo ci servirà per valure la guarigione

this.tempo = stato ? new Date().getTime() : 0;

}

// calcoliamo l'urto sulle pareti

// nel mio caso ho considerato solamente pareti verticali ed orizzontali

urtoParete() {

var nPareti = pareti.length;

for( vi = 0; vi < nPareti; vi++ ) {

var vf = vi < nPareti - 1 ? vi + 1 : 0;

// calcoliamo il coefficiente angolare della parete

var a = (pareti[vf][1]-pareti[vi][1])/(pareti[vf][0]-pareti[vi][0]);

// parete orizzontale

if( isFinite( a ) ) {

var b = -1;

var c = -a * pareti[vi][0] + pareti[vi][1];

var d = Math.abs(a * this.x + b * this.y + c) / Math.sqrt(a*a+b*b);

// invertiamo velocità e direzione

if( d <= this.raggio ) {

this.direzione = -this.direzione;

this.velocita = this.velocita;

}

// parete verticale

} else {

// invertiamo velocità e direzione

if( Math.abs( this.x - pareti[vf][0] ) <= this.raggio ) {

this.direzione = -this.direzione;

this.velocita = -this.velocita;

}

// controlliamo se i pallini si toccano tra di loro

urtoPallino(pallino) {

// se il pallino non è se stesso

if( this.x != pallino.x && this.y != pallino.y ) {

// la massima distanza tra due pallini

var d = Math.sqrt(Math.pow(this.x-pallino.x,2)+Math.pow(this.y-pallino.y,2));

// la confrontiamo con la somma dei raggi di ciascun pallino

if( d <= this.raggio + pallino.raggio ) {

// questa è una semplificazione dell'urto elastico bidimensionale

// visto che entrambi i pallini hanno la medesima massa

// calcoliamo l'angolo di impatto e sommiamolo alla direzione

var phi = Math.atan((this.y-pallino.y)/(this.x-pallino.x));

this.direzione += phi / 2;

if( this.stato < 1 && pallino.stato == 1 ) {

this.stato = 1;

this.tempo = new Date().getTime();

}

// restituiamo il colore in base allo stato: sano, malato, guarito

getColore() {

var colori = ["#0095DD","#ed1c24","#3cb878"];

return colori[this.stato];

}

// controlliamo le interazioni da eseguire su tutti

controlla() {

for(var j = 0; j < pallini.length; j++ ) {

this.urtoPallino(pallini[j]);

}

this.urtoParete();

if( new Date().getTime() - this.tempo > tempoguarigione && this.tempo > 0) {

this.stato = 2;

}

// poi effettuiamo il movimento, derivato dai controlli precedenti

muovi() {

this.x += this.velocita * Math.cos(this.direzione);

this.y += this.velocita * Math.sin(this.direzione);

}

// creiamo tutti i pallini preimpostati in cima, distribuendo malati e sani

for( i = 0; i < pallinicalc.length; i++ ) {

var stato = nmalati-- > 0 ? 1 : 0;

var velocita = nfermi-- > 0 ? 0 : 2;

pallini.push(new Pallino(pallinicalc[i][0],pallinicalc[i][1],stato,2*Math.PI*Math.random(),velocita));

}

// avviamo il processo di disegno

function disegna() {

// ripuliamo il canvas come prima per il grafico

ctx.beginPath(); // questo ci serve per evitare lo slowdown

ctx.clearRect(0, 0, canvas.width, canvas.height);

var sani = 0;

var malati = 0;

var curati = 0;

// disegniamo le pareti

function disegnaPareti() {

var nPareti = pareti.length;

for( vi = 0; vi < nPareti; vi++ ) {

var vf = vi < nPareti - 1 ? vi + 1 : 0;

ctx.moveTo(pareti[vi][0], pareti[vi][1]);

ctx.lineTo(pareti[vf][0], pareti[vf][1]);

ctx.stroke();

}

// disegniamo un pallino

// NB sto usando Path2D per evitare che venga disegnato

// il bordo di controno per ciascun pallino

function disegnaPallino(x, y, colore, raggio) {

var pallino = new Path2D();

pallino.arc(x, y, raggio, 0, Math.PI*2, false);

ctx.fillStyle = colore;

ctx.fill(pallino);

}

// disegniamo tutti i pallini chiamando la funzione precedente

function disegnaPallini() {

for(i = 0; i < pallini.length; i++ ) {

disegnaPallino(pallini[i].x,pallini[i].y,pallini[i].getColore(),pallini[i].raggio);

// già che ci siamo contiamo lo stato attuale di sani e malati

switch( pallini[i].stato ) {

case 0: sani++; break;

case 1: malati++; break;

case 2: curati++; break;

}

// chiamiamo i controlli per il movimento dei pallini

function muoviPallini() {

for(i = 0; i < pallini.length; i++ ) {

pallini[i].controlla();

}

for(i = 0; i < pallini.length; i++ ) {

pallini[i].muovi();

}

// disegniamo il grafico nel tempo e scriviamo tutti i parametri

function disegnaGrafico() {

var colori = ["#0095DD","#ed1c24","#3cb878"];

maxmalati = malati > maxmalati ? malati : maxmalati;

gctx.drawVerticalLine(frame, 0, grafico.height * curati / npallini, colori[2]);

gctx.drawVerticalLine(frame, grafico.height * curati / npallini, grafico.height * sani / npallini, colori[0]);

gctx.drawVerticalLine(frame, grafico.height * (curati+sani) / npallini, grafico.height * malati / npallini, colori[1]);

document.getElementById("info").innerHTML = 'Sani: <span style="color:'+colori[0]+'">'+sani+'</span> • Malati: <span style="color:'+colori[1]+'">'+malati+'</span> • Guariti: <span style="color:'+colori[2]+'">'+curati+'</span> • Picco malati: <span style="color:'+colori[1]+'">'+maxmalati+' ('+Math.round(100*maxmalati/npallini,2)+'% del totale)</span>';

}

disegnaPareti();

disegnaPallini();

muoviPallini();

disegnaGrafico();

// controlliamo se l'animazione prosegue o meno

if( !stop ) idSimulazione = window.requestAnimationFrame(disegna);

console.log("id: " + idSimulazione );

var now = new Date().getTime() / 1000;

// avanziamo di frame

frame++;

}

function init() {

idSimulazione = window.requestAnimationFrame(disegna);

}

init();

}

Infine riporto di seguito l’esempio funzionante, per chiunque lo volesse testare al volo (inserisci i parametri e premi INIZIA):

Popolazione Malati iniziali Fermi T. guarigione

Con un po’ di pazienza e qualche altro accorgimento (per esempio che i pallini non possano essere generati fuori dalle pareti) si può implementare la simulazione per avere anche diverse zone isolate.In questo caso notiamo come una zona isolata aiuti ulteriormente a ridurre il numero di contagiati e mantenere anche parte della popolazione sana, benché nessuno stia fermo.

Per costruire la zona isolata possiamo predisporre le pareti nel modo seguente:

var pareti = [
	[5,5],
	[200,5],
	[200,300],
	[210,300],
	[210,5],
	[795,5],
	[795,595],
	[210,595],
	[210,350],
	[200,350],
	[200,595],
	[5,595]
];

var pareti = [

[5,5],

[200,5],

[200,300],

[210,300],

[210,5],

[795,5],

[795,595],

[210,595],

[210,350],

[200,350],

[200,595],

[5,595]

];

Dobbiamo inoltre prendere qualche altro accorgimento, ma questo lo lascio per chi ha voglia di provarci per conto proprio. 🙂

Vedi articolo

26 Gennaio 2020 2 commenti

[javascript] Realizzare un gioco di carte tipo Memory utilizzando jQuery

Obiettivo: realizzare un semplice gioco di carte tipo Memory, utilizzando JavaScript e il framework jQuery.

Per chi non conoscesse il Memory, il gioco consiste nel cercare di indovinare le coppie di carte uguali. All’inizio possono venir mostrate tutte le carte (se vogliamo dare un’aiuto iniziale) che poi vengono coperte; a quel punto si tirano su due carte per volta per vedere se sono uguali: se lo sono le lasciamo scoperte, altrimenti le ricopriamo e procediamo col sollevare un’altra coppia e così via.

La versione giocabile del gioco, realizzato come illustrato nell’articolo, si trova in fondo all’articolo

Il gioco può essere elaborato in diverse varianti, a fini di questo semplice esercizio prendiamo in considerazione le seguenti regole:

Al primo turno vengono mostrate per un attimo tutte le carte, dopodiché vengono nascoste
Quando il giocatore solleva due carte uguali queste vengono lasciate scoperte e vengono assegnati dei punti
Se le carte non sono uguali le ricopriamo nuovamente
Per ogni coppia di carte scoperte assegniamo dei punti, determinati anche in base allo scorrere del tempo (prima si scoprono e più punti si guadagnano); diamo un punteggio maggiorato se le carte vengono trovate uguali in sequenza
Una volta che tutte le carte sono state scoperte il gioco finisce

Prima di procedere oltre nello sviluppo del programma vediamo di cosa avremo bisogno (e cosa ho utilizzato):

Libreria jQuery
Libreria jQuery Flip
Qualche effetto audio preso da SoundBible (in particolare ho utilizzato il file Blast-SoundBible.com-2068539061.wav)
Delle immagini da usare per le carte (nel mio caso ho usato alcuni giocatori dell’Everton le cui immagini sono state prese dal sito ufficiale dalla pagina del team)
La libreria Bootstrap (opzionale)

Detto questo il risultato che vogliamo ottenere sarà simile a questo qua:

Costruiamo adesso l’idea del programma, che andremo a sviluppare come una singola classe in JavaScript che conterrà tutte le varie funzioni.

Il funzionamento lo potremmo riassumere in questo modo:

Cominciamo quindi costruendo la nostra pagina in HTML che conterrà lo script, per farla utilizziamo il prototipo base di Bootstrap nel modo seguente:

<!doctype html>
<html lang="en">
	<head>
	<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

		<title>Memory Cards</title>
	</head>
	<body>
		
		<div class="everton"></div>

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
		<script src="flip.js"></script>
		<script src="carte.js"></script>
	</body>
</html>

<!doctype html>

<head>

<title>Memory Cards</title>

</head>

<body>

</body>

</html>

Alla riga 15 abbiamo il pezzo di codice che riguarda il contenitore del gioco, nel mio caso un div. Questa parte si ricollega a quella direttamente utilizzata nel javascript, nel file carte.js.

$(document).ready(function(){
	
	var carte = new EvertonMemory({
		contenitore: '.everton'
	});
	
});

$(document).ready(function(){

var carte = new EvertonMemory({

contenitore: '.everton'

});

Affinché la classe funzioni in questo modo dobbiamo far sì che il costruttore accetti per argomento un dizionario e lo utilizzi per parametrizzare le opzioni dell’oggetto. Cominciamo quindi costruendo anche la nostra classe nel modo seguente:

class EvertonMemory {
	
	constructor( impostazioni ) {
		
	}
	
}

class EvertonMemory {

constructor( impostazioni ) {

}

Nel nostro costruttore dichiareremo le impostazioni come una variabile globale this.impostazioni = {}. Faccio notare che, a differenza di altri linguaggi di programmazione, le variabili (eccettuati i casi dei getter e dei setter) non possono essere dichiarate a livello di classe, ma esclusivamente dentro i metodi. Il prefisso this fa sì che la variabile sia globale, sebbene con alcune specifiche eccezioni che vedremo.

Implementiamo ulteriormente la classe nel modo seguente:

class EvertonMemory {
	
	constructor( impostazioni ) {
		
		this.impostazioni = {
			contenitore: '.everton',
		}
		
		this.impostazioni = Object.assign({},this.impostazioni,impostazioni);
		
	}
	
}

class EvertonMemory {

constructor( impostazioni ) {

this.impostazioni = {

contenitore: '.everton',

}

this.impostazioni = Object.assign({},this.impostazioni,impostazioni);

}

Per far sì che le impostazioni dell’utente si sovrappongano alle impostazioni predefinite utilizziamo l’istruzione this.impostazioni = Object.assign({},this.impostazioni,impostazioni). In questo modo uniamo i due dizionari in un nuovo dizionario vuoto e trascriviamo tutto su this.impostazioni. In questo caso è molto importante l’ordine, difatti this.impostazioni viene assegnato prima di impostazioni, dizionario che contiene la parametrizzazione a livello utente. Così le nuove impostazioni andranno a sovrascrivere quelle precedenti, creando il dizionario definitivo delle impostazioni.

Adesso andiamo a creare il metodo di caricamento nella maniera seguente:

class EvertonMemory {
	
	// costruttore ecc...
	
	caricamento() {
		
		this.creazioneStile();
	
		this.contenitore = $(this.impostazioni.contenitore);
		this.contenitore.css("width", this.impostazioni.larghezza);
		this.contenitore.css("height", this.impostazioni.altezza);
		this.contenitore.css("border", this.impostazioni.bordo);
		this.contenitore.css("background-image", 'url("'+this.impostazioni.sfondo+'")');
		this.contenitore.css("position", "relative");
		
		this.creazioneHome();
	
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

caricamento() {

this.creazioneStile();

this.contenitore = $(this.impostazioni.contenitore);

this.contenitore.css("width", this.impostazioni.larghezza);

this.contenitore.css("height", this.impostazioni.altezza);

this.contenitore.css("border", this.impostazioni.bordo);

this.contenitore.css("background-image", 'url("'+this.impostazioni.sfondo+'")');

this.contenitore.css("position", "relative");

this.creazioneHome();

}

// altri metodi a seguire...

}

Qui stiamo utilizzando due metodi che non abbiamo ancora dichiarato, ovvero this.creazioneStile() e this.creazioneHome(). Con this.contenitore = $(this.impostazioni.contenitore); intercettiamo il contenitore predefinito in precedenza e applichiamo, successivamente gli stili di base. Avrei potuto utilizzare anche un file CSS separato per la parametrizzazione degli stili, ma allo scopo di esercizio ho preferito fare tutto tramite JavaScript all’interno della classe stessa.

Delle istruzioni precedenti è molto importante passare l’opzione this.contenitore.css("position", "relative"); che definirà la posizione del contenitore come relativa. In questo modo potremo utilizzare internamente i riferimenti assoluti per posizionare i vari elementi. Senza la dichiarazione di posizione relativa in modo esplicito, gli elementi interni si sarebbero posizionati rispetto al primo oggetto genitore del contenitore che abbia una posizione dichiarata esplicitamente.

Per il metodo this.creazioneStile() procediamo nel modo seguente:

class EvertonMemory {
	
	// costruttore ecc...
	
	creazioneStile() {
		
		var stile = $('<style>'+
		this.impostazioni.contenitore+' .carta{width:22%;height:20.2%;margin:1.5%;float:left;cursor:pointer;}'+
		'</style>');
		
		$('html > head').append(stile);
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creazioneStile() {

var stile = $('<style>'+

this.impostazioni.contenitore+' .carta{width:22%;height:20.2%;margin:1.5%;float:left;cursor:pointer;}'+

'</style>');

$('html > head').append(stile);

}

// altri metodi a seguire...

}

Sostanzialmente creiamo una sezione <style></style> all’interno del codice dentro la quale andremo ad aggiungere tutti gli stili. Per evitare sovrapposizioni esterne al contenitore anteponiamo ad ogni stile il descrittore in CSS del contenitore con this.impostazioni.contenitore. Infine aggiungiamo il gruppo di stile nell’intestazione con l’istruzione $('html > head').append(stile);

Dentro questo metodo procederemo ad aggiungere via via i vari stili di cui abbiamo bisogno.

Per il metodo this.creazioneHome() procediamo aggiungendo la seguente porzione di codice:

class EvertonMemory {
	
	// costruttore ecc...
	
	creazioneHome() {
		
		var questo = this;
		this.contenitore.html('<div class="start" id="start'+questo.impostazioni.idunivoco+'">Inizia</div>');
		
		$('#start'+questo.impostazioni.idunivoco).click(function() {
			questo.contenitore.html('');
			questo.creazioneGioco();
		});
		
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creazioneHome() {

var questo = this;

this.contenitore.html('<div class="start" id="start'+questo.impostazioni.idunivoco+'">Inizia</div>');

$('#start'+questo.impostazioni.idunivoco).click(function() {

questo.contenitore.html('');

questo.creazioneGioco();

});

}

// altri metodi a seguire...

}

In questo metodo andremo a creare this.creazioneGioco() che verrà richiamato al click su START nella schermata di inizio. Quello che mi interessa in particolare durante questo passaggio è l’utilizzo di this. All’interno dell’evento click this si riferisce all’elemento oggetto del click. Di conseguenza non è più utilizzabile per riferirsi agli oggetti della classe. Per poterlo utilizzare dobbiamo riassegnarlo ad una variabile locale nel metodo genitore, come per esempio var questo = this;

In questo modo dentro l’evento di click potremo utilizzare l’istruzione questo.creazioneGioco(); che richiama un metodo della classe medesima (che dobbiamo ancora creare).

Per la creazione del gioco procediamo nel modo seguente:

class EvertonMemory {
	
	// costruttore ecc...
	
	creazioneGioco() {
		
		this.carte = null;
		this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini);
		this.carte.sort(() => Math.random() - 0.5);
		this.cartaattuale = "";
		this.consecutivi = 0;
		this.punteggio = 0;
		this.giocoiniziato = false;
		this.cartetrovate = 0;
		this.max_consecutivi = 0;
		
		this.creazioneMenu();
		this.creazioneTimer();
		
		this.contenitore.append('<div class="combo" id="combo'+this.impostazioni.idunivoco+'"></div>');
		
		$('#combo'+this.impostazioni.idunivoco).hide();
		
		for(var i = 0; i < 16; i++ ) this.creaCarta(i);
		
		this.mostraTutte();
		
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creazioneGioco() {

this.carte = null;

this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini);

this.carte.sort(() => Math.random() - 0.5);

this.cartaattuale = "";

this.consecutivi = 0;

this.punteggio = 0;

this.giocoiniziato = false;

this.cartetrovate = 0;

this.max_consecutivi = 0;

this.creazioneMenu();

this.creazioneTimer();

this.contenitore.append('<div class="combo" id="combo'+this.impostazioni.idunivoco+'"></div>');

$('#combo'+this.impostazioni.idunivoco).hide();

for(var i = 0; i < 16; i++ ) this.creaCarta(i);

this.mostraTutte();

}

// altri metodi a seguire...

}

Siccome il gioco potrà essere creato diverse volte, per esempio quando si riavvia durante la partita, oppure dopo che si è vinto, ci dobbiamo assicurare che tutte le variabili di gioco vengano inizializzate, ed eventualmente reimpostate, qui.

I metodi che mi interessano in particolare sono:

this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini); che ci consente di creare le 16 carte di cui avremo bisogno. Ricordiamoci che le carte sono in coppie quindi le 8 carte iniziali dovranno essere duplicate. Per farlo voglio unire lo stesso dizionario, dentro this.impostazioni.immagini, a se medesimo. Affinché la funzione $.merge non crei un puntatore sul vettore, continuando ad aggiungere le solite immagini ad ogni riavvio successivo e quindi scombinando il gioco, bisogna usare il trucco di chiamare il metodo con un vettore vuoto a cui viene accodato il vettore originale, con l’istruzione $.merge([], this.impostazioni.immagini). Adesso abbiamo creato un vettore completamente nuovo, che potremo poi accodare al solito vettore di prima ripetendo il passaggio una seconda volta. Se non si procede in questo modo al primo riavvio del gioco si rischieranno di avere 3 o 4 carte dello stesso tipo, perché in totale non saranno più 16 ma 32, poi 48 ecc.
this.carte.sort(() => Math.random() - 0.5); che ci permette di ordinare casualmente le carte. Non è un metodo particolarmente efficiente e non produce nemmeno un livello di casualità particolarmente affidabile. Per generare una password non sarebbe quindi molto opportuno, ma per gli scopi che ci servono ai fini del gioco va benissimo, specialmente per la sua brevità di scrittura. Questa scrittura è anche la medesima di this.carte.sort(function(){ return Math.random() - 0.5; });
$('#combo'+this.impostazioni.idunivoco).hide(); che nasconde il contenitore delle combo (poi vedremo meglio)
for(var i = 0; i < 16; i++ ) this.creaCarta(i); che inserisce le carte nell’ordine casuale determinato dal primo punto

Procediamo adesso con la creazione del menu utilizzando this.creazioneMenu();

class EvertonMemory {
	
	// costruttore ecc...
	
	creazioneMenu() {
		
		var questo = this;
		
		this.contenitore.append('<div class="menu">'+
		'Punteggio: <span id="punteggio'+this.impostazioni.idunivoco+'">0</span> &bull; Tempo trascorso: <span id="tempo'+this.impostazioni.idunivoco+'">0:00:00</span><br><span id="restart'+this.impostazioni.idunivoco+'" class="restart">Ricomincia</span>'+
		'</div>');
		
		$('#restart'+this.impostazioni.idunivoco).click(function(){
			questo.contenitore.html('');
			questo.creazioneGioco();
		});
		
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creazioneMenu() {

var questo = this;

this.contenitore.append('<div class="menu">'+

'Punteggio: <span id="punteggio'+this.impostazioni.idunivoco+'">0</span> • Tempo trascorso: <span id="tempo'+this.impostazioni.idunivoco+'">0:00:00</span><br><span id="restart'+this.impostazioni.idunivoco+'" class="restart">Ricomincia</span>'+

'</div>');

$('#restart'+this.impostazioni.idunivoco).click(function(){

questo.contenitore.html('');

questo.creazioneGioco();

});

}

// altri metodi a seguire...

}

Faccio notare che il metodo di “restart” è praticamente identico al metodo che abbiamo visto per lo “start” nella home. Stessa procedura. Nel menu abbiamo aggiunto una voce per il punteggio corrente, una per il tempo trascorso e il tasto che consenta di ricominciare.

La creazione del timer implicherà due diversi passaggi, nella maniera seguente:

class EvertonMemory {
	
	// costruttore ecc...
	
	creazioneTimer() {
		this.inizio = +new Date();
		this.contatoreTimer();
	}
	
	contatoreTimer() {
		var questo = this;
		setTimeout(
		function(){
			var trascorso = +new Date() - questo.inizio;
			var secondi = trascorso / 1000;
			var minuti = secondi / 60;
			var ore = minuti / 60;
			$('#tempo'+questo.impostazioni.idunivoco).text(Math.floor(ore)+":"+(Math.floor(minuti-Math.floor(ore)*60)+"").padStart(2, '0')+":"+(Math.floor(secondi-Math.floor(minuti)*60)+"").padStart(2, '0'));
			if(questo.cartetrovate<8) questo.contatoreTimer();
			else questo.fineGioco();
		}, 500);
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creazioneTimer() {

this.inizio = +new Date();

this.contatoreTimer();

}

contatoreTimer() {

var questo = this;

setTimeout(

function(){

var trascorso = +new Date() - questo.inizio;

var secondi = trascorso / 1000;

var minuti = secondi / 60;

var ore = minuti / 60;

$('#tempo'+questo.impostazioni.idunivoco).text(Math.floor(ore)+":"+(Math.floor(minuti-Math.floor(ore)*60)+"").padStart(2, '0')+":"+(Math.floor(secondi-Math.floor(minuti)*60)+"").padStart(2, '0'));

if(questo.cartetrovate<8) questo.contatoreTimer();

else questo.fineGioco();

}, 500);

}

// altri metodi a seguire...

}

Il metodo contatoreTimer() si richiamerà su se stesso ogni 500 millisecondi su se stessa, aggiornando lo stato del gioco e dichiarando infine la conclusione dello stesso. In tale contesto andremo anche a calcolare il tempo trascorso e ad aggiornarlo nella visualizzazione.

Arriviamo adesso alla parte più importante, quella dove creiamo le carte e definiamo il funzionamento del gioco. Ricordiamoci che ogni carta dovrà essere cliccabile.

class EvertonMemory {
	
	// costruttore ecc...
	
	creaCarta(id) {
		
		var fronte = '<div class="front"></div>';
		var retro = '<div class="back"><div class="titolo">' + this.carte[id].nome + '</div></div>';
		var questo = this;
		this.contenitore.append('<div id="carta'+id+'-'+this.impostazioni.idunivoco+'" class="carta" data-nome="'+this.carte[id].nome+'" data-giocabile="1">'+fronte+retro+'</div>');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-image','url("'+this.impostazioni.immagine_retro_carta+'")');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-size','cover');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-repeat','no-repeat');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-position','center center');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-image','url("'+this.carte[id].img+'")');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-size','cover');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-repeat','no-repeat');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-position','center center');
		$('#carta'+id+'-'+this.impostazioni.idunivoco).flip({
			axis: 'y',
			trigger: 'manual'
		});
		$('#carta'+id+'-'+this.impostazioni.idunivoco).click(function(){
			if( $(this).attr('data-giocabile') == 1 && questo.giocoiniziato ) {
				var carta = $(this).data("flip-model");
				if( carta.isFlipped ) {
					$(this).flip(false);
				} else {
					$(this).flip(true);
				}
				var cartagiocata = $(this).attr('data-nome');
				if( questo.cartaattuale == "" ) {
					questo.cartaattuale = cartagiocata;
					$(this).attr('data-giocabile',0);
				} else {
					if( questo.cartaattuale == cartagiocata ) {
						// giusta
						$('div[data-nome="'+questo.cartaattuale+'"]').attr('data-giocabile',0);
						questo.consecutivi++;
						questo.incrementaPunteggio();
						questo.cartetrovate++;
					} else if( questo.cartaattuale != "" && questo.cartaattuale != cartagiocata ) {
						// sbagliata
						var cartaattuale = questo.cartaattuale;
						setTimeout(
						function(){
							$('div[data-nome="'+cartaattuale+'"]').flip(false);
							$('div[data-nome="'+cartagiocata+'"]').flip(false);
							$('div[data-nome="'+cartaattuale+'"]').attr('data-giocabile',1);
							$('div[data-nome="'+cartagiocata+'"]').attr('data-giocabile',1);
						}, 800);
						questo.consecutivi = 0;
					}
					questo.cartaattuale = "";
				}
			}
		});
		
	}
	
	// altri metodi a seguire...
	
}

class EvertonMemory {

// costruttore ecc...

creaCarta(id) {

var fronte = '<div class="front"></div>';

var retro = '<div class="back"><div class="titolo">' + this.carte[id].nome + '</div></div>';

var questo = this;

this.contenitore.append('<div id="carta'+id+'-'+this.impostazioni.idunivoco+'" class="carta" data-nome="'+this.carte[id].nome+'" data-giocabile="1">'+fronte+retro+'</div>');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-image','url("'+this.impostazioni.immagine_retro_carta+'")');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-size','cover');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-repeat','no-repeat');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-position','center center');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-image','url("'+this.carte[id].img+'")');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-size','cover');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-repeat','no-repeat');

$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-position','center center');

$('#carta'+id+'-'+this.impostazioni.idunivoco).flip({

axis: 'y',

trigger: 'manual'

});

$('#carta'+id+'-'+this.impostazioni.idunivoco).click(function(){

if( $(this).attr('data-giocabile') == 1 && questo.giocoiniziato ) {

var carta = $(this).data("flip-model");

if( carta.isFlipped ) {

$(this).flip(false);

} else {

$(this).flip(true);

}

var cartagiocata = $(this).attr('data-nome');

if( questo.cartaattuale == "" ) {

questo.cartaattuale = cartagiocata;

$(this).attr('data-giocabile',0);

} else {

if( questo.cartaattuale == cartagiocata ) {

// giusta

$('div[data-nome="'+questo.cartaattuale+'"]').attr('data-giocabile',0);

questo.consecutivi++;

questo.incrementaPunteggio();

questo.cartetrovate++;

} else if( questo.cartaattuale != "" && questo.cartaattuale != cartagiocata ) {

// sbagliata

var cartaattuale = questo.cartaattuale;

setTimeout(

function(){

$('div[data-nome="'+cartaattuale+'"]').flip(false);

$('div[data-nome="'+cartagiocata+'"]').flip(false);

$('div[data-nome="'+cartaattuale+'"]').attr('data-giocabile',1);

$('div[data-nome="'+cartagiocata+'"]').attr('data-giocabile',1);

}, 800);

questo.consecutivi = 0;

}

questo.cartaattuale = "";

}

});

}

// altri metodi a seguire...

}

Per gestire la rotazione delle carte stiamo utilizzando jQuery Flip, che ci permette sostanzialmente di ruotare gli elementi sia manualmente che ad ogni click.

Per ogni carta, procedendo in ordine, definiamo quindi le singole proprietà di CSS e attribuiamo la caratteristica flip. Dopodiché al click su ogni carta procediamo con l’impostazione della struttura di gioco. Anzitutto verifichiamo che il gioco sia iniziato e che la carta sia cliccabile. Se la carta è giocabile e non è ancora stata aperta, apriamola con $(this).flip(false). Leggiamo il nome della carta con var cartagiocata = $(this).attr('data-nome'). Se la carta attuale non è ancora stata impostata, allora impostiamola e blocchiamo la carta con $(this).attr('data-giocabile',0). In caso contrario vuol dire che abbiamo già aperto una carta e quindi dobbiamo verificare se il risultato sia corretto o meno. Se la carta attuale è uguale a quella giocata allora vuol dire che è tutto corretto; blocchiamo quindi la carta, aumentiamo il conteggio delle carte aperte consecutivamente con questo.consecutivi++, incrementiamo il punteggio con questo.incrementaPunteggio() e conteggiamo il numero totale di carte aperte (8 coppie trovate equivale alla fine del gioco). Se le carte non sono uguali, allora diamo 800 millisecondi all’utente per poterle vedere entrambe e poi richiudiamole e reimpostiamole giocabili.

Nel suo complesso il codice che avremo creato sarà il seguente (ho incluso alcuni altri commenti specifici nel codice, per spiegare i singoli passaggi):

$(document).ready(function(){
	
	var carte = new EvertonMemory({
		contenitore: '.everton'
	});
	
});

class EvertonMemory {
	
	// costruttore della classe a cui passiamo un dizionario di impostazioni
	constructor( impostazioni ) {
		
		// dizionario di impostazioni predefinite che andremo ad usare successivamente
		this.impostazioni = {
			contenitore: '.everton',
			larghezza: 600,
			altezza: 800,
			bordo: '1px solid #000',
			bordo_carta: '2px solid #000',
			raggio_bordo_carta: '12px',
			immagine_retro_carta: 'img/everton.jpg',
			sfondo: 'img/sfondo.jpg',
			// immagini delle carte sul fronte
			immagini: [
				{nome:"Pickford",img:"img/pickford.jpg"},
				{nome:"Calwert-Lewin",img:"img/calwert-lewin.jpg"},
				{nome:"Digne",img:"img/digne.jpg"},
				{nome:"Gomes",img:"img/gomes.jpg"},
				{nome:"Holgate",img:"img/holgate.jpg"},
				{nome:"Keane",img:"img/keane.jpg"},
				{nome:"Richarlison",img:"img/richarlison.jpg"},
				{nome:"Sigurdsson",img:"img/sigurdsson.jpg"}
			],
			// immagini per le combo
			combo: [
				{url:"img/basic.png"},
				{url:"img/triple.png"},
				{url:"img/dixie.png"},
				{url:"img/great_escape.png"},
				{url:"img/awesome.png"},
				{url:"img/monster.png"},
				{url:"img/pickford.png"}
			],
			// descrizione finale per la vittoria
			finale: [
				{msg:'Maddai! Neanche due carte consecutive!'},
				{msg:'Ne hai beccati al massimo due di seguito, niente di che!'},
				{msg:'Massimo tre di fila? Puoi fare di meglio!'},
				{msg:'Quattro di fila? C\'&egrave; di peggio!'},
				{msg:'Cinque di seguito? Niente male!'},
				{msg:'Sei uno dopo l\'altro? Ti sei allenato proprio!'},
				{msg:'Gi&agrave; che ne hai beccati 7 potevi beccarne 8!'},
				{msg:'Otto in fila! Sbalorditivo!'}
			],
			// numero utilizzato per calcolare il punteggio base
			basepunteggio: 6000000000000,
			// codice univoco da accorpare a tutti gli elementi #ID della classe, in modo da evitare interferenze con altri elementi omonimi non creati dalla classe medesima
			idunivoco: 'p9dk3l1o2ll'
		}
		
		// sovrapponiamo, dove sono dichiarate, le impostazioni dell'utente a quelle predefinite
		this.impostazioni = Object.assign({},this.impostazioni,impostazioni);
		
		// verifichiamo sul mobile
		this.controlloMobile();
		
		// carichiamo il gioco
		this.caricamento();
		
	}
	
	controlloMobile() {
		
		var larghezza = $(window).width();
		var rapporto = this.impostazioni.altezza / this.impostazioni.larghezza;
		if( this.impostazioni.larghezza > larghezza ) {
			this.impostazioni.larghezza = larghezza;
			this.impostazioni.altezza = rapporto * larghezza;
		}
		
	}
	
	// carichiamo il gioco la prima volta
	caricamento() {
		
		this.creazioneStile();
	
		// impostiamo le caratteristiche base del contenitore
		// faccio notare che il contenitore è istanziato in un oggetto globale della classe
		this.contenitore = $(this.impostazioni.contenitore);
		this.contenitore.css("width", this.impostazioni.larghezza);
		this.contenitore.css("height", this.impostazioni.altezza);
		this.contenitore.css("border", this.impostazioni.bordo);
		this.contenitore.css("background-image", 'url("'+this.impostazioni.sfondo+'")');
		this.contenitore.css("position", "relative");
		
		// creiamo la pagina iniziale
		this.creazioneHome();
	
	}
	
	// creiamo la home introduttiva al gioco
	creazioneHome() {
		
		var questo = this;
		// creiamo un pulsante per lo start del gioco
		this.contenitore.html('<div class="start" id="start'+questo.impostazioni.idunivoco+'">Inizia</div>');
		
		// azioni quando si clicca sul pulsante start
		$('#start'+questo.impostazioni.idunivoco).click(function() {
			// puliamo il contenuto del contenitore, rimuovendo il pulsante start stesso
			questo.contenitore.html('');
			// creiamo il gioco
			questo.creazioneGioco();
		});
		
	}
	
	// creazione del gioco
	creazioneGioco() {
		
		// puliamo e creiamo l'elenco delle 16 carte da utilizzare
		this.carte = null;
		this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini);
		// ordiniamo le carte come ci piace di più
		this.carte.sort(() => Math.random() - 0.5);
		this.cartaattuale = "";
		this.consecutivi = 0;
		this.punteggio = 0;
		this.giocoiniziato = false;
		this.cartetrovate = 0;
		// per il commento finale calcoliamo il numero massimo di carte consecutive aperte
		this.max_consecutivi = 0;
		
		// creiamo il menu
		this.creazioneMenu();
		// avviamo il timer
		this.creazioneTimer();
		
		// creiamo lo spazio per le combo
		this.contenitore.append('<div class="combo" id="combo'+this.impostazioni.idunivoco+'"></div>');
		
		// nascondiamo lo spazio delle combo
		$('#combo'+this.impostazioni.idunivoco).hide();
		
		// aggiungiamo le carte
		for(var i = 0; i < 16; i++ ) this.creaCarta(i);
		
		// per un attimo mostriamo tutte le carte
		this.mostraTutte();
		
	}
	
	// mostriamo tutte le carte
	mostraTutte() {
		
		var questo = this;
		
		// entro 500 ms mostriamo tutte le carte
		setTimeout(
		function(){
			$('.carta').flip(true);
			// entro 2000 ms, ovvero 2 secondi, nascondiamo le carte mostrate
			setTimeout(
			function(){
				$('.carta').flip(false);
				// confermiamo l'inizio del gioco
				questo.giocoiniziato = true;
			}, 2000);
		}, 500);
						
	}
	
	// incrementiamo il punteggio
	incrementaPunteggio() {
		
		// calcoliamo il tempo trascorso dalla data iniziale a quella attuale
		// questo valore è in millisecondi
		var trascorso = +new Date() - this.inizio;
		// verifichiamo il numero di elementi consecutivi massimo
		this.max_consecutivi = this.consecutivi > this.max_consecutivi ? this.consecutivi : this.max_consecutivi;
		// incrementiamo il punteggio con una funzione matematica
		this.punteggio += Math.round(this.impostazioni.basepunteggio/Math.pow(trascorso+1,2)*this.consecutivi);
		// aggiorniamo il punteggio
		$('#punteggio'+this.impostazioni.idunivoco).text(this.punteggio.toLocaleString('it-IT'));
		
		// chiamiamo il popup delle combo
		this.comboPopUp();
		
	}
	
	// popup delle combo
	comboPopUp() {
		// se c'è più di un elemento consecutivo, quindi almeno 2 consecutivi aperti, allora mostra una "combo"
		if( this.consecutivi > 1 ) {
			
			var questo = this;
			$('#combo'+this.impostazioni.idunivoco).css('background-image','url("'+this.impostazioni.combo[this.consecutivi-2].url+'")');
			$('#combo'+this.impostazioni.idunivoco).css('background-size','contain');
			$('#combo'+this.impostazioni.idunivoco).css('background-repeat','no-repeat');
			$('#combo'+this.impostazioni.idunivoco).css('background-position','center center');
			$('#combo'+this.impostazioni.idunivoco).css('z-index','9999');
			$('#combo'+this.impostazioni.idunivoco).show();
			$("#combo"+this.impostazioni.idunivoco).animate({height: "128px",width: "400px","margin-top":"-64px","margin-left":"-200px"});
			// all'animazione aggiungiamo un suono
			var obj = document.createElement("audio");
			// prendiamo il file wav
			obj.src = "Blast-SoundBible.com-2068539061.wav"; 
			// riproduciamolo
			obj.play(); 
			// dopo 800ms nascondiamo il popup della combo
			setTimeout(
			function(){
				$('#combo'+questo.impostazioni.idunivoco).hide();
			}, 800);
			
		}
		
	}
	
	// creiamo gli stili
	creazioneStile() {
		var stile = $('<style>'+
		this.impostazioni.contenitore+' .carta{width:22%;height:20.2%;margin:1.5%;float:left;cursor:pointer;}'+
		this.impostazioni.contenitore+' .carta .front{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';}'+
		this.impostazioni.contenitore+' .carta .back{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';position:relative;}'+
		this.impostazioni.contenitore+' .carta .back .titolo{width:100%;color:#fff;text-align:center;position:absolute;bottom:6px;font-size:10px;}'+
		this.impostazioni.contenitore+' .menu{width:100%;height:10.2%;padding-top:8px;text-align:center;}'+
		this.impostazioni.contenitore+' .start{width:200px;height:64px;line-height:64px;background-color:#00319a;color:#fff;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;text-align:center;cursor:pointer;}'+
		this.impostazioni.contenitore+' .start:hover{background-color:#0040c8;}'+
		this.impostazioni.contenitore+' .combo{width:200px;height:64px;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;}'+
		this.impostazioni.contenitore+' .restart{display:inline-block;padding:8px;background-color:#00319a;color:#fff;margin-top:4px;cursor:pointer;}'+
		this.impostazioni.contenitore+' .restart:hover{background-color:#0040c8;}'+
		this.impostazioni.contenitore+' .messaggio-fine{width:400px;height:200px;position:absolute;top:'+this.impostazioni.altezza/4+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-200px;margin-top:-100px;text-align:center;display:table;}'+
		this.impostazioni.contenitore+' .messaggio-fine span{width:100%;}'+
		'</style>')
		$('html > head').append(stile);
	}
	
	// creiamo il menu
	creazioneMenu() {
		
		var questo = this;
		
		this.contenitore.append('<div class="menu">'+
		'Punteggio: <span id="punteggio'+this.impostazioni.idunivoco+'">0</span> &bull; Tempo trascorso: <span id="tempo'+this.impostazioni.idunivoco+'">0:00:00</span><br><span id="restart'+this.impostazioni.idunivoco+'" class="restart">Ricomincia</span>'+
		'</div>');
		
		$('#restart'+this.impostazioni.idunivoco).click(function(){
			questo.contenitore.html('');
			questo.creazioneGioco();
		});
		
	}
	
	// avviamo il timer
	creazioneTimer() {
		this.inizio = +new Date();
		this.contatoreTimer();
	}
	
	// creiamo il timer
	contatoreTimer() {
		var questo = this;
		setTimeout(
		function(){
			var trascorso = +new Date() - questo.inizio;
			var secondi = trascorso / 1000;
			var minuti = secondi / 60;
			var ore = minuti / 60;
			$('#tempo'+questo.impostazioni.idunivoco).text(Math.floor(ore)+":"+(Math.floor(minuti-Math.floor(ore)*60)+"").padStart(2, '0')+":"+(Math.floor(secondi-Math.floor(minuti)*60)+"").padStart(2, '0'));
			if(questo.cartetrovate<8) questo.contatoreTimer();
			else questo.fineGioco();
		}, 500);
	}
	
	// fine del gioco
	fineGioco() {
		
		var questo = this;
		// mostriamo il punteggio e tutti i commenti
		this.contenitore.html('<div class="messaggio-fine"><span><h3>Finito!</h3></span><span>Hai totalizzato</span><span><h4>'+this.punteggio.toLocaleString('it-IT')+'</h4></span><span><h5>punti</h5></span><span>'+this.impostazioni.finale[this.max_consecutivi-1].msg+'</span></div><div class="start" id="rigioca'+questo.impostazioni.idunivoco+'">Rigioca</div>');
		
		$('#rigioca'+questo.impostazioni.idunivoco).click(function() {
			questo.contenitore.html('');
			questo.creazioneGioco();
		});
		
	}
	
	// creiamo le carte
	creaCarta(id) {
		
		var fronte = '<div class="front"></div>';
		var retro = '<div class="back"><div class="titolo">' + this.carte[id].nome + '</div></div>';
		var questo = this;
		this.contenitore.append('<div id="carta'+id+'-'+this.impostazioni.idunivoco+'" class="carta" data-nome="'+this.carte[id].nome+'" data-giocabile="1">'+fronte+retro+'</div>');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-image','url("'+this.impostazioni.immagine_retro_carta+'")');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-size','cover');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-repeat','no-repeat');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-position','center center');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-image','url("'+this.carte[id].img+'")');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-size','cover');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-repeat','no-repeat');
		$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-position','center center');
		$('#carta'+id+'-'+this.impostazioni.idunivoco).flip({
			axis: 'y',
			trigger: 'manual'
		});
		$('#carta'+id+'-'+this.impostazioni.idunivoco).click(function(){
			if( $(this).attr('data-giocabile') == 1 && questo.giocoiniziato ) {
				var carta = $(this).data("flip-model");
				if( carta.isFlipped ) {
					$(this).flip(false);
				} else {
					$(this).flip(true);
				}
				var cartagiocata = $(this).attr('data-nome');
				if( questo.cartaattuale == "" ) {
					questo.cartaattuale = cartagiocata;
					$(this).attr('data-giocabile',0);
				} else {
					if( questo.cartaattuale == cartagiocata ) {
						// giusta
						$('div[data-nome="'+questo.cartaattuale+'"]').attr('data-giocabile',0);
						questo.consecutivi++;
						questo.incrementaPunteggio();
						questo.cartetrovate++;
					} else if( questo.cartaattuale != "" && questo.cartaattuale != cartagiocata ) {
						// sbagliata
						var cartaattuale = questo.cartaattuale;
						setTimeout(
						function(){
							$('div[data-nome="'+cartaattuale+'"]').flip(false);
							$('div[data-nome="'+cartagiocata+'"]').flip(false);
							$('div[data-nome="'+cartaattuale+'"]').attr('data-giocabile',1);
							$('div[data-nome="'+cartagiocata+'"]').attr('data-giocabile',1);
						}, 800);
						questo.consecutivi = 0;
					}
					questo.cartaattuale = "";
				}
			}
		});
		
	}
	
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

$(document).ready(function(){

var carte = new EvertonMemory({

contenitore: '.everton'

});

class EvertonMemory {

// costruttore della classe a cui passiamo un dizionario di impostazioni

constructor( impostazioni ) {

// dizionario di impostazioni predefinite che andremo ad usare successivamente

this.impostazioni = {

contenitore: '.everton',

larghezza: 600,

altezza: 800,

bordo: '1px solid #000',

bordo_carta: '2px solid #000',

raggio_bordo_carta: '12px',

immagine_retro_carta: 'img/everton.jpg',

sfondo: 'img/sfondo.jpg',

// immagini delle carte sul fronte

immagini: [

{nome:"Pickford",img:"img/pickford.jpg"},

{nome:"Calwert-Lewin",img:"img/calwert-lewin.jpg"},

{nome:"Digne",img:"img/digne.jpg"},

{nome:"Gomes",img:"img/gomes.jpg"},

{nome:"Holgate",img:"img/holgate.jpg"},

{nome:"Keane",img:"img/keane.jpg"},

{nome:"Richarlison",img:"img/richarlison.jpg"},

{nome:"Sigurdsson",img:"img/sigurdsson.jpg"}

// immagini per le combo

combo: [

{url:"img/basic.png"},

{url:"img/triple.png"},

{url:"img/dixie.png"},

{url:"img/great_escape.png"},

{url:"img/awesome.png"},

{url:"img/monster.png"},

{url:"img/pickford.png"}

// descrizione finale per la vittoria

finale: [

{msg:'Maddai! Neanche due carte consecutive!'},

{msg:'Ne hai beccati al massimo due di seguito, niente di che!'},

{msg:'Massimo tre di fila? Puoi fare di meglio!'},

{msg:'Quattro di fila? C\'è di peggio!'},

{msg:'Cinque di seguito? Niente male!'},

{msg:'Sei uno dopo l\'altro? Ti sei allenato proprio!'},

{msg:'Già che ne hai beccati 7 potevi beccarne 8!'},

{msg:'Otto in fila! Sbalorditivo!'}

// numero utilizzato per calcolare il punteggio base

basepunteggio: 6000000000000,

// codice univoco da accorpare a tutti gli elementi #ID della classe, in modo da evitare interferenze con altri elementi omonimi non creati dalla classe medesima

idunivoco: 'p9dk3l1o2ll'

}

// sovrapponiamo, dove sono dichiarate, le impostazioni dell'utente a quelle predefinite

this.impostazioni = Object.assign({},this.impostazioni,impostazioni);

// verifichiamo sul mobile

this.controlloMobile();

// carichiamo il gioco

this.caricamento();

}

controlloMobile() {

var larghezza = $(window).width();

var rapporto = this.impostazioni.altezza / this.impostazioni.larghezza;

if( this.impostazioni.larghezza > larghezza ) {

this.impostazioni.larghezza = larghezza;

this.impostazioni.altezza = rapporto * larghezza;

}

// carichiamo il gioco la prima volta

caricamento() {

this.creazioneStile();

// impostiamo le caratteristiche base del contenitore

// faccio notare che il contenitore è istanziato in un oggetto globale della classe

this.contenitore = $(this.impostazioni.contenitore);

this.contenitore.css("width", this.impostazioni.larghezza);

this.contenitore.css("height", this.impostazioni.altezza);

this.contenitore.css("border", this.impostazioni.bordo);

this.contenitore.css("background-image", 'url("'+this.impostazioni.sfondo+'")');

this.contenitore.css("position", "relative");

// creiamo la pagina iniziale

this.creazioneHome();

}

// creiamo la home introduttiva al gioco

creazioneHome() {

var questo = this;

// creiamo un pulsante per lo start del gioco

this.contenitore.html('<div class="start" id="start'+questo.impostazioni.idunivoco+'">Inizia</div>');

// azioni quando si clicca sul pulsante start

$('#start'+questo.impostazioni.idunivoco).click(function() {

// puliamo il contenuto del contenitore, rimuovendo il pulsante start stesso

questo.contenitore.html('');

// creiamo il gioco

questo.creazioneGioco();

});

}

// creazione del gioco

creazioneGioco() {

// puliamo e creiamo l'elenco delle 16 carte da utilizzare

this.carte = null;

this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini);

// ordiniamo le carte come ci piace di più

this.carte.sort(() => Math.random() - 0.5);

this.cartaattuale = "";

this.consecutivi = 0;

this.punteggio = 0;

this.giocoiniziato = false;

this.cartetrovate = 0;

// per il commento finale calcoliamo il numero massimo di carte consecutive aperte

this.max_consecutivi = 0;

// creiamo il menu

this.creazioneMenu();

// avviamo il timer

this.creazioneTimer();

// creiamo lo spazio per le combo

this.contenitore.append('<div class="combo" id="combo'+this.impostazioni.idunivoco+'"></div>');

// nascondiamo lo spazio delle combo

$('#combo'+this.impostazioni.idunivoco).hide();

// aggiungiamo le carte

for(var i = 0; i < 16; i++ ) this.creaCarta(i);

// per un attimo mostriamo tutte le carte

this.mostraTutte();

}

// mostriamo tutte le carte

mostraTutte() {

var questo = this;

// entro 500 ms mostriamo tutte le carte

setTimeout(

function(){

$('.carta').flip(true);

// entro 2000 ms, ovvero 2 secondi, nascondiamo le carte mostrate

setTimeout(

function(){

$('.carta').flip(false);

// confermiamo l'inizio del gioco

questo.giocoiniziato = true;

}, 2000);

}, 500);

}

// incrementiamo il punteggio

incrementaPunteggio() {

// calcoliamo il tempo trascorso dalla data iniziale a quella attuale

// questo valore è in millisecondi

var trascorso = +new Date() - this.inizio;

// verifichiamo il numero di elementi consecutivi massimo

this.max_consecutivi = this.consecutivi > this.max_consecutivi ? this.consecutivi : this.max_consecutivi;

// incrementiamo il punteggio con una funzione matematica

this.punteggio += Math.round(this.impostazioni.basepunteggio/Math.pow(trascorso+1,2)*this.consecutivi);

// aggiorniamo il punteggio

$('#punteggio'+this.impostazioni.idunivoco).text(this.punteggio.toLocaleString('it-IT'));

// chiamiamo il popup delle combo

this.comboPopUp();

}

// popup delle combo

comboPopUp() {

// se c'è più di un elemento consecutivo, quindi almeno 2 consecutivi aperti, allora mostra una "combo"

if( this.consecutivi > 1 ) {

var questo = this;

$('#combo'+this.impostazioni.idunivoco).css('background-image','url("'+this.impostazioni.combo[this.consecutivi-2].url+'")');

$('#combo'+this.impostazioni.idunivoco).css('background-size','contain');

$('#combo'+this.impostazioni.idunivoco).css('background-repeat','no-repeat');

$('#combo'+this.impostazioni.idunivoco).css('background-position','center center');

$('#combo'+this.impostazioni.idunivoco).css('z-index','9999');

$('#combo'+this.impostazioni.idunivoco).show();

$("#combo"+this.impostazioni.idunivoco).animate({height: "128px",width: "400px","margin-top":"-64px","margin-left":"-200px"});

// all'animazione aggiungiamo un suono

var obj = document.createElement("audio");

// prendiamo il file wav

obj.src = "Blast-SoundBible.com-2068539061.wav";

// riproduciamolo

obj.play();

// dopo 800ms nascondiamo il popup della combo

setTimeout(

function(){

$('#combo'+questo.impostazioni.idunivoco).hide();

}, 800);

}

// creiamo gli stili

creazioneStile() {

var stile = $('<style>'+

this.impostazioni.contenitore+' .carta{width:22%;height:20.2%;margin:1.5%;float:left;cursor:pointer;}'+

this.impostazioni.contenitore+' .carta .front{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';}'+

this.impostazioni.contenitore+' .carta .back{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';position:relative;}'+

this.impostazioni.contenitore+' .carta .back .titolo{width:100%;color:#fff;text-align:center;position:absolute;bottom:6px;font-size:10px;}'+

this.impostazioni.contenitore+' .menu{width:100%;height:10.2%;padding-top:8px;text-align:center;}'+

this.impostazioni.contenitore+' .start{width:200px;height:64px;line-height:64px;background-color:#00319a;color:#fff;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;text-align:center;cursor:pointer;}'+

this.impostazioni.contenitore+' .start:hover{background-color:#0040c8;}'+

this.impostazioni.contenitore+' .combo{width:200px;height:64px;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;}'+

this.impostazioni.contenitore+' .restart{display:inline-block;padding:8px;background-color:#00319a;color:#fff;margin-top:4px;cursor:pointer;}'+

this.impostazioni.contenitore+' .restart:hover{background-color:#0040c8;}'+

this.impostazioni.contenitore+' .messaggio-fine{width:400px;height:200px;position:absolute;top:'+this.impostazioni.altezza/4+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-200px;margin-top:-100px;text-align:center;display:table;}'+

this.impostazioni.contenitore+' .messaggio-fine span{width:100%;}'+

'</style>')

$('html > head').append(stile);

}

// creiamo il menu

creazioneMenu() {

var questo = this;

this.contenitore.append('<div class="menu">'+

'</div>');

$('#restart'+this.impostazioni.idunivoco).click(function(){

questo.contenitore.html('');

questo.creazioneGioco();

});

}

// avviamo il timer

creazioneTimer() {

this.inizio = +new Date();

this.contatoreTimer();

}

// creiamo il timer

contatoreTimer() {

var questo = this;

setTimeout(

function(){

var trascorso = +new Date() - questo.inizio;

var secondi = trascorso / 1000;

var minuti = secondi / 60;

var ore = minuti / 60;

$('#tempo'+questo.impostazioni.idunivoco).text(Math.floor(ore)+":"+(Math.floor(minuti-Math.floor(ore)*60)+"").padStart(2, '0')+":"+(Math.floor(secondi-Math.floor(minuti)*60)+"").padStart(2, '0'));

if(questo.cartetrovate<8) questo.contatoreTimer();

else questo.fineGioco();

}, 500);

}

// fine del gioco

fineGioco() {

var questo = this;

// mostriamo il punteggio e tutti i commenti

this.contenitore.html('<div class="messaggio-fine"><span><h3>Finito!</h3></span><span>Hai totalizzato</span><span><h4>'+this.punteggio.toLocaleString('it-IT')+'</h4></span><span><h5>punti</h5></span><span>'+this.impostazioni.finale[this.max_consecutivi-1].msg+'</span></div><div class="start" id="rigioca'+questo.impostazioni.idunivoco+'">Rigioca</div>');

$('#rigioca'+questo.impostazioni.idunivoco).click(function() {

questo.contenitore.html('');

questo.creazioneGioco();

});

}

// creiamo le carte