-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.html
228 lines (224 loc) · 8.86 KB
/
page.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
<html>
<head>
<style>
#overlay {
z-index:9;
position:absolute;
background:white;
width:400px;
height:400px;
opacity:.9;
float:center;
padding: 0 200 200 200;
visibility:hidden;
}
.rowInput{opacity:1;z-index:10;padding:0px;cell-padding:0;border:0px;}
.inputText{color:white;}
.top-spacer {height:40%;}
.left-spacer{height:40%;width:18%;float:left;}
.table-container {float:left;position:relative;background:black;padding:4px}
</style>
<script src="lib/jquery.js"></script>
<script src="lib/raphael.js"></script>
<script src="lib/keycodes.js"></script>
<script src="misc.js"></script>
<script src="nanomunchers.js"></script>
<script src="boardview.js"></script>
<script src="playerview.js"></script>
<script src="muncherview.js"></script>
<script src="simulator.js"></script>
<script src="clipview.js"></script>
<script src="scoreview.js"></script>
<script src="endgameview.js"></script>
<script>
$(document).ready(function(){
GameUI.initialize()
});
function runGame() {
document.getElementById('overlay').style.visibility = 'hidden';
player1 = document.getElementById('_p1name').value;
player2 = document.getElementById('_p2name').value;
if(player1 == ''){
player1 = 'Player 1';
}
if(player2 == '') {
player2 = 'Player 2';
}
}
</script>
</head>
<body>
<div id="overlay">
<div class="top-spacer"></div>
<div id='_input'>
<div class="left-spacer"></div>
<div class="table-container">
<table cellpadding='0px' cellspacing='0' border='0px'>
<tr class='rowInput'>
<td>
<label for='_p1name' class='inputText'>Blue player's name: </label>
</td>
<td>
<input type='text' id='_p1name'></input>
</td>
</tr>
<tr class='rowInput'>
<td>
<label for='_p2name' class='inputText'>Green player's name:</label>
</td>
<td>
<input type='text' id='_p2name'></input>
</td>
</tr>
<tr class='rowInput'>
<td colspan=1></td>
<td>
<button id='btnStart' onclick='runGame()' style='background-color:lightred'>Start Game!</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="sounds">
<audio src="sounds/fire1.wav" autostart=false width=1 height=1 preload="auto" class="1" id="fire1" > </audio>
<audio src="sounds/fire1.wav" autostart=false width=1 height=1 preload="auto" class="1" id="fire1_"> </audio>
<audio src="sounds/short_fire2.wav" autostart=false width=1 height=1 preload="auto" class="1" id="fire2"> </audio>
<audio src="sounds/short_fire2.wav" autostart=false width=1 height=1 preload="auto" class="1" id="fire2_"> </audio>
</div>
<div id='game-screen'></div>
<div style="width: 600px">
<style>
p.h1{
font-size: 2em;
font-family: Times, serif;
padding: 0;
margin: 1.0em 0 -0.3em 0;
}
p.h2{
font-size: 1.66em;
font-family: Times, serif;
padding: 0;
margin: 0.8em 0 -0.3em 0;
}
p.h3{
font-size: 1.33em;
font-family: Times, serif;
padding: 0;
margin: 0.6em 0 -0.3em 0;
}
p.desc{
font-size: 1em;
font-family: Helvetica, sans-serif;
margin: 0.4em 0 0 0;
}
img.preview{
border: solid black 2px;
margin: 0.2em 0 0.2em 0;
}
</style>
<p class="h1">Instructions</p>
<p class="h2">Objective</p>
<p class="desc">
Try to "munch" as many of the
<span style="color: red; font-weight: bold;">toxic</span>
nodes as possible. As you maneuver your ship, the closest
<span style="color: red; font-weight: bold;">toxic</span>
node will become highlighted either in
<span style="color: blue; font-weight: bold;">blue</span> or
<span style="color: green; font-weight: bold;">green</span>
depending upon your player color. Fire a nanomuncher to begin
munching the graph!
</p>
<p class="desc">The game ends either when the entire graph is munched or
when both players have run out of nanomunchers and there are no longer
any nanomunchers active on the board. The winner is the player that
munched the most nodes.
</p>
<p class="h2">Gameplay</p>
<p class="h3">Blue Player</p>
<p class="desc">Control the
<span style="color: blue; font-weight: bold;">blue</span>
player using the keyboard.
</p>
<img class="preview" height="100px" src="images/blue_player_keys.png" />
<p class="desc">Maneuver the
<span style="color: blue; font-weight: bold;">blue</span>
ship using the keys
<span style="font-weight: bold">W</span>,
<span style="font-weight: bold">A</span>,
<span style="font-weight: bold">S</span>, and
<span style="font-weight: bold">D</span> and fire a nanomuncher using
<span style="font-weight: bold">SPACEBAR</span>.
</p>
<p class="h3">Green Player</p>
<p class="desc">Control the
<span style="color: green; font-weight: bold;">green</span>
player using the keyboard.
</p>
<img class="preview" height="100px" src="images/green_player_keys.png" />
<p class="desc">Maneuver the
<span style="color: green; font-weight: bold;">green</span>
ship using the keys
<span style="font-weight: bold">UP</span>,
<span style="font-weight: bold">LEFT</span>,
<span style="font-weight: bold">DOWN</span>, and
<span style="font-weight: bold">RIGHT</span> and fire a nanomuncher
using <span style="font-weight: bold">ENTER</span>.
</p>
<p class="h3">Clip</p>
<p class="desc">Watch your nanomuncher clip underneath your player
name to see how many nanomunchers remain. The nanomuncher at the bottom
of the clip is the next to be deployed. Its program instructions are
shown as the numbers
<span style="font-weight: bold">1</span>,
<span style="font-weight: bold">2</span>,
<span style="font-weight: bold">3</span>, and
<span style="font-weight: bold">4</span> indicating the order by which
the nanomuncher will move once deployed on the graph.
</p>
<p class="h2">Nanomunchers</p>
<p class="h3">Movement</p>
<p class="desc">Nanomunchers obey a simple program that gives priority to
each of the directions
<span style="font-weight: bold">up</span>,
<span style="font-weight: bold">down</span>,
<span style="font-weight: bold">left</span>, and
<span style="font-weight: bold">right</span>. Imagine that you are
standing in the middle of the intersection of two roads holding a
paper with the text "<em>D U L R</em>". This set of
instructions is guiding you to move to the next intersection by
checking in the order of <em>down</em>, then <em>up</em>,
then <em>left</em>, then <em>right</em>.
</p>
<img class="preview" width="125px" src="images/muncher_all_dir.png" />
<img class="preview" width="125px" src="images/muncher_move_south.png" />
<p class="desc"> The first direction that you find that is clear,
you move to it and remember where you left off. At the next
intersection, you begin searching for a move by starting from the next
instruction in the list so that if you moved <em>down</em> at the last
node, you will check <em>up</em>, then <em>left</em>, then
<em>right</em>, then <em>down</em> to make the next move.
</p>
<p class="desc">When there are no clear moves in all four directions,
the nanomuncher is deactivated as its work is complete.
</p>
<p class="h3">Conflicts</p>
<p class="desc">Nanomunchers cannot be fired onto munched nodes. When
two nanomunchers reach the same node, they are expired according to
the direction from which they arrived. The order of precedence for
conflicts is
<span style="font-weight: bold">up</span>, then
<span style="font-weight: bold">down</span>, then
<span style="font-weight: bold">left</span>, then
<span style="font-weight: bold">right</span>. For instance, if two
nanomunchers arrive at the same node with the first one using its
<em>left</em> instruction and the other its <em>down</em> instruction,
then the second one will prevail since it has a higher precedence.
Conflicts with newly spawned nanomunchers are always resolved such
that the newly spawned nanomuncher is destroyed by those existing
previously.
</p>
</div>
</body>
</html>