-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscript.js
269 lines (251 loc) · 14.4 KB
/
script.js
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
// other themes to add ?
// bigger memory?
var library = {
pokemon: [
'https://res.cloudinary.com/beumsk/image/upload/v1547980025/memory/Pokemon/Bulbasaur.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980083/memory/Pokemon/Charmander.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980101/memory/Pokemon/Squirtle.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980116/memory/Pokemon/Pikachu.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980129/memory/Pokemon/Mewtwo.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980142/memory/Pokemon/Mew.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980154/memory/Pokemon/Articuno.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980164/memory/Pokemon/Zapdos.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980175/memory/Pokemon/Moltres.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980186/memory/Pokemon/Eevee.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980025/memory/Pokemon/Bulbasaur.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980083/memory/Pokemon/Charmander.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980101/memory/Pokemon/Squirtle.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980116/memory/Pokemon/Pikachu.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980129/memory/Pokemon/Mewtwo.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980142/memory/Pokemon/Mew.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980154/memory/Pokemon/Articuno.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980164/memory/Pokemon/Zapdos.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980175/memory/Pokemon/Moltres.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547980186/memory/Pokemon/Eevee.png'
],
starwars: [
'https://res.cloudinary.com/beumsk/image/upload/v1547980981/memory/starwars/anakin%20skywalker.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981009/memory/starwars/luke%20skywalker.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981022/memory/starwars/Obi%20wann.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981054/memory/starwars/Han%20solo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981074/memory/starwars/chewbacca.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981095/memory/starwars/yoda.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981117/memory/starwars/dark%20sidious.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981141/memory/starwars/dark%20vador.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981165/memory/starwars/padme.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981190/memory/starwars/leia.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547980981/memory/starwars/anakin%20skywalker.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981009/memory/starwars/luke%20skywalker.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981022/memory/starwars/Obi%20wann.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981054/memory/starwars/Han%20solo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981074/memory/starwars/chewbacca.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981095/memory/starwars/yoda.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981117/memory/starwars/dark%20sidious.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981141/memory/starwars/dark%20vador.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981165/memory/starwars/padme.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981190/memory/starwars/leia.jpg'
],
lotr: [
'https://res.cloudinary.com/beumsk/image/upload/v1547981408/memory/lotr/gandalf.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981438/memory/lotr/sauron.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981469/memory/lotr/Aragorn.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981501/memory/lotr/legolas.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981535/memory/lotr/Gimli.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981603/memory/lotr/golum.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981645/memory/lotr/sam.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981686/memory/lotr/saroumane.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981738/memory/lotr/bilbo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981802/memory/lotr/frodo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981408/memory/lotr/gandalf.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981438/memory/lotr/sauron.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981469/memory/lotr/Aragorn.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981501/memory/lotr/legolas.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981535/memory/lotr/Gimli.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981603/memory/lotr/golum.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981645/memory/lotr/sam.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981686/memory/lotr/saroumane.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981738/memory/lotr/bilbo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547981802/memory/lotr/frodo.jpg'
],
disney: [
'https://res.cloudinary.com/beumsk/image/upload/v1547982044/memory/disney/mickey.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982088/memory/disney/mowgli.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982610/memory/disney/tarzan.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982620/memory/disney/simba.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982628/memory/disney/aladin.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982636/memory/disney/blanche%20neige.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982644/memory/disney/alice.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547982653/memory/disney/peter%20pan.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982663/memory/disney/pinocchio.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982738/memory/disney/raiponce.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982044/memory/disney/mickey.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982088/memory/disney/mowgli.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982610/memory/disney/tarzan.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982620/memory/disney/simba.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982628/memory/disney/aladin.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982636/memory/disney/blanche%20neige.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982644/memory/disney/alice.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547982653/memory/disney/peter%20pan.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982663/memory/disney/pinocchio.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982738/memory/disney/raiponce.jpg'
],
pixar: [
'https://res.cloudinary.com/beumsk/image/upload/v1547982971/memory/pixar/up.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982987/memory/pixar/buzz.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983000/memory/pixar/woody.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983016/memory/pixar/Remy.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983032/memory/pixar/Mike.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983077/memory/pixar/Nemo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983114/memory/pixar/wall-e.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547983169/memory/pixar/Mr-Incredible.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983381/memory/pixar/sully.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983403/memory/pixar/flash%20mcqueen.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982971/memory/pixar/up.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547982987/memory/pixar/buzz.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983000/memory/pixar/woody.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983016/memory/pixar/Remy.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983032/memory/pixar/Mike.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983077/memory/pixar/Nemo.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983114/memory/pixar/wall-e.png',
'https://res.cloudinary.com/beumsk/image/upload/v1547983169/memory/pixar/Mr-Incredible.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983381/memory/pixar/sully.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547983403/memory/pixar/flash%20mcqueen.jpg'
],
harrypotter: [
'https://res.cloudinary.com/beumsk/image/upload/v1547998926/memory/harrypotter/harry.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547998958/memory/harrypotter/ron.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547998992/memory/harrypotter/hermione.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999106/memory/harrypotter/dumbledore.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999032/memory/harrypotter/malfoy.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999143/memory/harrypotter/voldemort.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999401/memory/harrypotter/rogue.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999196/memory/harrypotter/hagrid.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999271/memory/harrypotter/sirius.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999577/memory/harrypotter/neville.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547998926/memory/harrypotter/harry.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547998958/memory/harrypotter/ron.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547998992/memory/harrypotter/hermione.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999106/memory/harrypotter/dumbledore.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999032/memory/harrypotter/malfoy.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999143/memory/harrypotter/voldemort.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999401/memory/harrypotter/rogue.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999196/memory/harrypotter/hagrid.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999271/memory/harrypotter/sirius.jpg',
'https://res.cloudinary.com/beumsk/image/upload/v1547999577/memory/harrypotter/neville.jpg'
]
}
var images = [];
var tempElt1 = "";
var tempElt2 = "";
var click = -1;
var win = 0;
var score = 0;
var time = 0;
var preElt = document.querySelector("#pre");
var themesElt = document.querySelector("#themes");
var boxElts = document.getElementsByClassName("box");
var mainElt = document.querySelector(".main");
var timeElt = document.querySelector("#time");
var scoreElt = document.querySelector("#score");
var postElt = document.querySelector("#post");
var finalElt = document.querySelector("#final");
var againElt = document.querySelector("#again");
// initiate the game with chosen theme
themesElt.addEventListener("click", function(e) {
if (e.target.classList.contains("themes")) {
activateTheme(e.target.id);
preElt.classList.add("hidden");
}
});
function activateTheme(theme) {
// insert theme in images array
for (let i = 0; i < 20; i++) {images.push(library[theme][i]);}
// insert images in memory game
for (let i = 0; i < 20; i++) {
var rand = Math.floor(Math.random() * (images.length - 1));
boxElts[i].innerHTML = "<img src='" + images[rand] + "' alt='image' class='hidden'>";
images.splice(rand, 1);
}
}
// Handle the play
mainElt.addEventListener("click", gameLogic);
function gameLogic(e) {
// make sure the box is playable
if (e.target.classList.contains("play")) {
e.target.firstChild.classList.remove("hidden");
// first of two click
if (click < 1) {
tempElt1 = e.target;
// timer
if (click === -1) {
timer = setInterval(function() {
time++;
timeElt.innerHTML = time;
}, 1000);
}
click = 1;
}
// second click
else if (e.target !== tempElt1) {
tempElt2 = e.target;
// different images
if (tempElt1.firstChild.src !== tempElt2.firstChild.src) {
mainElt.removeEventListener("click", gameLogic);
setTimeout( function() {
tempElt1.firstChild.classList.add("hidden");
tempElt2.firstChild.classList.add("hidden");
mainElt.addEventListener("click", gameLogic);
}, 400);
if (score > 0) {
score -= 2;
}
scoreElt.innerHTML = score;
}
// same images
else {
score += 10;
win += 2;
tempElt1.firstChild.classList.add("outlined");
tempElt2.firstChild.classList.add("outlined");
tempElt1.classList.remove("play");
tempElt2.classList.remove("play");
scoreElt.innerHTML = score;
// game won
if (win === 20) {
clearInterval(timer);
finalElt.innerHTML = "You won " + score + " points <br> in " + time + " seconds";
postElt.classList.remove("hidden");
}
}
click = 0;
}
}
}
againElt.addEventListener("click", resetGame);
function resetGame() {
// reset game
tempElt1 = "";
tempElt2 = "";
click = -1;
win = 0;
score = 0;
time = 0;
postElt.classList.add("hidden");
preElt.classList.remove("hidden");
for (let i = 0; i < 20; i++) {
boxElts[i].classList.add("play");
boxElts[i].firstChild.classList.add("hidden");
}
timeElt.textContent = time;
scoreElt.textContent = score;
}
// handle focus of the page
// function checkPageFocus() {
// if (document.hasFocus()) {
// preElt.classList.remove("hidden");
// }
// else {
// preElt.classList.add("hidden");
// }
// }
// var checkPageInterval = setInterval(checkPageFocus, 300);