-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (114 loc) · 10.2 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Jogo da memória dos gatinhos</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style-responsivo.css">
<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=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-game">
<!-- Topo -->
<header>
<div class="wrapper">
<div class="box">
<!-- Cronômetro -->
<div class="cronometro">
<h4 class="cronometro-titulo">Tempo: </h4>
<div class="cronometro-numeros">
<span id="minutos">00</span> : <span id="segundos">00</span>
</div>
</div>
<!-- Contador de movimentos -->
<div class="contador">
<div class="contador-item">
<h4 class="contador-titulo">Movimentos</h4>
<div class="contador-numeros">
<span id="mov">00</span>/<span id="mov-total">00</span>
</div>
</div>
</div>
</div>
<!-- Níveis -->
<div class="contador-niveis">
<h4 class="contador-titulo">Nível</h4>
<div class="nivel-text">01</div>
</div>
<button class="pause-audio" title="Play Music"></button>
</div>
</header>
<div class="frases anime-down">
<h3></h3>
</div>
<!-- Game -->
<div id="mesa" class="mesa"></div>
<div class="modal boas-vindas active anime-down">
<div class="box">
<h2>Jogo da memória dos gatinhos</h2>
<h3>Avançe por 3 níveis para encontrar todos os pares</h3>
<img src="imgs/gatinhos-inicio.gif" alt="animação gatinhos">
<button class="start">Começar</button>
</div>
</div>
<div id="nivel" class="modal nivel anime-down">
<div class="box">
<h2>Muito bem! 😃 </h2>
<h3>Você passou para o próximo nível!</h3>
<button id="avancar">Avançar</button>
<button class="reestart">Reiniciar</button>
</div>
</div>
<div id="endGame" class="endGame modal anime-down">
<div class="box">
<h2>Parabéns!</h2>
<h3>Você ganhou 😃🎉</h3>
<img src="imgs/gatinhos-inicio.gif" alt="animação gatinhos">
<button class="reestart">Jogar novamente</button>
</div>
</div>
<div id="gameOver" class="gameOver modal anime-down">
<div class="box">
<h2>Oh não! </h2>
<h3>Acabaram seus movimentos 😭</h3>
<button class="continuar">Continuar</button>
<button class="reestart">Reiniciar</button>
</div>
</div>
<div id="timeOver" class="timeOver modal anime-down">
<div class="box">
<h2>Oh não! </h2>
<h3>Acabou o tempo 😭</h3>
<button class="continuar">Continuar</button>
<button class="reestart">Reiniciar</button>
</div>
</div>
<div class="copy">
<p>Desenvolvido e ilustrado por: Fernanda Mendes</p>
<div class="icons-copy">
<a href="https://fernandamendes.myportfolio.com/" target="_blank"><svg fill="#000000" width="200px" viewBox="-1 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M16.5 9.5a8 8 0 1 1-8-8 8 8 0 0 1 8 8zm-2.97.006a5.03 5.03 0 1 0-5.03 5.03 5.03 5.03 0 0 0 5.03-5.03zm-7.383-.4H4.289a4.237 4.237 0 0 1 2.565-3.498q.1-.042.2-.079a7.702 7.702 0 0 0-.907 3.577zm0 .8a7.7 7.7 0 0 0 .908 3.577q-.102-.037-.201-.079a4.225 4.225 0 0 1-2.565-3.498zm.8-.8a9.04 9.04 0 0 1 .163-1.402 6.164 6.164 0 0 1 .445-1.415c.289-.615.66-1.013.945-1.013.285 0 .656.398.945 1.013a6.18 6.18 0 0 1 .445 1.415 9.078 9.078 0 0 1 .163 1.402zm3.106.8a9.073 9.073 0 0 1-.163 1.402 6.187 6.187 0 0 1-.445 1.415c-.289.616-.66 1.013-.945 1.013-.285 0-.656-.397-.945-1.013a6.172 6.172 0 0 1-.445-1.415 9.036 9.036 0 0 1-.163-1.402zm1.438-3.391a4.211 4.211 0 0 1 1.22 2.591h-1.858a7.698 7.698 0 0 0-.908-3.577q.102.037.201.08a4.208 4.208 0 0 1 1.345.906zm-.638 3.391h1.858a4.238 4.238 0 0 1-2.565 3.498q-.1.043-.2.08a7.697 7.697 0 0 0 .907-3.578z"></path></g></svg></a>
<a href="https://www.linkedin.com/in/fernanda-mendes/" target="_blank"> <svg fill="#000000" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "></path> </g></svg></a>
<a href="https://www.behance.net/fernandamendes" target="_blank"><svg fill="#000000" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M344.1,244.5c-4.9-4.2-11-6.3-18.2-6.3c-7.8,0-13.9,2.2-18.3,6.7c-4.3,4.5-7,10.5-8.2,18.1h52.7 C351.7,254.9,348.9,248.8,344.1,244.5z"></path> <path d="M214.3,266.1c-3.8-1.7-9-2.6-15.8-2.7h-39v42.2H198c6.9,0,12.2-0.9,16-2.8c7-3.5,10.4-10,10.4-19.7 C224.4,274.9,221,269.2,214.3,266.1z"></path> <path d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M291.6,182.3h67.8V202h-67.8 L291.6,182.3L291.6,182.3z M250.7,310.6c-3,4.9-6.7,9.1-11.2,12.4c-5,3.9-11,6.5-17.9,8c-6.9,1.4-14.3,2.1-22.4,2.1H128V174.9h76.5 c19.3,0.3,33,5.9,41,16.9c4.8,6.7,7.2,14.8,7.2,24.2c0,9.6-2.4,17.4-7.3,23.3c-2.7,3.3-6.8,6.3-12.1,9c8.1,3,14.2,7.6,18.3,14 s6.2,14.1,6.2,23.2C257.8,294.7,255.4,303.1,250.7,310.6z M384,283.2h-85.2c0.5,11.7,4.5,20,12.2,24.7c4.7,2.9,10.3,4.4,16.9,4.4 c6.9,0,12.6-1.8,17-5.4c2.4-1.9,4.5-4.6,6.3-8.1h31.2c-0.8,6.9-4.6,14-11.3,21.2c-10.5,11.4-25.1,17.1-44,17.1 c-15.6,0-29.3-4.8-41.2-14.4c-11.9-9.6-17.9-25.2-17.9-46.8c0-20.3,5.4-35.8,16.1-46.6c10.8-10.8,24.7-16.2,41.8-16.2 c10.2,0,19.4,1.8,27.5,5.5c8.2,3.6,14.9,9.4,20.2,17.3c4.8,6.9,7.9,15,9.3,24.2C383.8,265.4,384.1,273.1,384,283.2z"></path> <path d="M214.8,233.3c4.3-2.6,6.4-7.3,6.4-13.9c0-7.4-2.8-12.2-8.5-14.6c-4.9-1.6-11.1-2.5-18.7-2.5h-34.4v34.9H198 C204.9,237.3,210.4,236,214.8,233.3z"></path> </g> </g></svg></a>
<a href="https://github.com/fmdesigner" target="_blank"><svg fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>github</title> <path d="M16 1.375c-8.282 0-14.996 6.714-14.996 14.996 0 6.585 4.245 12.18 10.148 14.195l0.106 0.031c0.75 0.141 1.025-0.322 1.025-0.721 0-0.356-0.012-1.3-0.019-2.549-4.171 0.905-5.051-2.012-5.051-2.012-0.288-0.925-0.878-1.685-1.653-2.184l-0.016-0.009c-1.358-0.93 0.105-0.911 0.105-0.911 0.987 0.139 1.814 0.718 2.289 1.53l0.008 0.015c0.554 0.995 1.6 1.657 2.801 1.657 0.576 0 1.116-0.152 1.582-0.419l-0.016 0.008c0.072-0.791 0.421-1.489 0.949-2.005l0.001-0.001c-3.33-0.375-6.831-1.665-6.831-7.41-0-0.027-0.001-0.058-0.001-0.089 0-1.521 0.587-2.905 1.547-3.938l-0.003 0.004c-0.203-0.542-0.321-1.168-0.321-1.821 0-0.777 0.166-1.516 0.465-2.182l-0.014 0.034s1.256-0.402 4.124 1.537c1.124-0.321 2.415-0.506 3.749-0.506s2.625 0.185 3.849 0.53l-0.1-0.024c2.849-1.939 4.105-1.537 4.105-1.537 0.285 0.642 0.451 1.39 0.451 2.177 0 0.642-0.11 1.258-0.313 1.83l0.012-0.038c0.953 1.032 1.538 2.416 1.538 3.937 0 0.031-0 0.061-0.001 0.091l0-0.005c0 5.761-3.505 7.029-6.842 7.398 0.632 0.647 1.022 1.532 1.022 2.509 0 0.093-0.004 0.186-0.011 0.278l0.001-0.012c0 2.007-0.019 3.619-0.019 4.106 0 0.394 0.262 0.862 1.031 0.712 6.028-2.029 10.292-7.629 10.292-14.226 0-8.272-6.706-14.977-14.977-14.977-0.006 0-0.013 0-0.019 0h0.001z"></path> </g></svg></a>
</div>
</div>
<!-- Audio -->
<audio src="sonidos/bit-symphony-roljui.mp3" class="sonido" id="musica-fundo" preload="auto"></audio>
<audio src="sonidos/acierto.mp3" class="sonido" id="sonido-acierto" preload="auto"></audio>
<audio src="sonidos/error.mp3" class="sonido" id="sonido-error" preload="auto"></audio>
<audio src="sonidos/carta.mp3" class="sonido" id="sonido-carta" preload="auto"></audio>
</div>
<script src="js/musica.js"></script>
<script src="js/variaveis.js"></script>
<script src="js/embaralhar-e-repartir.js"></script>
<script src="js/descobrir-e-comparar.js"></script>
<script src="js/acerto-e-erro.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/sobe-nivel.js"></script>
<script src="js/finalizar.js"></script>
<script src="js/iniciar.js"></script>
</body>
</html>