-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
277 lines (232 loc) · 6.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!-- DAG7 - 15/05/2019 -->
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MasterMindJS</title>
</head>
<body>
<style>
body {
background-color: black;
}
p {
background-color: white;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
h1 {
background-color: white;
border:2px solid black;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
div#game {
border:2px solid black;
background-color: violet;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
<script type="text/javascript">
// definisco le variabili
var colors = ["red", "green", "blue", "yellow", "orange", "magenta"];
var sequence = [];
var btns = [];
var tentativi = 7;
</script>
<center>
<h1>Master Mind</h1>
<p>Tentativi rimanenti: <span id = "numTentativi">7</span>
<div id="game">
<script type="text/javascript">
function init() {
// creo tabella 4x4, avente ogni cella un identificativo diverso
tbl = document.createElement("table");
contCelle = 0;
for(i = 0; i < 2; i++) {
row = document.createElement("tr");
for(j = 0; j < 2; j++) {
cell = document.createElement("td");
cell.setAttribute("id", "td" + contCelle); // setto l'id della cella
cell.style.width = "50px";
cell.style.height = "50px";
cell.style.border = "1px solid black";
row.appendChild(cell);
// incremento il contatore delle celle
contCelle = contCelle + 1;
}
tbl.appendChild(row);
}
game.appendChild(tbl);
// creo quattro pulsanti aventi id diversi per l'utente
for(i = 0; i < 4; i++) {
btn = document.createElement("button");
btn.setAttribute("style", "background-color:red");
btn.setAttribute("id", "btn" + i); // setto id bottone
btn.setAttribute("onclick", "cambiaColore(this)");
btn.style.width = "30px";
btn.style.height = "30px";
btn.innerHTML = (i+1);
game.appendChild(btn);
}
// creo il pulsante verifica
var btnVerifica = document.createElement("button");
btnVerifica.setAttribute("onclick", "verifica()");
btnVerifica.setAttribute("id", "btnVerifica")
btnVerifica.innerHTML = "VERIFICA!";
game.appendChild(btnVerifica);
}
</script>
<script type="text/javascript">
// implementa la logica di gioco
function verifica() {
// ---------
// RENDE INAGIBILE LA PARTE GIA' TOCCATA DALL'UTENTE
// ---------
// ciclo di get: prende i bottoni e li inserisce nell'apposito array
for(i = 0; i < 4; i++) {
btns[i] = document.getElementById("btn" + i);
}
// ciclo di disable: disabilita tutti i bottoni per non renderli cliccabili
for(i = 0; i < 4; i++) {
disabilita(btns[i]);
}
// disabilito anche il pulsante verifica
disabilita(document.getElementById("btnVerifica"));
/*
---------
VALUTA SE L'UTENTE HA INDOVINATO I COLORI O NO
---------
*/
/*
definizione di pos, array contenente i numeri.
in base a quelli saranno
successivamente colorate le celle.
*/
var pos = [];
/*
definizione dell'esito
*/
for(i = 0; i < 4; i++) {
// se la sequenza generata randomicamente include il colore dello sfondo
if(sequence.includes(btns[i].style.backgroundColor)) {
// se il colore dello sfondo del bottone corrente e' uguale
// al nome dello sfondo della sequenza
if(btns[i].style.backgroundColor == sequence[i]) {
// posizione corretta
pos[i] = 2;
}
else {
// contenuto ma non in pos corretta
pos[i] = 1;
}
}
else {
// non posseduto
pos[i] = 0;
}
}
// sorting array in ordine decrescente
// (necessario per evitare che l'utente abbia indizi su quale colore abbia preso e in quale posizione)
pos.sort().reverse();
// coloro le celle in base al numero presente nell'array
// l'ordine non deve essere significativo
for(i = 0; i < 4; i++) {
switch(pos[i]) {
// non trovato
case 0:
color = "white";
break;
// trovato ma non in posizione
case 1:
color = "gray";
break;
// trovato e in posizione
case 2:
color = "black";
break;
}
document.getElementById("td" + i).style.backgroundColor = color;
}
// condizioni di vincita : se tutti i numeri nell'array sono uguali
if(pos.every(
function(num){
if(num == 2) {
return true;
}
else{
return false;
}
}
)) {
alert("HAI VINTO! COMPLIMENTI!");
location.reload();
}
else { // bisogna ricaricare la pagina se i tentativi sono terminati
if(tentativi == 0) {
alert("HAI TERMINATO I TENTATIVI! GAME OVER!");
location.reload();
}
else {
// oppure bisogna aggiornare la visualizzazione del contatore
tentativi = tentativi - 1;
document.getElementById("numTentativi").innerHTML = tentativi;
// invalidare gli elementi dandogli un id nullo (questo per non
// fare piu riferimento a loro)
invalidaElementi();
// e reinizializzare tutto il gioco
init();
}
}
}
// genera la sequenza di colori casuali partendo da un array
// di colori casuali
function generaSequenza() {
// pusho i numeri
for(i = 0; i < 4; i++) {
sequence.push(colors[Math.floor(Math.random() * 6)]);
}
}
// rinomina gli id degli elementi "attivi" con valori invalidi
// per perdere ogni riferimento a quegli oggetti
function invalidaElementi() {
for(i = 0; i < 4; i++) {
document.getElementById("td"+i).setAttribute("id", "");
document.getElementById("btn"+i).setAttribute("id", "");
}
document.getElementById("btnVerifica").setAttribute("id", "");
}
// disabilita un bottone
function disabilita(btn) {
btn.disabled = true;
}
// cambia colore dello sfondo di un bottone
function cambiaColore(btn) {
// prendo il colore di sfondo dal bottone e controllo se
// e' nell'array
var indexColore = colors.indexOf(btn.style.backgroundColor);
// se il colore non e' contenuto oppure sono arrivato al colore finale
if(indexColore == -1 || indexColore == colors.length - 1) {
btn.style.backgroundColor = colors[0];
}
else {
// cambia il colore con il colore successivo
btn.style.backgroundColor = colors[(indexColore+1)];
}
}
</script>
<script type="text/javascript">
generaSequenza();
init();
</script>
</center>
</div>
</body>
</html>