-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (111 loc) · 18.8 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="src/favicon.ico" type="image/x-icon">
<script src="js/jquery.min.js"></script>
</head>
<body class="game game_backgrounds">
<!-- Main game container -->
<div class="game_parent_container">
<!-- Welcome screen -->
<div id="screen_welcome" class="screen container_centered" >
<div class="helper">
<p class="welcome_text">LET'S PLAY</p>
<svg class="memory_logo" width="100%" height="100%" viewBox="0 0 632 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-403.000000, -403.000000)">
<g id="memory_logo_letters_all" transform="translate(403.000000, 403.000000)">
<g id="shadow" opacity="0.141983696" style="mix-blend-mode: multiply;" transform="translate(0.000000, 24.000000)">
<polygon class="big_letter_shadow" id="Path-Copy" fill="#EE4E7A" points="0 112 24.16 112 24.16 39.36 55.36 86.72 56 86.72 87.52 38.88 87.52 112 112 112 112 0 85.44 0 56 47.36 26.56 0 0 0"></polygon>
<path class="big_letter_shadow" d="M171.714829,115 C146.003802,115 127,96.7741935 127,70.3225806 L127,70 C127,45.3225806 144.406844,25 169.319392,25 C197.904943,25 211,47.4193548 211,71.9354839 C211,73.8709677 210.840304,76.1290323 210.680608,78.3870968 L151.114068,78.3870968 C153.509506,89.516129 161.174905,95.3225806 172.034221,95.3225806 C180.178707,95.3225806 186.087452,92.7419355 192.794677,86.4516129 L206.688213,98.8709677 C198.703422,108.870968 187.205323,115 171.714829,115 Z M150.794677,63.0645161 L187.365019,63.0645161 C185.927757,52.0967742 179.539924,44.6774194 169.319392,44.6774194 C159.258555,44.6774194 152.711027,51.9354839 150.794677,63.0645161 Z" id="Combined-Shape-Copy" fill="#A066AA"></path>
<path class="big_letter_shadow" d="M224,112 L248.342298,112 L248.342298,64.3571429 C248.342298,52.8846154 253.947433,46.989011 263.075795,46.989011 C272.204156,46.989011 277.328851,52.8846154 277.328851,64.3571429 L277.328851,112 L301.671149,112 L301.671149,64.3571429 C301.671149,52.8846154 307.276284,46.989011 316.404645,46.989011 C325.533007,46.989011 330.657702,52.8846154 330.657702,64.3571429 L330.657702,112 L355,112 L355,56.3901099 C355,35.8351648 344.110024,25 326.013447,25 C314.322738,25 305.354523,29.7802198 297.827628,38.543956 C293.343521,29.9395604 284.855746,25 273.645477,25 C261.314181,25 253.947433,31.532967 248.342298,38.7032967 L248.342298,26.5934066 L224,26.5934066 L224,112 Z" id="Path-Copy-2" fill="#4F72B7"></path>
<path class="big_letter_shadow" d="M416.339655,115 C389.722414,115 370,95.1612903 370,70.3225806 L370,70 C370,45.1612903 389.882759,25 416.660345,25 C443.277586,25 463,44.8387097 463,69.6774194 L463,70 C463,94.8387097 443.117241,115 416.339655,115 Z M416.660345,93.8709677 C430.610345,93.8709677 438.948276,83.0645161 438.948276,70.3225806 L438.948276,70 C438.948276,57.2580645 429.808621,46.1290323 416.339655,46.1290323 C402.389655,46.1290323 394.051724,56.9354839 394.051724,69.6774194 L394.051724,70 C394.051724,82.7419355 403.191379,93.8709677 416.660345,93.8709677 Z" id="Combined-Shape-Copy-2" fill="#0B97AC"></path>
<path class="big_letter_shadow" d="M476,112 L500.470588,112 L500.470588,80.463965 C500.470588,60.0770333 510.452012,50.3613861 526.712074,50.3613861 L528,50.3613861 L528,25.0369944 C513.510836,24.3999027 505.4613,32.0450021 500.470588,43.831197 L500.470588,26.6297234 L476,26.6297234 L476,112 Z" id="Path-Copy-3" fill="#00B39A"></path>
<path class="big_letter_shadow" d="M565.387097,139 C580.064516,139 587.16129,132.430615 593.774194,114.965665 L627,27 L601.516129,27 L582.645161,85.4835479 L562.967742,27 L537,27 L570.870968,113.203147 C568.774194,117.529328 566.516129,118.811159 562.322581,118.811159 C559.096774,118.811159 555.064516,117.369099 551.83871,115.446352 L543.612903,133.071531 C549.903226,136.756795 556.516129,139 565.387097,139 Z" id="Path-Copy-4" fill="#6DB981"></path>
</g>
<g id="memory_letters_colour" transform="translate(5.000000, 0.000000)">
<polygon class="big_letter" fill="#EE4E7A" points="0 112 24.16 112 24.16 39.36 55.36 86.72 56 86.72 87.52 38.88 87.52 112 112 112 112 0 85.44 0 56 47.36 26.56 0 0 0"></polygon>
<path class="big_letter" d="M171.714829,115 C146.003802,115 127,96.7741935 127,70.3225806 L127,70 C127,45.3225806 144.406844,25 169.319392,25 C197.904943,25 211,47.4193548 211,71.9354839 C211,73.8709677 210.840304,76.1290323 210.680608,78.3870968 L151.114068,78.3870968 C153.509506,89.516129 161.174905,95.3225806 172.034221,95.3225806 C180.178707,95.3225806 186.087452,92.7419355 192.794677,86.4516129 L206.688213,98.8709677 C198.703422,108.870968 187.205323,115 171.714829,115 Z M150.794677,63.0645161 L187.365019,63.0645161 C185.927757,52.0967742 179.539924,44.6774194 169.319392,44.6774194 C159.258555,44.6774194 152.711027,51.9354839 150.794677,63.0645161 Z" fill="#A066AA"></path>
<path class="big_letter" d="M224,112 L248.342298,112 L248.342298,64.3571429 C248.342298,52.8846154 253.947433,46.989011 263.075795,46.989011 C272.204156,46.989011 277.328851,52.8846154 277.328851,64.3571429 L277.328851,112 L301.671149,112 L301.671149,64.3571429 C301.671149,52.8846154 307.276284,46.989011 316.404645,46.989011 C325.533007,46.989011 330.657702,52.8846154 330.657702,64.3571429 L330.657702,112 L355,112 L355,56.3901099 C355,35.8351648 344.110024,25 326.013447,25 C314.322738,25 305.354523,29.7802198 297.827628,38.543956 C293.343521,29.9395604 284.855746,25 273.645477,25 C261.314181,25 253.947433,31.532967 248.342298,38.7032967 L248.342298,26.5934066 L224,26.5934066 L224,112 Z" fill="#4F72B7"></path>
<path class="big_letter" d="M416.339655,115 C389.722414,115 370,95.1612903 370,70.3225806 L370,70 C370,45.1612903 389.882759,25 416.660345,25 C443.277586,25 463,44.8387097 463,69.6774194 L463,70 C463,94.8387097 443.117241,115 416.339655,115 Z M416.660345,93.8709677 C430.610345,93.8709677 438.948276,83.0645161 438.948276,70.3225806 L438.948276,70 C438.948276,57.2580645 429.808621,46.1290323 416.339655,46.1290323 C402.389655,46.1290323 394.051724,56.9354839 394.051724,69.6774194 L394.051724,70 C394.051724,82.7419355 403.191379,93.8709677 416.660345,93.8709677 Z" fill="#0B97AC"></path>
<path class="big_letter" d="M476,112 L500.470588,112 L500.470588,80.463965 C500.470588,60.0770333 510.452012,50.3613861 526.712074,50.3613861 L528,50.3613861 L528,25.0369944 C513.510836,24.3999027 505.4613,32.0450021 500.470588,43.831197 L500.470588,26.6297234 L476,26.6297234 L476,112 Z" fill="#00B39A"></path>
<path class="big_letter" d="M565.387097,139 C580.064516,139 587.16129,132.430615 593.774194,114.965665 L627,27 L601.516129,27 L582.645161,85.4835479 L562.967742,27 L537,27 L570.870968,113.203147 C568.774194,117.529328 566.516129,118.811159 562.322581,118.811159 C559.096774,118.811159 555.064516,117.369099 551.83871,115.446352 L543.612903,133.071531 C549.903226,136.756795 556.516129,139 565.387097,139 Z" fill="#6DB981"></path>
</g>
</g>
</g>
</g>
</svg>
<p class="welcome_text">CHOOSE THE DIFFICULTY</p>
<ul class="difficulties">
<li class="difficulty_button kid" data-difficulty="kid">1</li>
<li class="difficulty_button expirienced" data-difficulty="expirienced">2</li>
<li class="difficulty_button unicorn" data-difficulty="unicorn">3</li>
</ul>
</div>
</div>
<!-- Gameboard screen -->
<div id="screen_game" class="screen hide">
<div class="container_game_info">
<p id="timer" class="game_info">Time: 0:00:00</p>
<p class="reset_game fa fa-refresh"></p>
<p id="moves" class="game_info">Moves: 0</p>
</div>
<div class="game_child_container">
<ul id="game_board" class="memory_cards_container">
</ul>
</div>
<div class="feedback">
<div class="tip_container">
<p id="tip" class="tip_message"></p>
</div>
<ul class="stars_container_small">
<li class="stars_small fa-star"></li>
<li class="stars_small fa-star"></li>
<li class="stars_small fa-star"></li>
</ul>
</div>
</div>
<!-- Results screen -->
<div id="screen_results" class="screen container_centered container-padded hide">
<ul class="stars_container">
<li class="stars fa-star"></li>
<li class="stars fa-star"></li>
<li class="stars fa-star"></li>
</ul>
<svg width="122%" height="33%" viewBox="0 0 695 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-3" transform="translate(-366.000000, -474.000000)">
<g id="you_won_" transform="translate(366.000000, 474.000000)">
<path class="big_letter" d="M67.0932568,70.0336307 L67.0932568,113 L40.9067432,113 L40.9067432,70.0336307 L0,0 L23.0875179,0 C25.3601261,0 27.1678556,0.529964959 28.5107604,1.58991078 C29.8536653,2.64985659 30.9383029,4.00708393 31.7647059,5.66163349 L47.7245337,38.5456417 C49.0157884,41.1825801 50.2037248,43.6126633 51.2883788,45.8359643 C52.3730327,48.0592653 53.3285468,50.256681 54.1549498,52.4282773 C54.9297026,50.2049763 55.859392,47.9817087 56.9440459,45.7584077 C58.0286998,43.5351067 59.1908116,41.1308754 60.4304161,38.5456417 L76.2352941,5.66163349 C76.5451952,4.98947273 76.9713029,4.31732205 77.5136298,3.64516129 C78.0559568,2.97300053 78.6757497,2.36547972 79.3730273,1.82258065 C80.0703048,1.27968157 80.8708707,0.840198432 81.7747489,0.504118051 C82.6786272,0.16803767 83.6728784,0 84.7575323,0 L108,0 L67.0932568,70.0336307 Z" fill="#6DB981"></path>
<path class="big_letter" d="M140.154717,31 C146.240282,31 151.784252,31.9575832 156.786792,33.8727783 C161.789333,35.7879734 166.082686,38.5313198 169.666981,42.1028999 C173.251276,45.67448 176.036154,50.009485 178.021698,55.1080449 C180.007243,60.2066049 181,65.9391637 181,72.3058934 C181,78.7243851 180.007243,84.5087051 178.021698,89.6590271 C176.036154,94.8093491 173.251276,99.183175 169.666981,102.780636 C166.082686,106.378097 161.789333,109.147324 156.786792,111.0884 C151.784252,113.029476 146.240282,114 140.154717,114 C134.017579,114 128.434931,113.029476 123.406604,111.0884 C118.378277,109.147324 114.046245,106.378097 110.410377,102.780636 C106.77451,99.183175 103.963846,94.8093491 101.978302,89.6590271 C99.9927574,84.5087051 99,78.7243851 99,72.3058934 C99,65.9391637 99.9927574,60.2066049 101.978302,55.1080449 C103.963846,50.009485 106.77451,45.67448 110.410377,42.1028999 C114.046245,38.5313198 118.378277,35.7879734 123.406604,33.8727783 C128.434931,31.9575832 134.017579,31 140.154717,31 Z M140.154717,96.142189 C145.672984,96.142189 149.734264,94.1882016 152.338679,90.2801684 C154.943095,86.3721351 156.245283,80.4325313 156.245283,72.4611787 C156.245283,64.4898261 154.943095,58.5631625 152.338679,54.6810103 C149.734264,50.798858 145.672984,48.857811 140.154717,48.857811 C134.481733,48.857811 130.330202,50.798858 127.7,54.6810103 C125.069798,58.5631625 123.754717,64.4898261 123.754717,72.4611787 C123.754717,80.4325313 125.069798,86.3721351 127.7,90.2801684 C130.330202,94.1882016 134.481733,96.142189 140.154717,96.142189 Z" fill="#00B39A"></path>
<path class="big_letter" d="M218.074468,32 L218.074468,83.2402659 C218.074468,87.2377534 218.980487,90.3266748 220.792553,92.5071225 C222.604619,94.6875703 225.270904,95.7777778 228.791489,95.7777778 C231.431928,95.7777778 233.904066,95.232674 236.207979,94.1424501 C238.511891,93.0522263 240.751053,91.5207443 242.925532,89.5479582 L242.925532,32 L267,32 L267,112.754036 L252.089362,112.754036 C249.08651,112.754036 247.119154,111.404255 246.187234,108.704653 L244.711702,104.032289 C243.158503,105.537836 241.553554,106.900595 239.896809,108.120608 C238.240063,109.34062 236.466853,110.378913 234.577128,111.235518 C232.687402,112.092122 230.65533,112.767012 228.480851,113.260209 C226.306372,113.753405 223.924836,114 221.33617,114 C216.935439,114 213.039556,113.234259 209.648404,111.702754 C206.257253,110.171249 203.39682,108.02977 201.067021,105.278253 C198.737222,102.526735 196.976956,99.28207 195.78617,95.5441595 C194.595384,91.8062491 194,87.7049923 194,83.2402659 L194,32 L218.074468,32 Z" id="letter_u" fill="#0B97AC"></path>
<path class="big_letter" d="M317,0 L339.082941,0 C341.363819,0 343.268842,0.517038984 344.798068,1.55113246 C346.327293,2.58522594 347.325163,3.95537925 347.791706,5.66163349 L363.343073,64.6046671 C363.861454,66.5177401 364.379828,68.560044 364.898209,70.7316404 C365.416591,72.9032367 365.805371,75.1782082 366.064562,77.5566232 C366.582943,75.1265035 367.153154,72.838606 367.775212,70.692862 C368.39727,68.5471181 368.9934,66.5177401 369.563619,64.6046671 L387.914232,5.66163349 C388.380775,4.21390262 389.378645,2.90837919 390.90787,1.74502402 C392.437095,0.581668857 394.290281,0 396.467484,0 L404.243167,0 C406.524045,0 408.40315,0.50411301 409.880537,1.51235415 C411.357924,2.5205953 412.381713,3.90367458 412.951932,5.66163349 L431.147031,64.6046671 C431.717251,66.4143307 432.31338,68.3403009 432.935438,70.3826356 C433.557496,72.4249702 434.101788,74.6094599 434.568332,76.9361702 C434.983037,74.6611646 435.410695,72.4896008 435.85132,70.4214139 C436.291944,68.3532269 436.745521,66.4143307 437.212064,64.6046671 L452.763431,5.66163349 C453.178136,4.16219795 454.163046,2.84374854 455.71819,1.70624571 C457.273335,0.568742883 459.13948,0 461.316682,0 L482,0 L447.009425,113 L423.215834,113 L401.910462,42.9663693 C401.547595,41.8805711 401.171774,40.6913814 400.782988,39.3987646 C400.394202,38.1061477 400.018381,36.7359944 399.655514,35.2882636 C399.292647,36.7359944 398.916826,38.1061477 398.52804,39.3987646 C398.139253,40.6913814 397.763433,41.8805711 397.400566,42.9663693 L375.784166,113 L351.990575,113 L317,0 Z" id="letter_w" fill="#4F72B7"></path>
<path class="big_letter" d="M522.154717,31 C528.240282,31 533.784252,31.9575832 538.786792,33.8727783 C543.789333,35.7879734 548.082686,38.5313198 551.666981,42.1028999 C555.251276,45.67448 558.036154,50.009485 560.021698,55.1080449 C562.007243,60.2066049 563,65.9391637 563,72.3058934 C563,78.7243851 562.007243,84.5087051 560.021698,89.6590271 C558.036154,94.8093491 555.251276,99.183175 551.666981,102.780636 C548.082686,106.378097 543.789333,109.147324 538.786792,111.0884 C533.784252,113.029476 528.240282,114 522.154717,114 C516.017579,114 510.434931,113.029476 505.406604,111.0884 C500.378277,109.147324 496.046245,106.378097 492.410377,102.780636 C488.77451,99.183175 485.963846,94.8093491 483.978302,89.6590271 C481.992757,84.5087051 481,78.7243851 481,72.3058934 C481,65.9391637 481.992757,60.2066049 483.978302,55.1080449 C485.963846,50.009485 488.77451,45.67448 492.410377,42.1028999 C496.046245,38.5313198 500.378277,35.7879734 505.406604,33.8727783 C510.434931,31.9575832 516.017579,31 522.154717,31 Z M522.154717,96.142189 C527.672984,96.142189 531.734264,94.1882016 534.338679,90.2801684 C536.943095,86.3721351 538.245283,80.4325313 538.245283,72.4611787 C538.245283,64.4898261 536.943095,58.5631625 534.338679,54.6810103 C531.734264,50.798858 527.672984,48.857811 522.154717,48.857811 C516.481733,48.857811 512.330202,50.798858 509.7,54.6810103 C507.069798,58.5631625 505.754717,64.4898261 505.754717,72.4611787 C505.754717,80.4325313 507.069798,86.3721351 509.7,90.2801684 C512.330202,94.1882016 516.481733,96.142189 522.154717,96.142189 Z" fill="#A066AA"></path>
<path class="big_letter" d="M576,113 L576,32.2459639 L590.910638,32.2459639 C592.412064,32.2459639 593.667548,32.5834091 594.677128,33.2583096 C595.686707,33.9332101 596.398579,34.9455456 596.812766,36.2953466 L598.210638,40.9677113 C599.763838,39.5140795 601.368786,38.1642987 603.025532,36.9183286 C604.682278,35.6723584 606.455487,34.6210869 608.345213,33.7644824 C610.234939,32.907878 612.279954,32.2329876 614.480319,31.7397911 C616.680685,31.2465946 619.075164,31 621.66383,31 C626.064561,31 629.960444,31.765741 633.351596,33.297246 C636.742747,34.8287509 639.60318,36.9572513 641.932979,39.682811 C644.262778,42.4083707 646.023044,45.6530359 647.21383,49.4169041 C648.404616,53.1807722 649,57.2690504 649,61.6818613 L649,113 L624.925532,113 L624.925532,61.6818613 C624.925532,57.7362892 624.019513,54.6603466 622.207447,52.4539411 C620.395381,50.2475357 617.729096,49.1443495 614.208511,49.1443495 C611.568072,49.1443495 609.08299,49.7154106 606.753191,50.8575499 C604.423393,51.9996892 602.197174,53.5311711 600.074468,55.4520418 L600.074468,113 L576,113 Z" fill="#EE4E7A"></path>
<path class="big_letter" d="M692,0 L692,44.4685836 C692,49.2368006 691.721842,53.9660752 691.165517,58.6565495 C690.609193,63.3470238 689.875867,68.1281262 688.965517,73 L673.034483,73 C672.124133,68.1281262 671.390807,63.3470238 670.834483,58.6565495 C670.278158,53.9660752 670,49.2368006 670,44.4685836 L670,0 L692,0 Z M668,100.5 C668,98.6052537 668.345167,96.8421134 669.035511,95.2105263 C669.725856,93.5789392 670.671869,92.1579008 671.87358,90.9473684 C673.07529,89.7368361 674.49431,88.7763193 676.130682,88.0657895 C677.767054,87.3552596 679.556808,87 681.5,87 C683.392055,87 685.156242,87.3552596 686.792614,88.0657895 C688.428985,88.7763193 689.860789,89.7368361 691.088068,90.9473684 C692.315347,92.1579008 693.274144,93.5789392 693.964489,95.2105263 C694.654833,96.8421134 695,98.6052537 695,100.5 C695,102.394746 694.654833,104.171044 693.964489,105.828947 C693.274144,107.48685 692.315347,108.921047 691.088068,110.131579 C689.860789,111.342111 688.428985,112.28947 686.792614,112.973684 C685.156242,113.657898 683.392055,114 681.5,114 C679.556808,114 677.767054,113.657898 676.130682,112.973684 C674.49431,112.28947 673.07529,111.342111 671.87358,110.131579 C670.671869,108.921047 669.725856,107.48685 669.035511,105.828947 C668.345167,104.171044 668,102.394746 668,100.5 Z" fill="#20D9AF"></path>
</g>
</g>
</g>
</svg>
<p class="winner_text">by matching them all!</p>
<p class="final_result_container"></p>
<div class="play_again_button">play again?</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<p class="copyrights">by e.kagan, be creative</p>
</footer>
<!-- Scripts -->
<script src="js/symbols.js"></script>
<script src="js/memory.js"></script>
<script src="js/game.js"></script>
</body>
</html>