GA--Project-One/index.html at master · zw-zack/GA--Project-One · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Survive!</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="startPage">
		<div id="startText">
			<h1>Survive!</h1>
			<p>Dodge all enemies to survive. Enemies appear from left and right.</br> Use arrow keys to move. Click start once ready.</p>
		</div>
		<div>
			<button id="startButton">Start</button></br>
			<button id="powerupsButton">Powerups</button>
			<button id="enemiesButton">Enemies</button>

		</div>
	</div>

	<div class="powerupsPage">
		<table>
			<tr>
				<th>Powerups</th>
				<th>Effects</th>
				<th>Tips</th>
			</tr>
			<tr>
				<td><img src="img/cake.png" alt="Cake"></td>
				<td>Cakes are the most common powerup you will see. They give you bonus points when picked up! Each cake you collect grants you 200 points!</td>
				<td>Although some bonus points is tempting, losing 1 health for 200 points is generally a bad idea.</td>
			</tr>
			<tr>
				<td><img src="img/healthpack.png" alt="Healthpack"></td>
				<td>Healthpacks keep you alive! Each Healthpack you collect grants you 1 health.</td>
				<td>Healthpacks are crucial to your success! Pay attention to where they are and try to get them, especially in earlier levels. There is no maximum health you can have so stack up as much as you can!</td>
			</tr>
			<tr>
				<td><img src="img/eyeMask.png" alt="Eyemask"></td>
				<td>Eye mask are less common but very useful to get you out of sticky situations! Once collected, you transform into a wandering ghost that will not take damage from any enemies for 7 seconds!</td>
				<td>Eyemasks are great as it gives 7 seconds of guaranteed survival. But dont waste them unnecessarily, save them for the right time! You can only collect cakes and healthpacks in ghost mode.</td>
			</tr>
			<tr>
				<td><img src="img/potion.png" alt="Potion"></td>
				<td>Potions are very powerful and essential! Although they dont come often, but when they do you will most probably need it! Once collected, transforms you to a burning fire that kills all enemies in your path. Lasts 5 seconds. </td>
				<td>Potion are powerful but only lasts for 5 seconds. Use them only when there are enemies that you must kill. Enemies killed by you when you are in fire mode grants you bonus points!</td>
			</tr>
			<tr>
				<td><img src="img/bomb.png" alt="Bomb"></td>
				<td>Bombs are the most powerful powerups you will see! Once collected they will explode and kill a large area of enemies. Explosion effect lasts 3 seconds.</td>
				<td>Bombs are very rare and often appear only in difficult levels. Do not just use it when you see one, save it for important enemies! Enemies killed by bombs grants you bonus points!</td>
			</tr>
			<tr>
				<td><img src="img/moneyBag.png" alt="Money Bag"></td>
				<td>Money bags are rewards for good performance! Catch them before they run away from you! Each money bag grants you 1000 points.</td>
				<td>Free points, YUM!</td>
			</tr>
		</table>
		<button id="backButtonOne">Back</button>
	</div>

	<div class="enemiesPage">
		<table>
			<tr>
				<th>Enemies</th>
				<th>Description</th>
				<th>Tips</th>
			</tr>
			<tr>
				<td><img src="img/tiger.png" alt="Tiger"></td>
				<td>Tigers are the slowest and the most basic among all the enemies. You lose 1 health on collision.</td>
				<td>Try not to take damage by tigers as you will need the health later on. Not a priority for destroying(via bombs or potions etc).</td>
			</tr>
			<tr>
				<td><img src="img/dino.png" alt="Dino"></td>
				<td>Dinos are slightly faster and larger than tigers. You lose 1 health on collision.</td>
				<td>Dinos are not menacing by itself but can be very dangerous in groups. Try to anticipate its movement as they move in a straight line.</td>
			</tr>
			<tr>
				<td><img src="img/ghost.png" alt="Ghost"></td>
				<td>Ghosts are one of the fastest enemies around. Although not that large in size, they can surprise you with their speed. You lose 1 health on collision.</td>
				<td>Ghosts move very quickly so it is best to look out for them around the map to hide efficiently from them.</td>
			</tr>
			<tr>
				<td><img src="img/pinkAlien.png" alt="Pink Alien"></td>
				<td>Pink aliens are 1 of the most irritating enemies around. They will lock on to you position and move towards you. The only saving grace is that they are comparatively slow. You lose 1 health on collision.</td>
				<td>Pink alien follow you wherever you go, so try not to stay in corners or stay too long on the same spot. You can lure them to the side so that they would not be too much of a nuisance.</td>
			</tr>
			<tr>
				<td><img src="img/alien.png" alt="Alien"></td>
				<td>Alien spaceships are your nightmares! Not only are they fast, they are very large too! You lose 3 health on collision.</td>
				<td>Alien spaceships are very hard to avoid due to their speed and size. Save some powerups for them!</td>
			</tr>
			<tr>
				<td><img src="img/giraffe.png" alt="Giraffe"></td>
				<td>Giraffes are very dangerous and will always put you on your feet! They are quick and large. But most importantly they will follow you around. You lose 3 health on collision.</td>
				<td>Giraffes are best countered by avoiding corners and circling around them. Be careful of hitting other enemies while running away from it!</td>
			</tr>
		</table>
		<button id="backButtonTwo">Back</button>
	</div>

	<div class="gameStarted">
		<div id="survive">
		</div>
	</div>


	<script src="script.js"></script>
</body>
</html>