-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhowToPlay.html
155 lines (147 loc) · 7.45 KB
/
howToPlay.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Moth's Tale</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="navbar.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/JavaScript" src="slider.js"></script>
</head>
<body onload="showSlides(1)">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li><a href="index.html#">Home</a></li>
<li><a href="howToPlay.html">How To Play</a></li>
<li><a href="controls.html">Controls</a></li>
<li><a href="enemies.html">Lights and Enemies</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="speedruns.html">Speedruns</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="main">
<div align="center">
<br>
<!-- --> <!-- how to play-->
<!-- objective-->
<h1>How to play</h1>
<img src="img/HowtoPlay.webp" class="main-image-howtoplay" alt="Missing_Image">
<p> <!-- put the description in there-->
You heard a rumor about a so called 'tree of light'. To find it, you must follow glowing flowers, some bigger than others.<br>
But be careful! You cannot endure total darkness for very long. <br>
Therefore, quickly move from one light source to another so that the moth doesn't reach it's dark end.
</p>
<!-- health-->
<h1>HUD</h1>
<table style="width:80%">
<tr align="center">
<td style="width:33%"><img src="img/Health.png" alt="Health(full) light"></td>
<td style="width:33%"><img src="img/Health(part).png" alt="Health(part) light"></td>
<td style="width:33%"><img src="img/Score.png" alt="Score"></td>
</tr>
<tr style="font-family: cursive; vertical-align:top" align="center">
<td style="width:33%">
To make one thing clear. The yellow bar is NOT your health bar.
It is your light bar. It will drain over time and only refills, if you are near a light.<br>
The health bar is reprensented by the white moth head on the top left corner of your screen.
If it's empty, you'll die.<br>
Due to your broken wing you can only flap them three times before you need to rest.
</td>
<td style="width:33%">
This is how your healh, light bar and wing count will look like, when they get low.
</td>
<td style="width:33%">
This is your score board.<br>
The upper one is your death counter. Make sure to keep it low.<br>
The middle one shows, how many eggs you collected in this level.<br>
The lower one is your timer, so you can try to speedrun this game. :)<br>
</td>
</tr>
<tr align="center">
</tr>
</table>
<!-- extras-->
<!-- Slideshow-->
<div class="slideshow-container">
<div class="slide">
<div class="numbertext">1 / 5</div>
<div class="text" style="font-size: 145%">Checkpoint</div>
<img src="img/Checkpoints.webp" style="width:50%">
<div class="text">Don't forget to activate the Checkpoints</div>
</div>
<div class="slide">
<div class="numbertext">2 / 5</div>
<div class="text" style="font-size: 145%">Collectibles</div>
<img src="img/Collectibles.webp" style="width:50%">
<div class="text">Try to find all hidden eggs, but don't worry, this is optional</div>
</div>
<div class="slide">
<div class="numbertext">3 / 5</div>
<div class="text" style="font-size: 145%">Lights</div>
<img src="img/Lights.webp" style="width:50%">
<div class="text">There are many lights to which you, as a moth, are attracted to</div>
</div>
<div class="slide">
<div class="numbertext">4 / 5</div>
<div class="text" style="font-size: 145%">Enemies</div>
<img src="img/Enemy.webp" style="width:50%">
<div class="text">Be careful! You'll probably meet some unfriendly bugs on your way</div>
</div>
<div class="slide">
<div class="numbertext">5 / 5</div>
<div class="text" style="font-size: 145%">Ending</div>
<img src="img/End.webp" style="width:50%">
<div class="text">Follow the big glowing flowers to reach your goal</div>
</div>
</div>
<br>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<footer>
<hr class="horizontal line">
<!-- credits-->
<table>
<tr>
<h1><b>Credits</b></h1>
</tr>
<tr>
<td>Achilleas Tagalidis</td>
</tr>
<tr>
<td>Alexander Ritter</td>
</tr>
<tr>
<td>Elias Altmann</td>
</tr>
<tr>
<td>Jason Pywell</td>
</tr>
<tr>
<td>Nicole Bretz</td>
</tr>
<tr>
<td>Regine Lendway</td>
</tr>
<tr>
<td>Samuel Scheer</td>
</tr>
</table>
<p>Project for Praktikum Computerspiele & Visual Effects / Computergrafik at the Eberhard Karl University of Tübingen</p>
</footer>
</div>
</div>
</body>
<script type="text/JavaScript" src="navbar-responsive.js"></script>
</html>