/
index.html
96 lines (83 loc) · 3.65 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
<!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">
<link rel="stylesheet" href="styles/style.css">
<title>Escape HackerYou</title>
</head>
<body>
<div class="slug-container ">
<div class="slug"></div>
</div>
<!--
all game elements appended via JavaScript
allows for any map to be created by changing the values in game.grid array
-->
<main class="index-main wrapper">
<section class="game-status-bar">
<div class="status-chips">
<ul>
<li>Chips:</li>
<li class="total-chips">0</li>
</ul>
<ul>
<li>Collected:</li>
<li class="collected-chips">0</li>
</ul>
</div>
<div class="status-keys">
<p>Keys:</p>
<ul>
<li>
<div class="red-dot false"></div>
</li>
<li>
<div class="green-dot false"></div>
</li>
<li>
<div class="blue-dot false"></div>
</li>
</ul>
</div>
</section>
<section class="game-board-container">
<div class="start-instructions">
<h1>Escape! Level 1</h1>
<p>Uh oh! After a long day of dev stuff, HackerMe must have fallen asleep in the building. Upon waking up, it was discovered that everyone else has left, locking him in!</p>
<ul class="start-instructions-list">
<li>Use the arrow keys on your computer's keyboard, or the arrow buttons at the bottom of your mobile screen, to guide HackerMe through the map</li>
<li>Collect the coloured keys to use with the corresponding coloured locks and access restricted areas</li>
<li>Gather up all the HackerChips to unlock the elevator</li>
<li>Once finished, get to the elevator and escape!</li>
</ul>
<button class="button-start">Play!</button>
</div>
<div class="completion-popup hidden">
<h1>You Did It!</h1>
<p>Congratulations, you completed the level! Luckily for you, though perhaps not for HackerMe, more levels will be created in the future. </p>
<p>** I cannot take credit for the game mechanics of "Escape HackerYou". I was influenced heavily by a game called "Chip's Challenge" that I played often as a kid on my family's Windows '98 computer. **</p>
</div>
<div class="game-board hidden"></div>
</section>
<section class="action-arrows-container">
<div class="arrow-container up" id="up">
<div class="arrow up"></div>
</div>
<div class="arrow-container left" id="left">
<div class="arrow left"></div>
</div>
<div class="arrow-container right" id="right">
<div class="arrow right"></div>
</div>
<div class="arrow-container down" id="down">
<div class="arrow down"></div>
</div>
</section>
</main>
<!-- JavaScript scripts -->
<script src='https://code.jquery.com/jquery-3.3.1.js' integrity='sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=' crossorigin='anonymous'></script>
<script src="scripts/script.js"></script>
</body>
</html>