This repository has been archived by the owner on Nov 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·327 lines (285 loc) · 14.8 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.jqpuzzle.min.js"></script>
<script src="EliotStory.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta lang="fr" xml:lang="fr" content="text/html;charset=UTF-8" http-equiv="Content-Type">
<title>Mr.Robot | jQuery Game</title>
<link rel="icon" type="image/png" href="img/favicon.png" />
<!-- 32×32 -->
</head>
<body>
<img src="img/sound-mute.svg" alt="sound muted" id="soundAction">
<div id="EliotInfos">
<div class="ModifyInfos">
<span>-10%</span>
<span>+10%</span>
<span>+20%</span>
<span>+30%</span>
</div>
<div class="StressLevel">
Stress : <span class="StressValue">0</span>%
</div>
<div class="MorphinePilules">
Pilules x <span class="PilulesValue">3</span>
</div>
</div>
<div class="filter">
<div class="section" id="intro">
<h1>Where is Darlene</h1>
<p class="intro-desc">Un jeu imaginé par <a href="https://twitter.com/xmaireG?" target="_blank">Gautier Maire</a> et <a href="https://twitter.com/HMoncenis" target="_blank">Hubert Moncenis</a></p>
<button go="start">$_Voir</button>
</div>
<div class="section" id="start">
<p>Vous incarnez le personnage d'Elliot, personnage principal de la série
<a href="http://www.allocine.fr/series/ficheserie_gen_cserie=17966.html"
target="_blank">Mr.Robot.</a>
Le but de ce jeu est de faire les bon choix en fonction des situations.
</p>
<p>Elliot dispose d'un niveau de stress, si celui-ci dépasse 90%,
il ne pourra plus se contrôler, et la partie sera perdue.
</p>
<p>Remarquez qu'un nombre de pillules est à votre disposition. Elles contiennent
de la morphine vous permettant de faire baisser son taux
de stress. Mais attention à les utiliser au bon moment.
</p>
<button go="ReveilBrutal">$_Commencer</button>
</div>
<div class="section" id="ReveilBrutal" action="start">
<p>Elliot ouvre les yeux...<br>
"Quel jour est-il ? Où suis-je ? Ma tête me fait trop mal, je ne peux pas
rester comme çà, je dois agir. Aller, çà va aller..."
</p>
<div class="infos_begin">
<h2>Pensez à cliquer sur les pilules afin de faire baisser le taux de stress ! Disposant d'un nombre limité, managez votre stess de manière intelligente, bon jeu !</h2>
<button>$_JaiCompris</button>
</div>
<button go="MDPOubli" desc="RBTelephone" impact="add10S">$_PrendreTelephone</button>
<button go="ReveilEtrange" desc="RBSommeil" impact="add20S">$_Redormir</button>
</div>
<div class="section" id="MDPOubli">
<div class="RBTelephone">
<p>Elliot allume son téléphone. Darlene a essayé de l'appeler plus de 10 fois. Il essaie de la rappeler, en vain,
elle ne répond pas. Quelque chose de grave est peut-être en train de se produire. Eliot se dirige vers son ordinateur,
mais il se rend compte qu'il ne se rappelle pas de son mot de passe.
</p>
</div>
<div class="RBMorphine">
<p>Elliot s'approche de sa boîte de pillules, en prend une, et l'avale.<br>
"Plus que 2, je dois faire attention, j'en ai besoin...". <br>
Un clignottement inhabituel provient de son ordinateur. Il décide de voir ce qu'il se passe, mais
se rend compte qu'il a oublié son mot de passe.
</p>
</div>
<button go="ChercherMDP" desc="MDPOConnexionServer" impact="add20S">$_ChercherMotDePasse</button>
</div>
<div class="section" id="ChercherMDP" action="findMDP">
<p>Il ne se souvient de rien... Étant quelqu’un de méfiant, il se dit qu’il a du
le crypter. Il recherche dans son appartement des éléments qui lui permettraient de s'en rappeler.
Pourquoi ne pas l'aider ?
<span>Indice : Le mot de passe est une référence lié à <a href="http://www.films-regarder.org/load/origin2_mr_robot/mr_robot_saison_1_episode_1/321-1-0-4894" target="_blank">l'épisode 1</a></span>
</p>
<p>Une aide est disponible <span class="helpMDP">ici</span>, mais elle vous coûtera une pilule</p>
<div class="listMDP">
<h3>Le mot de passe est l'une de ces propositions :</h3>
<p>qwerty</p>
<p>azerty</p>
<p>leavemehere</p>
<p>fsociety</p>
<p>allsafe</p>
<p>mrrobot</p>
<p>darlene</p>
<p>romero</p>
</div>
<h3 class="NoHelp">Vous n'avez plus assez de pilules pour obtenir de l'aide</h3>
<form>
<label for="FindMDP"></label>
<input type="text" name="FindMPD" value="" id="findMDPInput" autocomplete="off">
<input type="submit" name="" value="$_Envoyer" id="sendMDP">
</form>
<button go="DarkArmyInfiltration">$_SuivreAdresse</button>
</div>
<div class="section" id="ReveilEtrange">
<div class="RBSommeil">
<p>Très faible, Elliot parvient à se rendomir. Il est réveillé quelques heures plus tard par des coups violents contre sa porte d'entrée. Inquiet,
il hurle à l'agresseur de partir et de le laisser tranquille. Soudain, les bruits cessent et le silence s'installe.
Elliot se jette sur la porte et l'ouvre : Personne. Il remarque au sol une photo. L'image représente une photo de sa famille,
il remarque que le visage de sa soeur est recouvert de sang. Il doit agir vite...
</p>
</div>
<div class="MDPOMorphine">
<p>La dose de Morphine est trop forte. Très faible, Elliot s'endort et ne contrôle plus rien.
Il est réveillé quelques heures plus tard par des coups violents contre sa porte d'entrée. Inquiet,
il hurle à l'agresseur de partir et de le laisser tranquille. Soudain, les bruits cessent et le silence s'installe.
Elliot se jette sur la porte et l'ouvre : Personne. Il remarque au sol une photo. L'image représente une photo de famille,
il remarque que le visage de sa soeur est recouvert de sang. Il doit agir vite...
</p>
</div>
<button go="DarkArmyInfiltration" desc="REConnexionServer" impact="add20S">$_ConnexionServeurFSociety</button>
<button go="4x4Surveillance" desc="REQuitterAppartement" impact="add20S">$_QuitterAppartement</button>
</div>
<div class="section" id="DarkArmyInfiltration">
<div class="REConnexionServer">
<p>En se connectant au serveur FSociety,il se rend compte qu'il a été hacké par la DarkArmy.
"Comment la DarkArmy a-t-elle pu intégrer notre serveur ? Qu'ont-ils pu voir ? Y a-t-il un lien avec la
disparition de Darlene ?"
Un message est en attente...
</p>
</div>
<button go="MessageDA" impact="add20S">$_LireMessage</button>
<button go="4x4Surveillance" impact="add20S">$_QuitterAppartement</button>
</div>
<div class="section" id="MessageDA" action="puzzleDA">
<p>Le message nécessite de devoir résoudre une énigme pour pouvoir être lu.
Recomposez l'image pour accèder au contenu. Clicker sur les carrés pour les faire bouger.
</p>
<!-- Mettre le puzzle ici -->
<img src="img/imgPuzzleMessageDA.jpg" class="imgPuzzleMessageDA" alt="Première énigme avec un puzzle. Pour lire le message de la Dark Army">
<button class="skipPuzzleMessageAndLoose" go="GameOver">Passer</button>
<button class="skipPuzzleMessageAndWin" impact="add20S" go="SaveDarlene">Contourner</button>
<h2>92 E. 82nd St., New York, NYC, 10028.</h2>
<button go="SaveDarlene">$_SuivreAdresse</button>
<button go="4x4Surveillance" impact="add20S">$_QuitterAppartement</button>
</div>
<div class="section" id="4x4Surveillance">
<p>En arrivant devant son immeuble, Elliot remarque qu’un 4x4 noir est garé devant chez lui. Il a un mauvais pressentiment.
Il doit partir, vite. Il doit définir sa destination, où va-t-il chercher Darlene ?
Il arrête le premier taxi qui passe.
</p>
<button go="FSociety" impact="add10S">$_HangarFSociety</button>
<button go="AppartDarlene" impact="add20S">$_ChezDarlene</button>
</div>
<div class="section" id="FSociety">
<p>Il se rend à l’entrepôt où il se réunit avec les membres de FSociety.
Une fois sur place, il n’y a personne. Que faire ?
</p>
<button go="PapierAdresse">$_ChercherDansLieu</button>
<button go="ConnexionPCFSociety" impact="add10S">$_SeConnecterPC</button>
</div>
<div class="section" id="ConnexionPCFSociety">
<p>En essayant de se connecter au réseau, il remarque que l’ordinateur a lui aussi été piraté,
et qu’il n’est pas possible de l’utiliser.
</p>
<button go="PapierAdresse">$_ChercherDansLieu</button>
</div>
<div class="section" id="PapierAdresse">
<p>Elliot découvre une lettre cachée à l’intérieur de la machine à pop-corn.
Il l’ouvre et découvre une adresse. A-t-elle un lien avec la disparition de Darlene ?
</p>
<h2>92 E. 82nd St., New York, NYC, 10028.</h2>
<button go="SaveDarlene">$_SuivreAdresse</button>
<button go="GameOver">$_IgnorerAdresse</button>
</div>
<div class="section" id="AppartDarlene" impact="add20S">
<p>En arrivant à l'appartement de Darlene, Elliot remarque que celui-ci a été visité. Il cherche des indices quand soudain, un portable sonne.
Il s'agit du portable de Darlene, un message est en attente...
</p>
<button go="RepondreMessagePortableDarlene" impact="add10S">$_OuvrirMessage</button>
<button go="GameOver">$_IgnorerMessage</button>
</div>
<div class="section" id="RepondreMessagePortableDarlene" action="puzzleAppartDarlene">
<p>Le message nécessite de devoir résoudre une énigme pour pouvoir être lu.
Recomposez l'image pour accèder au contenu. Clicker sur les carrés pour les faire bouger.
</p>
<!-- Mettre le puzzle ici -->
<img src="img/imgpuzzleportabledarlene.png" alt="Seconde énigme avec puzzle. Pour lire le message de la Dark Army" class="imgPuzzlePortableDarlene">
<button class="skipPuzzleMessageAndLoose" go="GameOver">Passer</button>
<button class="skipPuzzleMessageAndWin" impact="add20S" go="SaveDarlene">Contourner</button>
<h2>92 E. 82nd St., New York, NYC, 10028.</h2>
<button go="SaveDarlene" impact="add20S">$_SuivreAdresse</button>
<button go="GameOver">$_IgnorerAdresse</button>
</div>
<div class="section" id="SaveDarlene">
<p>Elliot arrive à l'adresse, c'est un hangar. À l'intérieur,
il découvre un pc au centre de la pièce. Un écran est suspendu au dessus de lui. On voit
sa soeur ligotée. Il a peu de temps pour la sauver.
</p>
<button go="SuivreEnigme">$_ParticiperEpreuve</button>
<button go="ContournerEnigme" impact="add20S">$_ContournerEpreuve</button>
</div>
<div class="section" id="SuivreEnigme" action="enigmeSortableEasy">
<p>L'écran de l'ordinateur écrit :
"Remettez dans l'ordre cette fonction, et vous pourrez sauver Darlene..."
</p>
<!-- Mettre le plugin sortable ici -->
<div class="SDSEnigme">
<ul>
<li id="1">function saveDarlene(){</li>
<li id="4"> console.log(message[i]);</li>
<li id="7">saveDarlene();</li>
<li id="3"> for(var i = 0; i < 8; i++){</li>
<li id="5"> }</li>
<li id="2">var message = ['J','O','I','N','_','U','S'];</li>
<li id="6">}</li>
</ul>
</div>
<button go="FinalSave">$_SauverDarlene</button>
</div>
<div class="section" id="ContournerEnigme" action="enigmeSortableHard">
<p>En contournant l'enigme de DarkArmy, vous avez déclenché une seconde enigme. Celle-ci est plus complexe et
votre temps est moindre. Bonne chance !
</p>
<!-- Mettre le plugin sortable ici -->
<div class="SDCEnigme">
<ul>
<li id="4">console.log("Le poisson rouge d'Elliot s'appelle : "<br> + result[i]);</li>
<li id="5">}</li>
<li id="2">var result = ["QWERTY","404ERROR",<br>"42","AZERTY","HELLOWORLD"];</li>
<li id="1">var i;</li>
<li id="3">for(i = 0; i < result.length; i++) {</li>
</ul>
<p>Temps restant : <span class="decompteHardValue"></span></p>
</div>
<button go="ContournerEnigmeSuite">$_SuiteEpreuve</button>
</div>
<div class="section" id="ContournerEnigmeSuite" action="findFish">
<h2>Comment s'appelle le poisson d'Elliot ?</h2>
<p>Une aide est disponible <span class="helpFish">ici</span>, mais elle vous coûtera une pilule</p>
<div class="listFish">
<h3>Le mot de passe est l'une de ces propositions :</h3>
<p>qwerty</p>
<p>angela</p>
<p>azerty</p>
<p>fernando</p>
<p>shayla</p>
<p>mrrobot</p>
<p>darlene</p>
<p>romero</p>
</div>
<h3 class="NoHelp">Vous n'avez plus assez de pilules pour obtenir de l'aide</h3>
<form>
<input type="text" name="FindFish" value="" id="findFishInput" autocomplete="off">
<input type="submit" name="" value="$_Envoyer" id="sendNameFish">
</form>
<button go="FinalSave">$_SauverDarlene</button>
</div>
<div class="section" id="FinalSave">
<p>La porte s'ouvre, et Elliot voit Darlene. Il se jette sur elle et défait ses liens.
Bravo ! Vous avez réussi ce jeu, vous avez su gérer votre stress et faire les bons choix.
</p>
<p>Nous vous remercions pour votre participation et espérons que vous avez appréciez ce jeu !</p>
<!-- Share on Fb -->
<iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fhubbb.me%2FMrRobotGame%2F&layout=button&size=small&mobile_iframe=true&appId=1426640577596166&width=73&height=20" width="73" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<!-- Tweet about the game -->
<a href="https://twitter.com/intent/tweet?button_hashtag=MrRobotGame"
class="twitter-hashtag-button" data-text="Really enjoy the game !"
data-related="HMoncenis,xmaireG" data-lang="en" data-show-count="true"
data-url="http://hubbb.me/MrRobotGame/">
Tweet #MrRobotGame
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<button go="intro">$_RecommencerJeu</button>
</div>
<div class="section" id="GameOver">
<p>Vous avez perdu la partie ! Soit vos choix n'étaient pas les bons, soit votre niveau de stress était trop élevé.
Malheureusement, Darlene n'a pas survécue...Le choc était trop lourd pour Elliot, qui a basculé dans une folie totale.
</p>
<p>Merci pour votre participation, envie de redonner une chance à Elliot ?</p>
<button go="intro">$_RecommencerJeu</button>
</div>
</div>
</body>
</html>