/
index.html
130 lines (108 loc) · 4.17 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Asteroids do not concern me..</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Limelight' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68692328-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<h1>Asteroids!</h1>
<a class="logo" href="http://www.parkjake.com">by Jake Park</a>
<div class="display"></div>
<canvas id="game-canvas" width="800" height="400"></canvas>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/display.js"></script>
<script src="./lib/keymaster.js"></script>
<script src="./lib/utils.js"></script>
<script src="./lib/movingObject.js"></script>
<script src="./lib/asteroid.js"></script>
<script src="./lib/bullet.js"></script>
<script src="./lib/explosion.js"></script>
<script src="./lib/ship.js"></script>
<script src="./lib/nemesis.js"></script>
<script src="./lib/game.js"></script>
<script src="./lib/gameView.js"></script>
<script src="./lib/gameStart.js"></script>
<div id='page1'>
<div>
<p> Welcome to Asteroids!<br>
An object in motion stays in motion with the same speed and direction,
unless acted upon by an external force..<br>
<a href='#' class="next" onclick='page1()'>Continue</a>
</p>
</div>
</div>
<div id='page2'>
<div class="overlay">
<div class="keymap">
<p class="left"> Player 1:<br>
<i class="kbd">↑</i> Forward Thrusters!<br>
<i class="kbd">↓</i> Reverse Thrusters!<br>
<i class="kbd">←</i> Turn Left<br>
<i class="kbd">→</i> Turn Right<br>
<i class="kbd">spacebar</i> Fire Bullet<br>
<i class="kbd">left ctrl</i> EMERGENCY STOP<br>
</p>
<p class="right"> Player 2:<br>
<i class="kbd">W</i> Forward Thrusters!<br>
<i class="kbd">S</i> Reverse Thrusters!<br>
<i class="kbd">A</i> Turn Left<br>
<i class="kbd">D</i> Turn Right<br>
<i class="kbd">F</i> Fire Bullet<br>
<i class="kbd">Q</i> EMERGENCY STOP<br>
</p>
</div>
<a href='#' class="next" onclick='page2()'>Continue</a>
</div>
</div>
</div>
<div id='page3'>
<div>
<p>
Asteroids are your friends.. until your shields are depleted..
Use them for cover, or just watch the physics unfold!<br>
Player 2's AI will rotate to track you and destroy you!<br>
You are invulnerable for 3 seconds every time
asteroids respawn.<br>
Your shields can take 3 hits; after that, be careful!<br>
They will regenerate slowly if you don't take any more damage.<br>
The slightest space debris will destroy your craft without shields.<br>
<a href='#' class="launch" onclick='page3()'>Continue</a>
</p>
</div>
</div>
<div id='startGame'>
<div>
<p>
TL:DR: press and hold down Spacebar to spam bullets;<br>
dodge or shoot the enemy red bullets.<br>
<a href='#' class="launch" onclick='soloLaunch()'>Single Game</a>
<a href='#' class="launch" onclick='pvpLaunch()'>Head to Head</a>
</p>
</div>
</div>
<div id='gameOver'>
<div id="ending">
<p id="winner-player">A winner is you!!!</p>
<p id="winner-nemesis">Game Over!! You lost :(</p>
<p>
<br>Check out my other projects? <a class="home" href="http://www.parkjake.com">Home</a>
<br>
<a href='#' class="launch" onclick='restart()'>Restart Game?</a>
</p>
<div class="player_stats">
</div>
</div>
</div>
</body>
</html>