-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (80 loc) · 3.66 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.png">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="logic.js"></script>
<title>Jogo</title>
</head>
<body onload="iniciar()">
<header>
<div class="menu">
<p class="score">Pontuação: <span id="ponto">0</span></p> <div id="ae"></div>
<img src="imgs/botao-mudo.png" class="som_desligado" id="som_desligado" onclick="som_ativo()">
<img src="imgs/img_som.png" class="som_ligado" id="som_ligado" onclick="som_of()">
<audio src="sons/trilha.mp3" loop></audio>
<button class="help" onclick="alterar_display()">Como Jogar</button>
</div>
</header>
<div class="fundo" id="fundo">
<img src="imgs/fundo.jpg" class="fumaça">
</div>
<div class="jogo">
<img src="imgs/mapa_completo.png" class="mapa_jogo" id="mapa_jogo">
<img src="imgs/caminhão.png" id="caminhao" class="c">
<button class="botao_reciclagem" id="botao_reciclagem" onclick="reciclagem()"></button>
<button class="botão_aterro" id="botão_aterro" onclick="aterro()"></button>
<div class="tela_ajuda" id="tela_ajuda">
<button class="voltar" id="voltar" onclick="alterar_display_voltar()">X</button>
<h1 class="title_ajuda">
Ajuda</h1>
<div class="etapas">
<ul>
<li style="margin-left:0.5%">-Clique em "ver caçamba" para ver o tipo de lixo.</li>
<li style="margin-left:0.5%">-Leve os lixos da caçamba para seu local apropriado.</li>
<li style="margin-left:0.5%">-Para deslocar a caçamba basta clicar no aterro ou no centro de reciclagem.</li>
<li style="margin-left:0.5%">-Você pode ativar ou desativar o som clicando no ícone de som.</li>
<li style="margin-left:0.5%">-Cada lixo entregue irá adicionar ou remover 5 pontos.</li>
<li style="margin-left:0.5%">-Chegue a 50 pontos para vencer o jogo!</li>
<li style="margin-left:0.5%"><span style="color: RED">- ATENÇÃO! </span> Se chegar a -30 pontos você perderá o jogo!</li>
<li style="margin-left:0.5%">-Para ver as legendas, basta clicar na seta abaixo</li>
</ul>
</div>
<button class="avançar" id="avançar" onclick="alterar_display_avanço()">→</button>
</div>
<div class="tela_ajuda2" id="tela_ajuda2">
<button class="voltar" id="voltar" onclick="alterar_display_voltar()">X</button>
<h1 style="text-align: center;">Legendas</h1>
<div class="imagens">
<img src="imgs/legenda_aterro.png" width="60vh" height="65vh" class="legenda_aterro">
<img src="imgs/legenda_reciclagem.png" width="60vh" class="legenda_reciclagem">
<img src="imgs/caminhão.png" width="60vh" class="legenda_caminhão">
</div>
<div class="legendas">
<p class="aterro_escrita">Aterro</p>
<p class="reciclagem_escrita">Reciclagem</p>
<p class="caminhão_escrita">Caminhão</p>
</div>
</div>
<button class="botão_caçamba" id="botão_caçamba" onclick="ver_caçamba()">VER CAÇAMBA</button>
<button class="esconder_caçamba" id="esconder_caçamba" onclick="esconder_caçamba()">ESCONDER CAÇAMBA</button>
<div class="div_caçamba" id="div_caçamba">
<h1 id="itens"></h1>
</div>
</div>
<script>
const ligar = document.getElementById('som_desligado')
ligar.addEventListener('click', function(){
const audio = document.querySelector('audio')
audio.play()
})
const desligar = document.getElementById('som_ligado')
desligar.addEventListener('click', function(){
const audio = document.querySelector('audio')
audio.pause()
})
</script>
</body>
</html>