-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
139 lines (134 loc) · 3.47 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
<!DOCTYPE html>
<html>
<head>
<title>Tank wars: reversal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/socket.io/socket.io.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
background-color: #333;
text-align: center;
margin: 0;
padding: 0;
color:#fff;
}
#message {
position: absolute;
width: 200px;
border: 4px outset #333;
background-color: #999;
color:#000;
padding: 4px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari */
transform: translate(-50%,-50%);
}
.top_signs {
position: absolute;
left: 0;
color: #fff;
font-family: Arial, Helvetica, "Courier New";
font-weight: bold;
font-size: 0.8rem;
background-color:rgba(3, 3, 3, 0.1);
border: 1px dotted #000;
padding: 2px 6px 2px 6px;
}
#duration_div {
top: 0;
}
#sound_button {
top: 1.4rem;
cursor:pointer;
}
table {
border-collapse: collapse;
}
#lobby {
margin-top: 10px;
}
#lobby table, #lobby tr, #lobby th, #lobby td {
padding: 2px;
border: 1px dotted #666;
}
.play_again_button {
padding: 2px;
border: 3px outset #000;
background-color: #333;
text-decoration: none;
color: #fff;
}
</style>
<head>
<body id="body">
<div id="welcome">
<h1>Tank wars: reversal</h1>
<h2>Rules</h2>
<table align="center">
<tr>
<td>
<canvas id="showCanvas" width="100" height="100"></canvas>
</td>
<td>
<ol align="left">
<li>Arrows: move. Spacebar: shoot.</li>
<li>Shoot another tank's base (those blue and yellow square things) to conquer it.</li>
<li>Shoot another tank to swap colors.</li>
<li>The tank with the most bases wins.</li>
</ol>
</td>
</tr>
</table>
<hr>
<h2>Create game</h2>
<table align="center">
<tr>
<td>Players (2 to 10)</td>
<td>Width</td>
<td>Height</td>
<td>Player's bases</td>
<td>Duration in seconds</td>
<td>Your color</td>
</tr>
<tr>
<td><input type="text" value="4" id="c1"></td>
<td><input type="text" value="10" id="c2"></td>
<td><input type="text" value="10" id="c3"></td>
<td><input type="text" value="2" id="c4"></td>
<td><input type="text" value="60" id="c5"></td>
<td id="create_colors"></td>
<td>
<button onclick="create_game(
document.getElementById('c1').value,
document.getElementById('c2').value,
document.getElementById('c3').value,
document.getElementById('c4').value,
document.getElementById('c5').value,
document.getElementById('c6').value);">
Create game
</button>
</td>
</tr>
</table>
<hr>
<h2>Join game</h2>
<button onclick="refresh_games();">Refresh</button>
<div id="lobby">
</div>
</div>
<div id="message" style="display:none;"></div>
<div id="sound_button" class="top_signs" onclick="toggle_music();">Turn sound on</div>
<div id="duration_div" class="top_signs" style="display:none;">Time remaining: <span id="time_remaining"></span>s</div>
<canvas id="myCanvas" width="200" height="100" style="display:none;"></canvas>
<script type="text/javascript" src="loopfull.js"></script>
<script type="text/javascript" src="audio.js"></script>
<script type="text/javascript" src="graphics.js"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript" src="client.js"></script>
</body>
</html>