23 |
`;
30 | }
31 | }
32 |
33 | const setLevel = level => {
34 | $("#startModal").hide();
35 | pairs = gameLevels[level].pairs;
36 | twoStar = gameLevels[level].twoStar;
37 | oneStar = gameLevels[level].oneStar;
38 | $("#game-board").removeClass("easy medium hard");
39 | $("#game-board").addClass(gameLevels[level].class);
40 | };
41 |
42 | // set size of card array based on level
43 | const trimArray = array => {
44 | let newArray = array.slice();
45 | // trim array as needed
46 | while (newArray.length > pairs) {
47 | let randomIndex = Math.floor(Math.random() * newArray.length);
48 | newArray.splice(randomIndex, 1);
49 | }
50 | return newArray;
51 | };
52 |
53 | const makeCardArray = (data, level) => {
54 | let array = [];
55 |
56 | // Get the correct sized array for level
57 | let trimmedData = trimArray(data, level);
58 |
59 | // Add two of each card to the array
60 | trimmedData.forEach(function(card) {
61 | array.push(new Card(card, 1));
62 | array.push(new Card(card, 2));
63 | });
64 |
65 | return array;
66 | };
67 |
68 | const shuffle = array => {
69 | let currentIndex = array.length,
70 | temporaryValue,
71 | randomIndex;
72 |
73 | while (0 !== currentIndex) {
74 | // Choose an element randomly
75 | randomIndex = Math.floor(Math.random() * currentIndex);
76 | currentIndex -= 1;
77 |
78 | // Switch current element and random element
79 | temporaryValue = array[currentIndex];
80 | array[currentIndex] = array[randomIndex];
81 | array[randomIndex] = temporaryValue;
82 | }
83 |
84 | return array;
85 | };
86 |
87 | const displayCards = cardArray => {
88 | cardArray.forEach(function(card) {
89 | // Add cards to game board
90 | $("#game-board").append(card.html);
91 |
92 | // Add click listeners
93 | $(card.id).click(function() {
94 | // Start timer on first click
95 | if (!gameStarted) {
96 | // start timer!
97 | gameTimer();
98 | gameStarted = true;
99 | }
100 |
101 | // Check for match when clicked
102 | checkMatch(card);
103 | });
104 | });
105 | };
106 |
107 | const checkMatch = card => {
108 | if (!click1.name) {
109 | click1 = card;
110 | $(card.id).addClass("flipped");
111 | return;
112 |
113 | // For second card, check if its a different card
114 | } else if (!click2.name && click1.id !== card.id) {
115 | click2 = card;
116 | $(card.id).addClass("flipped");
117 |
118 | // Update move count
119 | moves++;
120 | $("#moves").text(moves);
121 |
122 | checkStars();
123 | } else return;
124 |
125 | if (click1.name === click2.name) {
126 | foundMatch();
127 | } else {
128 | hideCards();
129 | }
130 | };
131 |
132 | const foundMatch = () => {
133 | matches++;
134 | if (matches === pairs) {
135 | gameOver();
136 | }
137 |
138 | // Unbind click functions and reset click objects
139 | $(click1.id).unbind("click");
140 | $(click2.id).unbind("click");
141 | // reset click objects
142 | click1 = {};
143 | click2 = {};
144 | };
145 |
146 | const hideCards = () => {
147 | //hide cards
148 | setTimeout(function() {
149 | $(click1.id).removeClass("flipped");
150 | $(click2.id).removeClass("flipped");
151 | // reset click objects
152 | click1 = {};
153 | click2 = {};
154 | }, 600);
155 | };
156 |
157 | const gameOver = () => {
158 | clearInterval(timer);
159 |
160 | // Pause before shoe modal
161 | setTimeout(function() {
162 | $("#winModal").show();
163 | }, 500);
164 | };
165 |
166 | const checkStars = () => {
167 | let currentStars;
168 | if (moves >= oneStar) {
169 | currentStars = 1;
170 | } else if (moves >= twoStar) {
171 | currentStars = 2;
172 | } else currentStars = 3;
173 | if (numStars !== currentStars) {
174 | displayStars(currentStars);
175 | }
176 | };
177 |
178 | const gameTimer = () => {
179 | let startTime = new Date().getTime();
180 |
181 | // Update the timer every second
182 | timer = setInterval(function() {
183 | var now = new Date().getTime();
184 |
185 | // Find the time elapsed between now and start
186 | var elapsed = now - startTime;
187 |
188 | // Calculate minutes and seconds
189 | let minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
190 | let seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
191 |
192 | // Add starting 0 if seconds < 10
193 | if (seconds < 10) {
194 | seconds = "0" + seconds;
195 | }
196 |
197 | let currentTime = minutes + ":" + seconds;
198 |
199 | // Update clock on game screen and modal
200 | $(".clock").text(currentTime);
201 | }, 750);
202 | };
203 |
204 | // Add stars to game screen and modal
205 | const displayStars = num => {
206 | const starImage = '
24 | 
25 |
26 |
27 | 
28 |
29 |
28 | 
';
207 | $(".stars").empty();
208 | for (let i = 0; i < num; i++) {
209 | $(".stars").append(starImage);
210 | }
211 | };
212 |
213 | // Open start modal on load
214 | $(window).on("load", function() {
215 | $("#startModal").show();
216 | });
217 |
218 | $("#openModal").click(function() {
219 | $("#winModal").show();
220 | });
221 |
222 | // Close modals when click outside modal
223 | $("#winModal #close-win, #overlay").click(function() {
224 | $("#winModal").hide();
225 | });
226 |
227 | $("#startModal #close-start, #overlay").click(function() {
228 | $("#startModal").hide();
229 | });
230 |
231 | $(".modal").click(function() {
232 | $(".modal").hide();
233 | });
234 |
235 | $(".modal-content").click(function(event) {
236 | event.stopPropagation();
237 | });
238 |
239 | // Level modals
240 | $("#easy-level").click(function() {
241 | startGame(cardData, "easy");
242 | });
243 |
244 | $("#medium-level").click(function() {
245 | startGame(cardData, "medium");
246 | });
247 |
248 | $("#hard-level").click(function() {
249 | startGame(cardData, "hard");
250 | });
251 |
252 | // Restart game
253 | $("#restart").click(function() {
254 | $("#winModal").hide();
255 | $("#startModal").show();
256 | });
257 |
258 | const startGame = (cards, level) => {
259 | // reset game variables
260 | gameStarted = false;
261 | moves = 0;
262 | matches = 0;
263 | setLevel(level);
264 |
265 | // reset HTML
266 | $("#game-board").empty();
267 |
268 | $(".clock").text("0:00");
269 | $("#moves").text("0");
270 | $("#winModal").hide();
271 |
272 | // Get cards and start the game!
273 | let cardArray = makeCardArray(cardData, level);
274 |
275 | shuffle(cardArray);
276 | displayCards(cardArray);
277 | displayStars(3);
278 | };
279 | })();
280 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | background-color: #ff4554;
10 | color: #3c5aa6;
11 | font: 18px/24px Helvetica, Arial, Sans-Serif;
12 | }
13 |
14 | @font-face {
15 | font-weight: normal;
16 | font-style: normal;
17 | font-family: 'Pokemon Solid';
18 | src: url('fonts/Pokemon Solid.eot');
19 | src: local('☺'), url('fonts/Pokemon Solid.woff') format('woff'), url('fonts/Pokemon Solid.ttf') format('truetype'), url('fonts/Pokemon Solid.svg') format('svg');
20 | }
21 |
22 | /* header */
23 | .site-title {
24 | margin: 60px 0 40px;
25 | color: #ffcb05;
26 | text-align: center;
27 | text-shadow: 6px 6px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -3px 1px 0 #000, 3px 2px 0 #000;
28 | letter-spacing: 8px;
29 | font: 100px/100px 'Pokemon Solid', Helvetica, Arial, Sans-Serif;
30 | -webkit-text-stroke: 5px #3c5aa6;
31 | }
32 |
33 | .tag-line {
34 | margin: 20px;
35 | color: #3c5aa6;
36 | text-align: center;
37 | font: italic bold 40px/40px Helvetica, Arial, Sans-Serif;
38 | }
39 |
40 | /* game board and cards */
41 | .board {
42 | display: flex;
43 | margin: auto;
44 | max-width: 1110px;
45 | flex-wrap: wrap;
46 | }
47 |
48 | .easy,
49 | .medium {
50 | width: 740px;
51 | }
52 |
53 | .hard {
54 | max-width: 1110px;
55 | }
56 |
57 | .card {
58 | position: relative;
59 | float: left;
60 | margin: 5px;
61 | width: 175px;
62 | height: 175px;
63 | text-align: center;
64 | }
65 |
66 | .card-back,
67 | .card-front {
68 | position: absolute;
69 | top: 0;
70 | left: 0;
71 | width: 100%;
72 | height: 100%;
73 | -webkit-transition: -webkit-transform 0.3s;
74 | transition: transform 0.3s;
75 | -webkit-backface-visibility: hidden;
76 | backface-visibility: hidden;
77 | }
78 |
79 | .card-front {
80 | border: 10px solid #2a75bb;
81 | background-color: #3c5aa6;
82 | }
83 |
84 | .card-back {
85 | border: 10px solid #2a75bb;
86 | background-color: #fff;
87 | -webkit-transform: rotateY(-180deg);
88 | transform: rotateY(-180deg);
89 | }
90 |
91 | .card-image {
92 | position: absolute;
93 | top: 0;
94 | left: 0;
95 | display: block;
96 | margin: auto;
97 | padding: 5%;
98 | width: 100%;
99 | }
100 |
101 | /* click effect */
102 | .card.flipped .card-front {
103 | -webkit-transform: rotateY(-180deg);
104 | transform: rotateY(-180deg);
105 | }
106 |
107 | .card.flipped .card-back {
108 | -webkit-transform: rotateY(0);
109 | transform: rotateY(0);
110 | }
111 |
112 | /* footer */
113 | footer {
114 | display: flex;
115 | flex-wrap: wrap;
116 | width: 100%;
117 | justify-content: center;
118 | }
119 |
120 | .counter,
121 | .timer,
122 | .rating {
123 | width: 33%;
124 | text-align: center;
125 | }
126 |
127 | .info {
128 | color: #3c5aa6;
129 | letter-spacing: 5px;
130 | font: 32px/1.25 'Pokemon Solid', Helvetica, Arial, Sans-Serif;
131 | }
132 |
133 | .data {
134 | letter-spacing: normal;
135 | font: 700 32px/1.25 Helvetica, Arial, Sans-Serif;
136 | }
137 |
138 | /* modal */
139 | .modal {
140 | display: none;
141 | position: fixed;
142 | z-index: 1;
143 | padding-top: 100px;
144 | left: 0;
145 | top: 0;
146 | width: 100%;
147 | height: 100%;
148 | overflow: auto;
149 | background-color: rgb(0, 0, 0);
150 | background-color: rgba(0, 0, 0, 0.4);
151 | }
152 |
153 | /* modal close Button */
154 | .close {
155 | color: #aaa;
156 | font: bold 24px/24px Helvetica, Arial, Sans-Serif;
157 | width: 100%;
158 | text-align: right;
159 | }
160 |
161 | .close:focus,
162 | .close:hover {
163 | color: #000;
164 | text-decoration: none;
165 | cursor: pointer;
166 | }
167 |
168 | .modal-content {
169 | position: relative;
170 | background-color: #fff;
171 | border: dotted #ff4554 15px;
172 | -webkit-border-radius: 30px;
173 | -moz-border-radius: 30px;
174 | border-radius: 30px;
175 | display: flex;
176 | flex-wrap: wrap;
177 | margin: auto;
178 | padding: 20px;
179 | width: 80%;
180 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
181 | -webkit-animation-name: animatetop;
182 | -webkit-animation-duration: 0.4s;
183 | animation-name: animatetop;
184 | animation-duration: 0.4s
185 | }
186 |
187 | /* Add Animation */
188 | @-webkit-keyframes animatetop {
189 | from {top:-300px; opacity:0}
190 | to {top:0; opacity:1}
191 | }
192 |
193 | @keyframes animatetop {
194 | from {top:-300px; opacity:0}
195 | to {top:0; opacity:1}
196 | }
197 |
198 | .modal-data {
199 | float: left;
200 | text-align: center;
201 | width: 50%;
202 | }
203 |
204 | .play-again {
205 | width: 100%;
206 | }
207 |
208 | .congrats {
209 | font: 40px/60px 'Pokemon Solid', Helvetica, Arial, Sans-Serif;
210 | color: #ffcb05;
211 | margin: 10px;
212 | text-align: center;
213 | text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 2px 0 #000;
214 | letter-spacing: 6px;
215 | -webkit-text-stroke: 2px #3c5aa6;
216 | width: 100%;
217 | }
218 |
219 | .win-text {
220 | font: italic 18px/24px Helvetica, Arial, Sans-Serif;
221 | text-align: center;
222 | }
223 |
224 | button {
225 | background: #ff4554;
226 | border: dotted #3c5aa6 10px;
227 | -webkit-border-radius: 10px;
228 | -moz-border-radius: 10px;
229 | border-radius: 10px;
230 | color: #fff;
231 | display: block;
232 | font: bold 24px/24px Helvetica, Arial, Sans-Serif;
233 | margin: auto;
234 | padding: 10px 20px;
235 | text-decoration: none;
236 | }
237 |
238 | button:hover {
239 | background: #e60012;
240 | text-decoration: none;
241 | }
242 |
243 | .level-button {
244 | width: 150px;
245 | }
246 |
247 | .site-title.start {
248 | margin: 0 0 20px;
249 | }
250 |
251 | .choose {
252 | font: 40px/60px 'Pokemon Solid', Helvetica, Arial, Sans-Serif;
253 | color: #ffcb05;
254 | margin: 10px 0 40px;
255 | text-align: center;
256 | text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 2px 0 #000;
257 | letter-spacing: 6px;
258 | -webkit-text-stroke: 2px #3c5aa6;
259 | width: 100%;
260 | }
261 |
262 | .start {
263 | flex-basis: 100%;
264 | }
265 |
266 | @media (max-width: 1200px) {
267 | .hard .card {
268 | width: 150px;
269 | height: 150px;
270 | }
271 |
272 | .hard {
273 | max-width: 960px;
274 | }
275 | }
276 |
277 | @media (max-width: 1200px) {
278 | .hard .card {
279 | width: 125px;
280 | height: 125px;
281 | }
282 |
283 | .hard {
284 | max-width: 810px;
285 | }
286 | }
287 |
288 | @media (max-width: 880px) {
289 | .hard .card {
290 | width: 100px;
291 | height: 100px;
292 | }
293 |
294 | .hard {
295 | max-width: 660px;
296 | }
297 | }
298 |
299 | @media (max-width: 800px) {
300 | .site-title {
301 | font-size: 75px;
302 | margin: 45px 0 30px;
303 | }
304 |
305 | .tag-line {
306 | font-size: 30px;
307 | margin: 15px;
308 | }
309 |
310 | .info {
311 | font-size: 28px;
312 | }
313 |
314 | .card {
315 | width: 150px;
316 | height: 150px;
317 | }
318 |
319 | .easy,
320 | .medium {
321 | max-width: 640px;
322 | }
323 | }
324 |
325 | @media (max-width: 700px) {
326 | .hard {
327 | max-width: 440px;
328 | }
329 | }
330 |
331 | @media (max-width: 660px) {
332 | .info {
333 | font-size: 24px;
334 | letter-spacing: 3px;
335 | }
336 |
337 | .data {
338 | font-size: 24px;
339 | }
340 |
341 | .card {
342 | width: 125px;
343 | height: 125px;
344 | }
345 |
346 | .easy,
347 | .medium {
348 | max-width: 540px;
349 | }
350 |
351 | .timer {
352 | order: 1;
353 | flex-basis: 50%;
354 | }
355 |
356 | .counter {
357 | order: 2;
358 | flex-basis: 50%;
359 | }
360 |
361 | .rating {
362 | order: 3;
363 | flex-basis: 100%;
364 | }
365 | }
366 |
367 | @media (max-width: 580px) {
368 | .site-title {
369 | font-size: 60px;
370 | margin: 25px 0 10px;
371 | }
372 |
373 | .tag-line {
374 | font-size: 24px;
375 | margin: 15px;
376 | }
377 |
378 | .card {
379 | width: 100px;
380 | height: 100px;
381 | }
382 |
383 | .easy,
384 | .medium {
385 | max-width: 440px;
386 | }
387 | }
388 |
389 | @media (max-width: 500px) {
390 | .site-title {
391 | font-size: 60px;
392 | margin: 25px 0 10px;
393 | }
394 |
395 | .tag-line {
396 | font-size: 24px;
397 | margin: 15px;
398 | }
399 |
400 | .hard .card {
401 | width: 75px;
402 | height: 75px;
403 | }
404 |
405 | .hard {
406 | max-width: 340px;
407 | }
408 | }
409 |
410 | @media (max-width: 450px) {
411 | .site-title {
412 | font-size: 55px;
413 | margin: 25px 0 10px;
414 | }
415 |
416 | .tag-line {
417 | font-size: 18px;
418 | margin: 15px;
419 | }
420 |
421 | .card {
422 | width: 75px;
423 | height: 75px;
424 | }
425 |
426 | .easy,
427 | .medium {
428 | max-width: 340px;
429 | }
430 |
431 | .counter,
432 | .timer {
433 | flex-basis: 100%;
434 | }
435 |
436 | .data,
437 | .info {
438 | font-size: 28px;
439 | }
440 | }
441 |
--------------------------------------------------------------------------------
/css/fonts/Pokemon Solid.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
781 |
--------------------------------------------------------------------------------