-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (98 loc) · 4.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title> ¡Jump for your life! </title>
<meta name="description"
content="¡Bienvenido a ¡Jump for your life!, el emocionante juego que pondrá a prueba tus habilidades y reflejos! Embarca en una aventura con nuestro carismático atrapafantasmas, superando obstáculos y recolectando objetos especiales en plataformas en movimiento." />
<link rel="icon" href="img/kimi-yip-evil-ghost-norm.gif" type="image/x-icon">
<link rel="stylesheet" href="./css/style.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=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
<div id="start-modal">
<div class="start-modal-content">
<img src="img/kimi-yip-evil-ghost-norm.gif" alt="Evil Ghost" class="game-logo" />
<div class="start-text">
<h1>¡Jump for your life!</h1>
<div class="text">
<p>¿Cuánto podrás sobrevivir?</p>
<p> Consigue sobrevivir saltando sobre las plataformas pero... ¡ten cuidado con los cazafantasmas!</p>
<p> ¡Cuidado con los cazafantasmas! Si te lanzas sobre ellos, no podrás sobrevivir</p>
</div>
<div class="loading-animation"><span> Cargando... </span></div>
<button id="start-button" onclick="Game.start()">
<span class="play-label">¡Jugar Ahora!</span>
</button>
</div>
</div>
</div>
<section class="container">
<figure id="game-screen"></figure>
<div class="details-content">
<h1>¡Bienvenido Jugador!</h1>
<div class="jump-content">
<div class="card selected">
<h3>Record histórico</h3>
<div>
<span id="jump-max-number">0</span>
</div>
</div>
<div class="card">
<h3>Puntuación actual</h3>
<div>
<span id="jump-number">0</span>
</div>
</div>
</div>
<div id="instructions">
<h2>Instrucciones</h2>
<hr>
<p>
Usa las flechas de izquierda, derecha y arriba para moverte. Todos los movimientos suben un nivel
¡Evita caer en el vacío o chocar con el atrapafantasmas! <br><br>
<span class="highlight">Buena suerte</span>
</p>
<div class="controls">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#a975d1" class="bi bi-arrow-up-left-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm8.096 10.803L6 6.707v2.768a.5.5 0 0 1-1 0V5.5a.5.5 0 0 1 .5-.5h3.975a.5.5 0 1 1 0 1H6.707l4.096 4.096a.5.5 0 1 1-.707.707"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#a975d1" class="bi bi-arrow-up-square-fill" viewBox="0 0 16 16">
<path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#a975d1" class="bi bi-arrow-up-right-square-fill" viewBox="0 0 16 16">
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zM5.904 10.803 10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707"/>
</svg>
</div>
</div>
</div>
</section>
<div id="lose-modal">
<div class="modal-content">
<img src="img/kimi-yip-evil-ghost-death.gif" alt="Imagen de pérdida" class="lose-image">
<div class="text-content">
<h2>Perdiste (Saltos exitosos: <span id="jump-number-lose"></span>)</h2>
<p id="loss-reason"></p>
<button class="button" onclick="Game.resetGame()">¡Volver a jugar!</button>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
document.querySelector('.loading-animation').style.display = 'none';
document.getElementById('start-button').style.display = 'block';
}, 1000);
});
</script>
<script src="./js/platform.js"></script>
<script src="./js/background.js"></script>
<script src="./js/player.js"></script>
<script src="./js/game.js"></script>
<script src="./js/index.js"></script>
</body>
</html>