-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
155 lines (125 loc) · 5.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas TD</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
<link rel="stylesheet" href="index.css">
<script>
var _gaq = _gaq || [];
_gaq.push(
["_setAccount", "##GAID##"],
["_trackPageview"]
);
(function () {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="pages">
<canvas id="pages-canvas" width="800" height="500"></canvas>
<div id="pages-overlay"></div>
<div id="pages-start">
<div id="pages-start-maps">
<a><img src="images/maps/loopy.png" width="80" height="50">Loopy</a>
<a><img src="images/maps/backtrack.png" width="80" height="50">Backtrack</a>
<a><img src="images/maps/dash.png" width="80" height="50">Dash</a>
</div>
<div id="pages-start-info">
<p>A fully featured tower defense game built with <canvas>.</p>
<h2>Instructions</h2>
<p>Build and upgrade turrets (which costs money and increases score) to kill creeps (which generates money and increases score). Experiment with the turrets; each has a special ability when fully upgraded.</p>
<h2>Shortcuts</h2>
<dl>
<dt><kbd>1</kbd></dt>
<dd>Build Laser / Upgrade damage</dd>
<dt><kbd>2</kbd></dt>
<dd>Build Missile / Upgrade rate</dd>
<dt><kbd>3</kbd></dt>
<dd>Build Tazer / Upgrade range</dd>
<dt><kbd>4</kbd></dt>
<dd>Build Mortar / Move</dd>
<dt><kbd>*</kbd></dt>
<dd>Sell</dd>
<dt><kbd>=</kbd></dt>
<dd>Fast forward</dd>
<dt><kbd>Esc</kbd></dt>
<dd>Deselect / Cancel / Pause</dd>
<dt><kbd>Enter</kbd></dt>
<dd>Send wave</dd>
</dl>
<div id="pages-start-links">
<a data-page="about">About</a>
(<a href="https://github.com/tkazec/canvas-td/" target="_blank">source</a> |
<a href="http://tkaz.ec/" target="_blank">tkaz.ec</a>)
</div>
</div>
</div>
<div id="pages-scores">
<h3>Loopy</h3>
<h3>Backtrack</h3>
<h3>Dash</h3>
<ul id="pages-scores-twitter-loopy"></ul>
<ul id="pages-scores-twitter-backtrack"></ul>
<ul id="pages-scores-twitter-dash"></ul>
<ul id="pages-scores-local-loopy"></ul>
<ul id="pages-scores-local-backtrack"></ul>
<ul id="pages-scores-local-dash"></ul>
<a data-page="" id="pages-scores-back">←</a>
</div>
<div id="pages-about">
<p>Canvas TD was originally created for <a href="http://10k.aneventapart.com/" target="_blank">10k Apart</a> 2010, a challenge to build a web app in 10 KiB or less. Finished in less than twelve days, it failed to receive any prizes, but was ranked high in community voting and generated a significant amount of Twitter activity. While lacking much in the way of instructions, it was fully featured and quite enjoyable, and can still be played <a href="legacy.html" target="_blank">here</a>.</p>
<p>After the contest ended, work was started on a rewrite. Completed in June 2011, it featured far better code, many UI improvements, new gameplay elements, and some real instructions. Technologies used include <canvas>, @font-face, the Twitter Search API, Web Storage, and many other HTML5/CSS3/ES5 features.</p>
<p>The endless, increasingly difficult gameplay (and many other core elements) is inspired by <a href="http://onslaught.playr.co.uk/" target="_blank">Onslaught TD</a>. The retro look is heavily based on the excellent <a href="http://bittripgame.com/" target="_blank">BIT.TRIP</a> games and <a href="http://www.candystand.com/play/vector-td" target="_blank">Vector TD</a>. I'd also like to thank Alex K. and David S. for their plentiful ideas, testing, feedback, and motivation.</p>
<img src="images/logo.png" id="pages-about-logo" width="224" height="224">
<a data-page="" id="pages-about-back">←</a>
</div>
</div>
<div id="control">
<div id="control-left">
<div id="control-turrets">
<a data-name="Laser"><img src="images/turrets/laser.png" width="25" height="25"><br>Laser ($15)</a>
<a data-name="Missile"><img src="images/turrets/missile.png" width="25" height="25"><br>Missile ($25)</a>
<a data-name="Tazer"><img src="images/turrets/tazer.png" width="25" height="25"><br>Tazer ($40)</a>
<a data-name="Mortar"><img src="images/turrets/mortar.png" width="25" height="25"><br>Mortar ($60)</a>
</div>
<div id="control-manage">
<a id="control-manage-damage"></a>
<a id="control-manage-rate"></a>
<a id="control-manage-range"></a>
<a id="control-manage-move">Move<br>$90</a>
<a id="control-manage-sell"></a>
<div id="control-manage-stats"></div>
</div>
<div id="control-score">
Game over! You scored <span id="control-score-text"></span>.<br><br>
<a href="">Play again</a> or <a data-page="scores">view scores</a>
(maybe <a id="control-score-tweet" target="_blank">tweet yours</a>?)
</div>
</div>
<div id="control-right">
<div id="control-right-1">
<a id="control-timer"></a>
<a id="control-fast"></a>
</div>
<div id="control-right-2">
Cash $<span id="control-cash">35</span><br>
Lives <span id="control-lives">10</span><br>
Wave #<span id="control-wave">1</span>
</div>
<div id="control-right-3">
<span id="control-fps">60</span>FPS<br>
<a id="control-pause">Pause</a><br>
<a href="">Reset</a>
</div>
</div>
</div>
<script src="scripts/utils.js"></script>
<script src="scripts/defs.js"></script>
<script src="scripts/game.js"></script>
<script src="scripts/ui.js"></script>
</body>
</html>