-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (86 loc) · 3.61 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tower Defense</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="tower-defense group">
<section class="td-splash" id="td-splash">
<h1>SpaceWorms TD</h1>
<h3>Instructions:</h3>
<ul class="instructions-list">
<li>The space worms are coming!</li>
<li>Select a tile and click on it to build towers on it.</li>
<li>Don't let the enemies reach the end of the path!</li>
<li>If your lives run out, you lose!</li>
</ul>
<button id="start-game">play</button>
</section>
<canvas id="canvas"></canvas>
<section id="game-ui" class="game-ui-container">
<section class="game-ui">
<h1>SpaceWorms TD</h1>
<ul class="game-ui-list">
<li>Wave: <span id="waves"></span></li>
<li>Gold: <span id="gold"></span></li>
<li>Lives left: <span id="lives">20</span></li>
</ul>
<span id="more-resources">You Need More Gold!</span>
<section id="tower-options">
<figure id="buy-lazer-tower">
<small class="gold-cost">gold: 100</small>
<img src="assets/images/lazerTowerIcon.png" alt="" />
<p>Lazer Tower</p>
</figure>
<figure id="buy-bunker">
<small class="gold-cost">gold: 100</small>
<img src="assets/images/bunkerIcon.png" alt="" />
<p>Bunker</p>
</figure>
</section>
</section>
</section>
<section class="modal-container" id="paused">
<section class="modal">
<h2>Game Paused</h2>
<button id="unpause-game">Unpause</button>
</section>
</section>
<section class="modal-container" id="game-over">
<section class="modal">
<h2>Defeat</h2>
<button id="restart-game">Restart</button>
</section>
</section>
<section class="waves-modal" id="waves-modal">
<h2>Wave: <span id="wave-number"></span></h2>
</section>
</section>
<script type="application/javascript" src="lib/map.js"></script>
<script type="application/javascript" src="lib/tile.js"></script>
<script type="application/javascript" src="lib/tower.js"></script>
<script type="application/javascript" src="lib/game.js"></script>
<script type="application/javascript" src="lib/gameView.js"></script>
<script type="application/javascript" src="lib/wave.js"></script>
<script type="application/javascript" src="lib/enemy.js"></script>
<script type="application/javascript" src="lib/dyingEnemy.js"></script>
<script type="application/javascript" src="lib/tower.js"></script>
<script type="application/javascript" src="lib/lazer.js"></script>
<script type="application/javascript" src="lib/bullet.js"></script>
<script type="application/javascript">
document.getElementById("start-game").addEventListener("click", function(){
document.getElementById("td-splash").style.display = 'none';
document.getElementById("game-ui").style.display = 'block';
var canvasEl = document.getElementsByTagName("canvas")[0];
canvasEl.width = towerDefense.Game.DIM_X;
canvasEl.height = towerDefense.Game.DIM_Y;
var ctx = canvasEl.getContext("2d");
this.towerDefense.projectiles = [];
var game = this.towerDefense.game = new towerDefense.Game();
new towerDefense.GameView(game, ctx).start();
}.bind(this))
</script>
</body>
</html>