-
Notifications
You must be signed in to change notification settings - Fork 0
/
AlwaysDay.html
192 lines (173 loc) · 7.83 KB
/
AlwaysDay.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
<!DOCTYPE HTML>
<!--
Massively by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Always Day</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Main</a></li>
</ul>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/vincent-berardi-900723/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/VincentBerardi" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
<h1>Always Day</h1>
</header>
<!-- Video and Screenshots -->
<h2>Video/Screenshots</h2>
<h3>Video</h3>
<!-- Eventually, put this logic in css -->
<div align="center">
<iframe class="video-size" src="https://www.youtube.com/embed/Kv8N37aCwp8" frameborder="0" allowfullscreen="" width="700" height="400">
</iframe>
</div>
<h3>Screenshots</h3>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay1.png" class="image fit"><img src="images/Always Day/AlwaysDay1.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay2.png" class="image fit"><img src="images/Always Day/AlwaysDay2.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay3.png" class="image fit"><img src="images/Always Day/AlwaysDay3.png" alt="" /></a></span></div>
<!-- Break -->
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay4.png" class="image fit"><img src="images/Always Day/AlwaysDay4.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay5.png" class="image fit"><img src="images/Always Day/AlwaysDay5.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay6.png" class="image fit"><img src="images/Always Day/AlwaysDay6.png" alt="" /></a></span></div>
<!-- Break -->
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay7.png" class="image fit"><img src="images/Always Day/AlwaysDay7.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay8.png" class="image fit"><img src="images/Always Day/AlwaysDay8.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay9.png" class="image fit"><img src="images/Always Day/AlwaysDay9.png" alt="" /></a></span></div>
<!-- Break -->
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay10.png" class="image fit"><img src="images/Always Day/AlwaysDay10.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay11.png" class="image fit"><img src="images/Always Day/AlwaysDay11.png" alt="" /></a></span></div>
<div class="col-4"><span class="image fit"><a href="images/Always Day/AlwaysDay12.png" class="image fit"><img src="images/Always Day/AlwaysDay12.png" alt="" /></a></span></div>
</div>
</div>
<hr />
<!-- Description -->
<header>
<h2>Description</h2>
<p>
<ul>
<li>
There are 3 zones on the island of Always Day: red (volcano), green (jungle), and blue (sky).
Each color represents a shard of daylight stolen by day-seizing ghosts.
</li>
<li>
Navigate the paths, platforms, and environment hazards.
Do not fall out-of-bounds or you will die—but you'll respawn at the nearest checkpoint!
</li>
<li>
A ghost boss awaits you at the end of each zone.
They each have a unique one-shot-kill attack and a special ability that will impede your movement or stun you.
</li>
<li>
Hold left-click above the ghosts while dodging their attacks.
When the stun meter fills up, they will be momentarily stunned for you to retrieve the light.
</li>
<li>
Approach the obelisks guarded by the ghosts to gradually absorb the light from the shard.
Once you've absorbed all the light, you'll teleport back to the starting point and can continue on to the next zone.
Completed zones will be blocked off.
</li>
<li>
You win the game when <b>all 3 daylight shards have been retrieved</b>.
The main obelisk at the start location will be lit with each color, indicating that you have successfully seized back the day!
</li>
</ul>
</p>
</header>
<hr />
<!-- Controls -->
<h2>Controls</h2>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Input</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>W,A,S,D</td>
<td>Move Up, Left, Down, Right</td>
</tr>
<tr>
<td>Spacebar</td>
<td>Jump</td>
</tr>
<tr>
<td>Mouse Left-Button (Hold)</td>
<td>Fills up meter to stun ghost (Note: make sure to click and hold it over the ghost or else the meter will restart.)</td>
</tr>
<tr>
<td>Esc</td>
<td>Pause/In-Game Menu</td>
</tr>
</tbody>
</table>
</div>
<hr />
<!-- Buttons -->
<h2>Download/Github</h2>
<div class="row">
<ol>
<li>Download zip</li>
<li>Unpack and extract</li>
<li>Run the .exe</li>
</ol>
</div>
<ul class="actions fit">
<li><a href="https://drive.google.com/file/d/17Xl5iDbmWk90xFJspWNlzEv9B4_FzEsJ/view?usp=sharing" class="button primary icon solid fa-download">Windows Build</a></li>
<li><a href="https://drive.google.com/file/d/181fGD9rsyOZKtrlePfD7082MGwJJDDcL/view?usp=sharing" class="button fit icon solid fa-download">Mac build</a></li>
</ul>
<ul class="actions fit">
<li><a href="https://github.com/VincentBerardi/Always-Day" class="button primary large fit">Github Repository</a></li>
</ul>
<hr />
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<ul class="actions fit">
<li><a href="index.html" class="button primary large fit">Return to Main Page</a></li>
</ul>
</section>
</footer>
<!-- Copyright -->
<div id="copyright">
<ul><li>© Vincent Berardi</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li></ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>