-
Notifications
You must be signed in to change notification settings - Fork 0
/
PlanetLander.html
68 lines (56 loc) · 3.52 KB
/
PlanetLander.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
<!DOCTYPE html>
<html>
<head>
<!--Title in the tab-->
<title>Planet Lander</title>
<!--So the browser knows what character set to use (gets rid of annoying Javascript error)-->
<meta charset="UTF-8">
<!--This makes the icon appear in the tab-->
<link rel="icon" href="Resources/favicon.ico" type="image/ico">
<link href='https://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<!--CSS styling-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--This gives the image an ID so that it can be read by the javascript, but cannot be seen in html as width & height=0-->
<img id="lander" width="0" height="0" src="Resources/lander3.png">
<img id="landershadow" width="0" height="0" src="Resources/landershadow.png">
<img id="landercrash" width="0" height="0" src="Resources/landercrash2.png">
<img id="landerblackhole" width="0" height="0" src="Resources/lander2blackhole.png">
<img id="fire1" width="0" height="0" src="Resources/fire1.png">
<img id="fire2" width="0" height="0" src="Resources/fire2.png">
<img id="fire3" width="0" height="0" src="Resources/fire3.png">
<img id="gasleft" width="0" height="0" src="Resources/gasright1.png">
<img id="gasright" width="0" height="0" src="Resources/gasleft1.png">
<img id="bluedownarrow" width="0" height="0" src="Resources/bluedownarrow.png">
<img id="blueuparrow" width="0" height="0" src="Resources/blueuparrow.png">
<img id="reduparrow" width="0" height="0" src="Resources/reduparrow.png">
<img id="greenleftarrow" width="0" height="0" src="Resources/greenleftarrow.png">
<img id="greenrightarrow" width="0" height="0" src="Resources/greenrightarrow.png">
<img id="titleart" width="0" height="0" src="Resources/titleart.png">
<img id="space" width="0" height="0" src="Resources/space.png">
<img id="orbits" width="0" height="0" src="Resources/orbits.png">
<img id="freeflightground" width="0" height="0" src="Resources/freeflightground.png">
<img id="mercuryground" width="0" height="0" src="Resources/mercuryground.png">
<img id="venusground" width="0" height="0" src="Resources/venusground.png">
<img id="moonground" width="0" height="0" src="Resources/moonground.png">
<img id="marsground" width="0" height="0" src="Resources/marsground.png">
<img id="titanground" width="0" height="0" src="Resources/titanground.png">
<img id="uranusground" width="0" height="0" src="Resources/uranusground.png">
<img id="neptuneground" width="0" height="0" src="Resources/neptuneground.png">
<img id="ganymedeground" width="0" height="0" src="Resources/ganymedeground.png">
<img id="mercury" width="0" height="0" src="Resources/mercury.png">
<img id="venus" width="0" height="0" src="Resources/venus.png">
<img id="earth" width="0" height="0" src="Resources/earth.png">
<img id="moon" width="0" height="0" src="Resources/moon.png">
</head>
<body>
<!--1136x640 means that the width and height are at 16:9, but should be smaller than any monitor-->
<canvas id="myCanvas" width="1136" height="640">
<!--This will appear if the canvas cannot be seen, basically older versions of IE-->
<p>Your browser doesn't support HTML 5 canvas :c Try using a different web browser</p>
</canvas>
<p>Use the "WASD" or arrow keys to move the lander</p>
<p><button onclick="instructions()" title="Click here for instructions on how to play the game">More Instructions</button></p>
<!--Game code - This is called last to prevent it loading before the DOM is ready-->
<script src="game.js"></script>
</body>
</html>