-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
221 lines (216 loc) · 11.9 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>My Beloved True Interest <3</title>
<link rel="icon" type="image/png" href="./assets/images/grupo/loguitomelon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="">
<link rel="stylesheet" href="./src/style.css">
<script src="./src/lib/phaser.js"></script>
</head>
<body>
<div id = "logo">
<a href="https://twitter.com/MyBelovedTI">
<img width="500" src="assets/images/logo/logoconsombrapeque.png">
</a>
</div>
<p id = "equipo">
<span style="color: #e7cb9b"> ❤ ♡ ·</span>
By MeronメロンWorks
<span style="color: #e7cb9b"> · ♡ ❤</span>
</p>
<div class="tabs">
<div class="tab-container">
<div id="tab4" class="tab">
<a href="#tab4">❤ ♡ · Redes sociales · ♡ ❤</a>
<div class="tab-content">
<h2 class = "titulo1">¡Nuestras redes sociales!</h2>
<p>
<ul>
<li> ¡Síguenos en nuestro <a href="https://twitter.com/MyBelovedTI" target="_blank">Twitter oficial</a>!</li>
<li> Cuentas de los personajes:
<ul>
<li> <a href="https://twitter.com/camilleure" target="_blank">Camille Durant</a> </li>
<li> <a href="https://twitter.com/lilahaxo" target="_blank">Delilah Medina</a> </li>
<li> <a href="https://twitter.com/mmatthewwttv" target="_blank">Matthew Roberts</a> </li>
<li> <a href="https://twitter.com/RDWhovian" target="_blank">Richard Dickinson</a> </li>
</ul>
</li>
</ul>
</p>
</div>
</div>
<div id="tab3" class="tab">
<a href="#tab3">❤ ♡ · Autores y Créditos · ♡ ❤</a>
<div class="tab-content">
<h2 class = "titulo1">¿Quienes somos?</h2>
<p>
Muy buenas a todos, nosotros somos MeronメロンWorks,
un grupo de estudiantes universitarios del grado de Desarrollo de Videojuegos en la Universidad Complutense de Madrid.
Esperamos que disfruteis de nuestro esfuerzo y que en un futuro disfruteis de nuestras próximas creaciones. Muchas gracias a todos.
<h2 class = "titulo2">Nuestro equipo: </h2>
<ul>
<li> Paula Alemany Rodríguez</li>
<li> David Canelada Velasco</li>
<li> Inés Olimpia Primo López</li>
<li> Cynthia Tristán Álvarez</li>
</ul>
</p>
</div>
</div>
<div id="tab2" class="tab">
<a href="#tab2">❤ ♡ · Descripción · ♡ ❤</a>
<div class="tab-content">
<h2 class = "titulo1">¿Qué es My Beloved True Interest?</h2>
<p>
<ul>
<li>
My Beloved True Interest (MBTI) es un videojuego/novela gráfica en la que encarnarás a un estudiante de universidad.
Te has presentado como mentor para alumnos de intercambio y vas a quedar con todos ellos por primera vez.
Conocerás a Camille, Delilah, Matthew y Richard, entablarás distintas relaciones con ellos y... quien sabe... tal vez
incluso se desarrolle algún romance.
</li>
</ul>
</p>
<h2> Personajes </h2>
<p>
<ul>
<li> Camille Durant:
<ul>
<li>
Joven francesa, reciente presidente del consejo estudiantil además de miembro del club de debate.
Innovadora y carismática, le encanta argumentar y resolver problemas difíciles.
Su mayor defecto es su impaciencia y elitismo.
</li>
<li>
MBTI: <a href="https://www.16personalities.com/es/personalidad-entp"target="_blank">ENTP</a>
</li>
</ul>
</li>
<li> Delilah Medina:
<ul>
<li>
Joven filipina, va más por su cuenta y es bastante tímida pero nunca dudará en ayudar a alguien que lo necesita.
Le cuesta ser dura cuando es ella la que sufre pero no permite que dañen a la gente que quiere.
Su mayor defecto es que no sabe decir que no para contentar a otros.
</li>
<li>
MBTI: <a href="https://www.16personalities.com/es/personalidad-infj"target="_blank">INFJ</a>
</li>
</ul>
</li>
<li> Matthew Roberts:
<ul>
<li>
Joven estadounidense con el gran sueño de convertirse en un popular streamer de videojuegos.
A pesar de sus pocas ganas de estudiar y su necesidad de llamar la atención con su humor,
es una persona amistosa que siempre está dispuesta a pasárselo bien.
</li>
<li>
MBTI: <a href="https://www.16personalities.com/es/personalidad-esfp"target="_blank">ESFP</a>
</li>
</ul>
</li>
<li> Richard Dickinson:
<ul>
<li>
Joven británico con un expediente brillante que planea en aprovechar el intercambio al máximo para aprender.
Puede que parezca frío y distante pero siempre cumplirá sus promesas y buscará la verdad más lógica.
</li>
<li>
MBTI: <a href="https://www.16personalities.com/es/personalidad-istj"target="_blank">ISTJ</a>
</li>
</ul>
</li>
</ul>
</p>
<h2> Estadísticas </h2>
<p>
<ul>
<li>
Cada personaje, como puedes ver, es único y tiene sus propias características. Estas se dividen en:
<ul>
<li> <u>Carisma</u>: Tu presencia y atracción natural.</li>
<li> <u>Amabilidad</u>: Tu empatía y afecto por los demás.</li>
<li> <u>Inteligencia</u>: Tu facultad para razonar y comprender.</li>
<li> <u>Humor</u>: Tu capacidad para hacer reir a la gente.</li>
<li> <u>Suerte</u>: Aquello que sucede más allá de tu control.</li>
</ul>
</li>
<li> Puedes crear tu propio personaje de MBTI
<a href="https://cyntrist.github.io/PVLI-MBTIGenerator/"target="_blank">aquí</a>.</li>
</ul>
</p>
</div>
</div>
<div id="tab1" class="tab">
<a href="#tab1">❤ ♡ · Juego · ♡ ❤</a>
<div class="tab-content">
<div id = "juego">
<script type="module" src="./src/game.js"></script>
</div>
<div>
<h2 class = "titulo2"> Instrucciones </h2>
<p>
<ul>
<li> Diálogos:
<ul>
Para pasar el texto debes hacer click izquierdo en la caja de diálogo, también puedes simplemente pulsar la barra espaciadora.
Si en algún momento pasas sin querer uno no te preocupes, con la flecha hacia arriba o click derecho podrás volver al diálogo anterior,
pero ¡cuidado! solo podrás volver atrás en las zonas seguras: si hay una decisión o acabas de tomar una no podrás volver atrás.
Tambien puedes saltar el diálogo (visto y no visto) rápidamente con el botón control.
<li>
<b>Avanzar</b>: Barra espaciadora / click izquierdo en el cuadro de texto.
</li>
<li>
<b>Retroceder</b>: ↑ / click derecho en el cuadro de texto.
</li>
<li>
<b>Saltar</b>: Control.
</li>
<br>
</ul>
</li>
<li> Interactuar con los personajes:
<ul>
Cuando mantengas conversaciones con los personajes podrás decidir que decirles.
Simplemente elige la opción que te parezca mejor, pero ten cuidado, ya que repercutirá en las relaciones
que tienes con ellos. Si dices algo que les guste saldrá una flechita arriba a la derecha simbolizando que has
subido tu afinidad con el personaje (el color de la flecha varía dependiendo del personaje con el que congenies).
<li>
<b>Elegir opción:</b> Click izquierdo en la opción.
</li>
</ul>
</li>
<br>
<li> Móvil:
<ul>
Selecciona uno de los distintos juegos instalados en tu móvil:
<li><b>MELON FLIP</b>:</li>
Cuando pases por las tuberías sin chocarse se te sumará un punto. ¡Intenta conseguir todos los que puedas! <br>
> <b>Flippear</b>: Barra espaciadora.
<br><br>
<li><b>CIRCUS</b>:</li>
Intenta llegar al final del circuito pasando por los aros a riendas de un león, esquivando los obstáculos en el menor tiempo posible. <br>
> <b>Saltar</b>: ↑. <br>
> <b>Avanzar</b>: →. <br>
</ul>
</li>
<br>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<footer class="container">
<!--- <hr class="footer-divider"> --->
<p class="float-right"><a href="#">Volver al inicio</a></p>
<p>Programacion de Videojuegos en Lenguajes Interpretados. Curso 2023-2024</p>
<p>Grado en Desarrollo de Videojuegos · <a target="_blank" href="http://informatica.ucm.es">Facultad de Informática</a> · <a target="_blank" href="http://www.ucm.es">UCM</a></p>
<p><a target="_blank" href="https://github.com/cyntrist/PVLI-ProjectM">Ir a GitHub</a></p>
</footer>
</body>
</html>