-
Notifications
You must be signed in to change notification settings - Fork 19
/
ptd.html
359 lines (319 loc) · 17.1 KB
/
ptd.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
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<!-- <!DOCTYPE XHTML 1.1> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Processed Tower Defense</title>
<link href="style.css" media="screen" rel="Stylesheet" type="text/css" />
</head>
<body>
<h1> Processed Tower Defense </h1>
<div id="game_over"></div>
<div id="game">
<div id="top_controls">
<span class='item'> Lives: <span id="lives">20</span></span>
<span class='item'> Score: <span id="score">0</span></span>
<span class='item'> Gold: <span id="gold">0</span></span>
<span class='item'> Wave: <span id="wave">1</span></span>
<span class='item'> Creep Variety: <span id="creep_variety"></span></span>
<span class='item'> Next Wave in <span id="till_next_wave"></span> seconds</span>
</div>
<div id="help">
<div id="help-headers">
<span><a class="section active" href="#help-gameplay">Gameplay</a></span>
<span><a class="section" href="#help-towers">Towers</a></span>
<span><a class="section" href="#help-creeps">Creeps</a></span>
<span><a class="section" href="#help-terrain">Terrain</a></span>
<span><a class="section" href="#help-bomb">Bombs & Nukes</a></span>
</div>
<div id="help-sections">
<div class="visible" id="help-gameplay">
<p> Processed Tower Defense is a strategy game where you try to defeat waves of dangerous monsters before they reach your tower. Of course, its less of a tower and more of a blueish square on the right side of the screen, but the idea stands. </p>
<p> Monsters appear on the only colorful square on the far left edge of the map, sprint towards the only colorful square on the far right edge of the map. Each time a monster reaches your tower, you lose one life. Lose all of your lives and the game ends. </p>
<p> You start out with a small treasury of gold, and each time you defeat a creep you receive a bit more gold to aid in your valiant defense of the lame blue squa... I mean... your tower. You also receive a few more points to your score when you defeat a creep. While gold can be redeemed for more powerful towers, score can only be redeemed as social capital among fellow PTD players, and thus could be fairly described as both invaluable and worthless. </p>
</div>
<div id="help-towers">
<p> Towers are your first and last line of defense against creeps. Except for the bomb and the nuke, but thats not the point right now. We're talking about towers, okay? Keep on task, won't ya? </p>
<ul>
<li><strong class='missile-tower'>Missile Towers</strong> – slow-firing towers with long range and the gentle caress of a freight truck.</li>
<li><strong class='cannon-tower'>Cannon Towers</strong> – potent beasts whose arcing balls of destruction cause splash damage</li>
<li><strong class='gatling-tower'>Gatling Towers</strong> – unleash a relentless fury of bullets... until they pause to reload</li>
<li><strong class='laser-tower'>Laser Towers</strong> – the circular reincarnation of bland reliability: they shoot blue lines at a high rate, and nothing else</li>
</ul>
<p> Towers all have another helpful characteristic: they block the paths of creeps. This lets you build complex mazes in the hope that the creeps will become dizzy and stop for a few moments to recover over a nice cup of tea. At the bare minimum you'll get to shoot at them for longer. </p>
</div>
<div id="help-creeps">
<p> Creeps are the evil scourge which long to plaster the sickening <strong>Game Over</strong> message at the top of your screen. Resisting them is your calling, your purpose, your afternoon you were supposed to spend doing laundry.</p>
<ul>
<li><strong class='normal-creep'>Normal</strong> creeps: You will know these creeps well, and will prosper by ending their drab, boring existences</li>
<li><strong class='quick-creep'>Quick</strong> creeps arrive every third wave. These creeps move quickly, but their smaller bodies can take less damage</li>
<li><strong class='strong-creep'>Strong</strong> creeps plow through your territory every five waves. They're slow, but extremely hearty.</li>
<li><strong class='boss-creep'>Boss</strong> creep: once in a blue moon, one of these warlords appears and lays waste to your defenses with its absurd hitpoints and size.</li>
</ul>
<p> Each of those categories of creeps can also have one additional behavior. Some creeps are very slow crossing water, some climb mountains at shocking speeds, and some even fly over your towers while mocking the effectiveness of your intricate designs.</p>
</div>
<div id="help-terrain">
<p> Each square on the board is a certain type of terrain. Terrain is randomly assigned each time the game is played, and bestows certain effects upon towers and creeps inside of them. </p>
<ul>
<li> <strong class='neutral-terrain'>Neutral</strong> terrain is the most common terrain, and doesn't do anything. </li>
<li> <strong class='water-terrain'>Water</strong> terrain slows most creeps down.</li>
<li> <strong class='mountain-terrain'>Mountain</strong> terrain slows creeps down, and gives towers a range bonus. </li>
<li> <strong class='power-plant-terrain'> Power plant </strong> terrain makes creep zip along at double speed, but will also double the damage of any tower built there. </li>
</ul>
</div>
<div id="help-bomb">
<p> The <strong class='bomb'>Bomb</strong> is the first of two last resort weapons at your disposal. You have an unlimited supply, but they get a bit more expensive with each passing level. Will severely damage all creeps in its radius (dealing 75% of their max hitpoints), but won't come cheap. </p>
<p> The <strong class='nuke'>Nuke</strong> is the last resort weapon of last resort weapons. It will destroy all creeps on the screen, but has two drawbacks. First, you won't recieve any loot from creeps destroyed this way. Second, you only have a limited supply and have no way to replenish that supply once they are exhausted. </p>
</div>
</div>
</div>
<div id="middle">
<canvas id='tower_defense' width="600" height="400"></canvas>
<div id="side">
<div id="controls">
<table>
<tr>
<td> <button id='laser_button' class='mode_button' onclick="build_laser_tower();" accesskey="L">Build <span class='hotkey'>L</span>aser Tower - 25 Gold</button> </td>
</tr>
<tr>
<td> <button id='gatling_button' class='mode_button' onclick="build_gatling_tower();"> Build <span class='hotkey'>G</span>attling Tower - 50 Gold</button></td>
</tr>
<tr>
<td> <button id='cannon_button' class='mode_button' onclick="build_cannon_tower();" accesskey="M">Build <span class='hotkey'>C</span>annon Tower - 75 Gold</button> </td>
</tr>
<tr>
<td> <button id='missile_button' class='mode_button' onclick="build_missile_tower();" accesskey="M">Build <span class='hotkey'>M</span>issile Tower - 100 Gold</button> </td>
</tr>
<tr>
<td> <button id='bomb_button' class='mode_button' onclick="aim_bomb();" accesskey="S">Drop <span class='hotkey'>B</span>omb - <span id="bomb_cost">50</span> Gold</button></td>
</tr>
<tr>
<td> <button onclick="nuke_creeps();" accesskey="N"> Launch <span class='hotkey'>N</span>uke - <span id="nukes_left"> 3 left </span></button></td>
</tr>
</table>
</div>
<div id="tower">
<table>
<tr><td></td><td> <em>Tower Details</em> </td></tr>
<tr><td> Type: </td><td id="tower_type"></td></tr>
<tr><td> Range: </td><td id="tower_range"></td></tr>
<tr><td> Damage: </td><td id="tower_damage"></td></tr>
<tr><td> Firing Rate: </td><td id="tower_rate"></td></tr>
<tr><td><button id="tower_sell_button"></button></td></tr>
<tr><td><button id="tower_upgrade_button"><span class='hotkey'>U</span>pgrade!</button></td></tr>
</table>
</div>
<div id="creep">
<table>
<tr><td></td><td> <em> Creep Details </em></td></tr>
<tr><td> Type: </td><td id="creep_type"></td></tr>
<tr><td> Hp: </td><td id="creep_hp"></td></tr>
<tr><td> Value: </td><td id="creep_value"></td></tr>
</table>
</div>
<div class='error message_area'></div>
<div class='message message_area'></div>
</div>
</div>
<div id="bottom_controls">
<button id='pause_button' class='mode_button' onclick="pause();">Pause</button>
<button id='reset_button' onclick="reset_game();">Reset Game</button>
<button onclick="spawn_wave();">Spawn Next <span class='hotkey'>W</span>ave</button>
<!-- <button id='mute_button' onclick="mute();">Mute</button> -->
<button id='help_button' onclick="toggle_help();"><span class='hotkey'>H</span>elp</button>
<button id='logging_button' onclick='toggle_logging();' class='active_mode'>Stop <span class='hotkey'>D</span>ebugging</button>
</div>
</div>
<h4>Hotkeys:</h4>
<ul>
<li>[space] – Pause/Resume</li>
<li>[esc] – Cancel Tower/Missile</li>
<li>H – Help!</li>
<li>L – Build laser tower</li>
<li>M – Build missile tower</li>
<li>G – Build gatling tower</li>
<li>C – Build cannon tower</li>
<li>B – Drop Bomb</li>
<li>N – Launch Nuke</li>
<li>W – Spawn Next Wave</li>
<li>U – Upgrade Selected Tower</li>
</ul>
<h4>Source:</h4>
<ul>
<li> <a href="http://github.com/rictic/processing-tower-defense/">Repository</a> </li>
<li> <a href="http://rictic.lighthouseapp.com/projects/11911/home">Wiki and Issue Tracker</a> </li>
<li> <a href="ptd.js">ptd.js</a> </li>
<li> <a href="jsfprocessing.js">jsfprocessing.js</a> </li>
<li> <a href="http://ejohn.org/blog/processingjs/">Processing.js</a> </li>
</ul>
<div id="js_imports">
<!-- Putting script elements as late in the document as possible gives
a better, faster initial render. -->
<script src="processing.js" type="text/javascript" charset="utf-8" ></script>
<script src="jsfprocessing.js" type="text/javascript" charset="utf-8" ></script>
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/creep_waves.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/terrain.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/util.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/creeps.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/ui_modes.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/weapons.js" type="text/javascript" charset="utf-8" ></script>
<script src="game/ptd.js" type="text/javascript" charset="utf-8" ></script>
<script src="jquery.ui-1.5/ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.ui-1.5/ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
</div>
<script type="text/javascript" charset="utf-8">
/* initialization */
$(document).ready(function() {
start_tower_defense();
})
/* Hotkeys! */
special_keys = {
27: 'esc', 9: 'tab', 32:'space', 13: 'return', 8:'backspace', 145: 'scroll', 20: 'capslock',
144: 'numlock', 19:'pause', 45:'insert', 36:'home', 46:'del',35:'end', 33: 'pageup', 16: 'shift',
34:'pagedown', 37:'left', 38:'up', 39:'right',40:'down', 112:'f1',113:'f2', 114:'f3',
115:'f4', 116:'f5', 117:'f6', 118:'f7', 119:'f8', 120:'f9', 121:'f10', 122:'f11', 123:'f12'};
/* Modifier keys */
var modifierkeys = {};
var shift_down = false;
//extract hotkeys from the DOM
var hotkeys = {};
$('button .hotkey').each(function(){
//this is bass ackwards, but I got type errors passing around the native click method
var button = this.parentNode;
hotkeys[$(this).html().toUpperCase()] = function() {button.click()};
});
//hotkeys that aren't in the dom
hotkeys["space"] = pause;
hotkeys["esc"] = unselect;
hotkeys['Z'] = function() {$('#log').empty()};
hotkeys['R'] = function() {if (SET.state.name() == "GameOverMode") reset_game();}
//modifiers to be called on keydown and keyup
modifierkeys["shift"] = function() { shift_down = !shift_down; };
$(document).bind("keydown", function(e) {
// if the user is holding down ctrl or cmd, let the browser handle it
if (e.metaKey) return true;
var key = special_keys[e.keyCode] || String.fromCharCode(e.keyCode);
if (key in hotkeys){
hotkeys[key]();
return false;
}
if (key in modifierkeys){
modifierkeys[key]();
return false;
}
return true;
});
$(document).bind("keyup", function(e) {
if (e.metaKey) return true;
var key = special_keys[e.keyCode] || String.fromCharCode(e.keyCode);
if (key in modifierkeys){
modifierkeys[key]();
return false;
}
return true;
});
/* Toggle buttons along the bottom */
// all of this is really a prime candidate for some cleanup
// so much dupiclation and so many global variables for such
// simple behavior
var paused = false;
function pause() {
paused = !paused;
pause_resume();
$('#pause_button').html(paused ? "Resume" : "Pause");
}
function mute() {
mute_unmute();
$('#mute_button').html(muted ? "Unmute" : "Mute");
}
var logging = true;
var prim_log = log;
function toggle_logging() {
logging = !logging;
if (logging)
log = prim_log;
else
log = function(){};
$("#logging_button").toggleClass("active_mode").html(logging? "Stop <span class='hotkey'>D</span>ebugging" : 'Start <span class="hotkey">D</span>ebugging');
}
if (document.location.hash == "#debug")
$('#logging_button').show();
else{
toggle_logging()
$('#logging_button')[0].onclick = function(){};
}
var getIdFromURL = function(url) {
return url.slice(url.indexOf("#"));
}
$("#help-headers .section").click(function() {
$("#help-sections div").hide();
$(getIdFromURL(this.href)).show();
$("#help-headers .section").removeClass("active");
$(this).addClass("active");
return false;
})
var help_displayed = false;
var toggle_help = function() {
help_displayed = !help_displayed;
if (help_displayed){
$("#help").show();
$("#help_button").addClass("active_mode");
if (!paused) pause();
}
else {
$('#help').hide();
$('#help_button').removeClass('active_mode');
if (paused) pause();
}
};
/* illustrating to the user what mode they're in*/
mode_signifiers = {'BuildLaserTowerMode':'laser_button', 'BuildGatlingTowerMode':'gatling_button',
'BuildCannonTowerMode':'cannon_button', 'BuildMissileTowerMode':'missile_button',
'AimBombMode':'bomb_button', 'PauseMode':'pause_button'};
for (event in mode_signifiers) {
$('').bind(event, function(e) {
$('#'+mode_signifiers[e.type]).addClass('active_mode');
});
}
$('').bind('no_mode', function() {
$('.mode_button').removeClass('active_mode');
})
/* Messages for the player */
//Temporary messages are a bit of a pain
var timeToHide = null;
["error","message"].forEach(function(s){
$('.'+s).hide();
$('').bind(s,function(e,message){
timeToHide = new Date().getTime() + 2500;
var el = $('.'+s);
el.html(message).fadeIn();
window.setTimeout(function() {
if (new Date().getTime() >= timeToHide)
el.fadeOut();
}, 3000);
});
});
$('#game_over').hide();
$('').bind('game_over', function(e,over){
if (over == true){
log("game over");
$('#game_over').html("Game Over! Final score: " + $("#score").html()).fadeIn();
//tempt tempt tempt
for (var i=0; i < 3; i++)
$("#reset_button").effect("highlight",{color:"#f60"},3000);
}
else{
log("game (re?)started");
$('#game_over').html("Just once more...").fadeOut();
}
});
/* stub until we pull in sound for reals */
var play_sound = function(){};
</script>
<hr/>
<p><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>, by <a href="http://lethain.com">Will Larson</a> and <a href="http://blog.rictic.com/">Peter Burns</a></p>
<!-- <p>Sound effects are released under a <a href='http://creativecommons.org/licenses/sampling+/1.0/'>Creative Commons Sampling Plus 1.0 License</a> - For authorship information, see <a href='assets/LICENSE'>here</a></p> -->
<div id="log"></div>
<div id="sfx_dump"></div>
</body> </html>