-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (115 loc) · 7.32 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
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego del ahorcado - Gustavo Torres Navarro</title>
<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=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/celular-horizontal.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/celular-vetical.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
</head>
<body>
<audio loop id="bg-musica">
<source src="media/audio/quazar-city.mp3" type="audio/mp3">
<source src="media/audio/quazar-city.aac" type="audio/aac">
<source src="media/audio/quazar-city.ogg" type="audio/ogg">
</audio>
<div class="contenido-juego" id="contenido-juego">
<p class="mensaje-temporal" id="mensaje-temporal"></p>
<div class="inicio juego " id="inicio">
<img src="media/images/ahorcado-feliz.png" alt="dibujo ahorcado feliz">
<h1>Bienvenidos al Juego del Ahorcado</h1>
<button class='comenzar' id="comenzar">Comenzar</button>
</div>
<div class="tematica juego hiden" id="tematica">
<form id="formulario-listas">
<legend>Elige o agrega una tematica</legend>
<label for="peliculas"><input type="radio" name="lista" id="peliculas" value="peliculas" checked> Peliculas</label>
<label for="vegetales"><input type="radio" name="lista" id="vegetales" value="vegetales"> Vegetales</label>
<label for="animales"><input type="radio" name="lista" id="animales" value="animales"> Animales</label>
<button id="opciones-tematica">Opciones</button>
<button id="nueva-lista">Nueva Lista</button>
<button id="jugar">Jugar</button>
</form>
</div>
<div class="nueva-lista juego hiden" id="creador-lista">
<form action="">
<input type="text" placeholder="Nombre de la lista" id="titulo-nuevo">
<textarea name="" id="palabras-nuevas" placeholder="Agrega palabras separadas por un espacio"></textarea>
<button id="agregar-palabras">Agregar</button>
<textarea name="" id="palabras"></textarea>
<button id="crear-lista">Crear</button>
<button id="volver-tematica-crear">volver a tematica</button>
</form>
</div>
<div class="opciones juego hiden" id="opciones">
<form action="">
<p> Opciones</p>
<fieldset class="colores" id="color-tema">
<legend>Tema</legend>
<label for="color1"><input type="radio" name="tema" id="color1" value="color1"> Verde</label>
<label for="color2"><input type="radio" name="tema" id="color2" value="color2"> Rojo</label>
<label for="color3"><input checked type="radio" name="tema" id="color3" value="color3"> Azul</label>
</fieldset>
<fieldset >
<legend>Sonido</legend>
<label for="">Musica</label>
<input type="range" name="" id="barra-volumen" min="0" max="1" step="0.1">
<label for="mute">Mute <input type="checkbox" name="mute" id="mute"></label>
</fieldset>
<div class="opciones-botones" id="opciones-botones">
<button class="hiden" id="volver-tematica">Volver a tematica</button>
<button class="hiden" id="volver-partida" >Volver a partida</button>
</div>
</form>
</div>
<div class="input-ayuda-div" ><input id="input-ayuda" type="text"></div>
<div class="partida juego hiden " id="partida">
<div class="partida-botones">
<button id="volver-inicio">inicio</button>
<button class="boton-teclado hiden" id="boton-teclado">teclado</button>
<button id="opciones-juego">Opciones</button>
</div>
<div class="contenido-partida">
<div class="letras-correctas" id="letras-correctas"></div>
<div class="letras-usadas-container" id="letras-usadas-container"></div>
<div class="ahorcado-container" id="ahorcado-container">
<canvas class="ahorcado-canvas" id="ahorcado-canvas"></canvas>
<div class="mensaje-resultado hiden" id="mensaje-resultado">
<p class="mensaje-final" id="mensaje-final"></p>
<div class="nueva-partida">
<button id="reiniciar">otra vez</button>
<button id="cambiar-tematica">cambiar tematica</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p class="footer-texto">Diseñado por Metaltor©</p>
<div class="container-link">
<a class="link" target="_blank" href="https://www.linkedin.com/in/gustavotorresnavarro/">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>Linkedin</a>
</div>
<div class="container-link">
<a class="link" target="_blank" href="https://github.com/metaltor">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg> Github</a>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/ahorcado.js"></script>
</body>
</html>