-
Notifications
You must be signed in to change notification settings - Fork 36
/
index.html
executable file
·268 lines (186 loc) · 10.3 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
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SURVIVOR (1982 Commodore 64 game remake)</title>
<meta name="description" content="A playable HTML + CSS + JavaScript remake of a space-based "shoot-'em-up" arcade game, including a level editor and design tool. Written as a prototype / demo of JavaScript and browser capabilities. Original Atari 2600 game by Richard Carr, (C) 1982 Synapse Software. Created for the C64 by Ewing Soft (1983.)" />
<meta name="keywords" content="Survivor, JavaScript, HTML, DHTML, animation, CSS3, arcade, retro, space, shooter, arcade game, browser game, commodore 64" />
<meta name="author" content="Scott Schiller" />
<!--
/** @license
*
* SURVIVOR: A HTML + CSS + JavaScript prototype
* based on the Commodore 64 version of Survivor from 1983
*
* http:https://schillmania.com/survivor/
* http:https://www.schillmania.com/content/entries/2012/survivor-c64-html-remake/
* http:https://www.flickr.com/photos/schill/sets/72157628885315581/
* https://github.com/scottschiller/SURVIVOR
*
* Scott Schiller wrote this beginning in December 2011, while on a plane to Hawaii.
* Code provided under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License:
* http:https://creativecommons.org/licenses/by-nc/3.0/
*
*/
/**
* ADDITIONAL PAGE DEBUG OPTIONS / PARAMETERS
* ?html5audio=1 - prefer HTML5 audio, if available (at own risk)
* ?profile=1 - shows a performance panel with live DOM stats, options to show/hide groups of DOM elements
* ?debug=1 - green blocks everywhere on the grid.
* ?mute=1 - I hate sound
* ?interval=1 - force setInterval() instead of requestAnimationFrame (if available)
*/
-->
<link rel="stylesheet" href="css/survivor.css" />
<!-- see script/soundmanager2.js for full, commented version -->
<script src="script/soundmanager2-nodebug-jsmin.js"></script>
<script src="script/survivor.js"></script>
<!-- on schillmania.com -->
<script src="/common/stats.js"></script>
</head>
<body>
<div>
<div id="screens">
<ul id="screen-list">
<li id="boot-screen">
<div id="c64">
<div id="c64-body">
<h1>**** COMMODORE 64 BASIC V2 ****</h1>
<h2>64K RAM SYSTEM 38911 BASIC BYTES FREE</h2>
<p>READY.<p>
<div id="loading0" class="loading">
<p>LOAD"SURVIVOR-2012",8,1</p>
<br />
</div>
<p id="loading1" class="loading">SEARCHING FOR SURVIVOR-2012</p>
<p id="loading2" class="loading">LOADING</p>
<div id="go_go_go">
<p>READY.</p>
<p>RUN</p>
</div>
</div>
<div id="cursor"></div>
</div>
</li>
<li id="title-screen">
<div id="title-content">
<div id="title-header">
<h1>SURVIVOR 2012</h1>
</div>
<h2>A HTML + CSS + JavaScript prototype, based on the Commodore 64 version of Survivor from 1983.</h2>
<h3>
<!-- <marquee> has been outlawed and deprecated for a while, now. We'll do evil things with CSS, to mimic it. -->
<span class="marquee">
<span class="marquee-text">Original Atari 2600 game by Richard Carr, (C) 1982 Synapse Software. Created for the C64 by Ewing Soft (1983.)</span>
</span>
</h3>
</div>
</li>
<li id="help-screen">
<div class="c64 bd">
<div class="wrapper">
<p>It's 1982, and you're playing an arcade game. Of course it has a space theme -- it's 1982. Your mission: Destroy everything you can.</p>
<h3>CONTROLS</h3>
<p>Arrow keys drive the ship. SHIFT or CTRL can be used to fire (for the fastest firing rate, hold the key down.) Use the SPACE BAR to fire "smartbombs", which will kill any bad guys that happen to be chasing you.</p>
<h3>HOW TO PLAY</h3>
<p>The goal: Destroy the bases by shooting out the turrets attached to them. When all turrets are dead on a base, it will explode. When all bases are dead, you will pass the level.</p>
<p>Avoid crashing into "spaceballs" (green asteroid slimeball-like things), and shoot or steer clear of "bad guys" that will occasionally appear and chase you. As you destroy each, the speed of the game will increase slightly.</p>
<h3>ABOUT</h3>
<p>SURVIVOR was originally written for the Atari 2600 home arcade game system in 1982, and was ported in 1983 to the popular Commodore 64 computer system. This is a browser-based remake, written in 2012, that is a tribute to the spirit of the Commodore 64 version. It is a browser-based prototype demonstrating (and admittedly, ironically,) how HTML + CSS + JavaScript can be used to emulate games designed for hardware that existed thirty years prior.</p>
</div>
</div>
</li>
<li id="level-end-sequence">
<!-- generated explosion elements end up here -->
</li>
<li id="level-passed-screen">
<div class="c64 bd">
<div class="wrapper">
<p style="text-align:center">*** LEVEL PASSED ***</p>
<br />
<p>This is the part where the game would say "level 2" and you would then get to replay the same scene, but with everything sped up -- since it was 1982, this was a way to make games increasingly difficult at the time.</p>
<p>Your mission, should you accept it: Repeat the level you just passed, but with everything moving around you 25% faster.</p>
<p>Thanks for playing!</p>
<div id="level-passed-stats"></div>
</div>
</div>
</li>
<li id="game-over-screen">
<div class="c64 bd">
<p>"Game over man, game over!"</p>
<div id="game-over-stats">
<!-- scores, stats and crap go here -->
</div>
</div>
</li>
</ul>
</div>
<div id="world-container">
<div id="world">
<!-- blocks, walls, bases and turrets end up here -->
</div>
<div id="footer">
<div id="debug-panel">
<div class="debug-header">Debug options</div>
<form id="debug-form" action="." method="post" onsubmit="return false">
<ul class="compact">
<li><input id="disable-pulse" type="checkbox" /> <label for="disable-pulse">world pulse effect</label></li>
<li><input id="hide-block" type="checkbox" /> <label for="hide-block">blocks</label></li>
<li><input id="hide-wall" type="checkbox" /> <label for="hide-wall">walls</label></li>
<li><input id="hide-spaceball" type="checkbox" /> <label for="hide-spaceball">spaceballs</label></li>
<li><input id="hide-turret-gunfire" type="checkbox" /> <label for="hide-turret-gunfire">turret gunfire</label></li>
<li><input id="hide-turret" type="checkbox" /> <label for="hide-turret">turrets</label></li>
<li><input id="hide-bad-guy" type="checkbox" /> <label for="hide-bad-guy">bad guys</label></li>
<li><input id="hide-ship" type="checkbox" /> <label for="hide-ship">ship</label></li>
<li><input id="hide-ship-gunfire" type="checkbox" /> <label for="hide-ship-gunfire">ship gunfire</label></li>
<li><input id="disable-sprites" type="checkbox" /> <label for="disable-sprites">sprites</label></li>
<li><input id="disable-css3" type="checkbox" /> <label for="disable-css3">CSS3 effects</label></li>
</ul>
<div class="debug-header">DOM stats</div>
<ul>
<li><code title="number of these elements in #world">#world <div></code>: <span id="debug-div-count" class="count">0</span></li>
<li><code title="number of these elements in #world">#world <div>.block</code>: <span id="debug-div-block-count" class="count">0</span></li>
<li><code title="number of these elements in #world">#world <div>.wall</code>: <span id="debug-div-wall-count" class="count">0</span></li>
<li><code title="number of these elements in #world">#world <div>.turret</code>: <span id="debug-div-turret-count" class="count">0</span></li>
</ul>
<div class="debug-header">Moving objects in view</div>
<ul>
<li><span title="number of active turret fire elements">turret gunfire</span>: <span id="debug-turret-fire-count" class="count">0</span></li>
<li><span title="number of active spaceballs">spaceballs</span>: <span id="debug-spaceball-count" class="count">0</span></li>
<li><span title="number of active bad guys">bad guys</span>: <span id="debug-badguy-count" class="count">0</span></li>
</ul>
</form>
</div>
<div id="stats">
<a id="help" href="#help" onclick="return false" title="Help, keyboard controls and about the game" class="cta help">?</a>
<span class="divider">|</span>
<a href="http:https://www.schillmania.com/content/entries/2012/survivor-c64-html-remake/" title="Making-of, development notes, screenshots and background info">More »</a>
<span class="divider">|</span>
fps: <span id="fps">N/A</span>
</div>
<div id="game-state">
<!-- lives, score, smartbombs etc. -->
<a id="remix" href="editor.html" title="Create your own level with blocks, walls and turrets" class="cta">Create a level</a>
<span class="divider">|</span>
<span id="original">
<span id="tweeter">
<a href="#" title="Looks like you designed something. Challenge your friends to beat it!" onclick="return false" class="cta tweeter">twitter</a>
<span class="divider">|</span>
</span>
<a href="./" title="Play the default level from the original game">Play the original level</a>
<span class="divider">|</span>
</span>
Score: <span id="points">0</span>
<span class="divider">|</span>
Lives: <span id="lives">0</span>
<span class="divider">|</span>
Smartbombs: <span id="smartbombs">0</span>
<span class="divider">|</span>
Background music: <a href="http:https://www.youtube.com/watch?v=btPJPFnesV4&list=PLBAB23D461827111C" rel="" title="Popular songs from 1982 and 1983, when the original 'Survivor' game was released." target="yt_survivor">arcade era</a> (1982-83) / <a href="http:https://www.youtube.com/watch?v=PWcaPIOiD_0&list=PLB4B5B0B78FB29258" rel="" title="A few random songs, not limited to 80's hits." target="yt_survivor">modern</a> (2012)
</div>
</div>
<noscript>Don't forget to enable JavaScript.</noscript>
</div>
</div>
</body>
</html>