-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (151 loc) · 9.66 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
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset = "utf-8">
<title>Battleship</title>
<link rel="stylesheet" type="text/css" href="css/battleship.css">
</head>
<body>
<div id="board">
<!-- divs that I use as a window -->
<div id="start-game" class="message">
<h1>SHALL WE PLAY A GAME?</h1>
<div class="myButton" id="yes">Yes</div>
<div class="myButton" id="no">No</div>
</div>
<div id="fine" class="message display-none">
<h1>Fine</h1>
</div>
<div id="init" class="message display-none">
<h1>Enter your name</h1>
<input type="text" id="css-input" value="player">
</div>
<div id="finish-game" class="message display-none">
<div class="myButton" id="ok">Ok</div>
</div>
<!-- /that I use as a window -->
<div class="display-none" id="battlefield">
<!-- Message area -->
<div id="messageArea"></div>
<!-- I use this tables as gird and cells for battleship -->
<table id="player">
<tr>
<td class="letter"></td><td class="letter">A</td><td class="letter">B</td><td class="letter">C</td><td class="letter">D</td><td class="letter">E</td><td class="letter">F</td><td class="letter">G</td><td class="letter">H</td><td class="letter">I</td><td class="letter">L</td>
</tr>
<tr>
<td class="numbers">1</td>
<td id="200" class="cell"></td><td id="201" class = "cell" ></td><td id="202" class = "cell" ></td><td id="203" class = "cell" ></td><td id="204" class = "cell" ></td>
<td id="205" class="cell"></td><td id="206" class = "cell" ></td><td id="207" class = "cell" ></td><td id="208" class = "cell" ></td><td id="209" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">2</td>
<td id="210" class="cell"></td><td id="211" class = "cell" ></td><td id="212" class = "cell" ></td><td id="213" class = "cell" ></td><td id="214" class = "cell" ></td>
<td id="215" class="cell"></td><td id="216" class = "cell" ></td><td id="217" class = "cell" ></td><td id="218" class = "cell" ></td><td id="219" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">3</td>2
<td id="220" class="cell"></td><td id="221" class = "cell" ></td><td id="222" class = "cell" ></td><td id="223" class = "cell" ></td><td id="224" class = "cell" ></td>
<td id="225" class="cell"></td><td id="226" class = "cell" ></td><td id="227" class = "cell" ></td><td id="228" class = "cell" ></td><td id="229" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">4</td>
<td id="230" class="cell"></td><td id="231" class = "cell" ></td><td id="232" class = "cell" ></td><td id="233" class = "cell" ></td><td id="234" class = "cell" ></td>
<td id="235" class="cell"></td><td id="236" class = "cell" ></td><td id="237" class = "cell" ></td><td id="238" class = "cell" ></td><td id="239" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">5</td>
<td id="240" class="cell"></td><td id="241" class = "cell" ></td><td id="242" class = "cell" ></td><td id="243" class = "cell" ></td><td id="244" class = "cell" ></td>
<td id="245" class="cell"></td><td id="246" class = "cell" ></td><td id="247" class = "cell" ></td><td id="248" class = "cell" ></td><td id="249" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">6</td>
<td id="250" class="cell"></td><td id="251" class = "cell" ></td><td id="252" class = "cell" ></td><td id="253" class = "cell" ></td><td id="254" class = "cell" ></td>
<td id="255" class="cell"></td><td id="256" class = "cell" ></td><td id="257" class = "cell" ></td><td id="258" class = "cell" ></td><td id="259" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">7</td>
<td id="260" class="cell"></td><td id="261" class = "cell" ></td><td id="262" class = "cell" ></td><td id="263" class = "cell" ></td><td id="264" class = "cell" ></td>
<td id="265" class="cell"></td><td id="266" class = "cell" ></td><td id="267" class = "cell" ></td><td id="268" class = "cell" ></td><td id="269" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">8</td>
<td id="270" class = "cell" ></td><td id="271" class = "cell" ></td><td id="272" class = "cell" ></td><td id="273" class = "cell" ></td><td id="274" class = "cell" ></td>
<td id="275" class = "cell" ></td><td id="276" class = "cell" ></td><td id="277" class = "cell" ></td><td id="278" class = "cell" ></td><td id="279" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">9</td>
<td id="280" class = "cell" ></td><td id="281" class = "cell" ></td><td id="282" class = "cell" ></td><td id="283" class = "cell" ></td><td id="284" class = "cell" ></td>
<td id="285" class = "cell" ></td><td id="286" class = "cell" ></td><td id="287" class = "cell" ></td><td id="288" class = "cell" ></td><td id="289" class = "cell" ></td>
</tr>
<tr>
<td class="numbers">10</td>
<td id="290" class = "cell" ></td><td id="291" class = "cell" ></td><td id="292" class = "cell" ></td><td id="293" class = "cell" ></td><td id="294" class = "cell" ></td>
<td id="295" class = "cell" ></td><td id="296" class = "cell" ></td><td id="297" class = "cell" ></td><td id="298" class = "cell" ></td><td id="299" class = "cell" ></td>
</tr>
</table>
<!-- player side name -->
<div id="player-name"><h2>Player</h2></div>
<table id="computer">
<tr class="letters">
<td class="letter"></td><td class="letter">A</td><td class="letter">B</td><td class="letter">C</td><td class="letter">D</td><td class="letter">E</td><td class="letter">F</td><td class="letter">G</td><td class="letter">H</td><td class="letter">I</td><td class="letter">L</td>
</tr>
<tr>
<td class="numbers">1</td>
<td class = "cell "id="100"></td><td class = "cell "id="101"></td><td class = "cell "id="102"></td><td class = "cell "id="103"></td><td class = "cell "id="104"></td>
<td class = "cell "id="105"></td><td class = "cell "id="106"></td><td class = "cell "id="107"></td><td class = "cell "id="108"></td><td class = "cell "id="109"></td>
</tr>
<tr>
<td class="numbers">2</td>
<td class = "cell "id="110"></td><td class = "cell "id="111"></td><td class = "cell "id="112"></td><td class = "cell "id="113"></td><td class = "cell "id="114"></td>
<td class = "cell "id="115"></td><td class = "cell "id="116"></td><td class = "cell "id="117"></td><td class = "cell "id="118"></td><td class = "cell "id="119"></td>
</tr>
<tr>
<td class="numbers">3</td>
<td class = "cell "id="120"></td><td class = "cell "id="121"></td><td class = "cell "id="122"></td><td class = "cell "id="123"></td><td class = "cell "id="124"></td>
<td class = "cell "id="125"></td><td class = "cell "id="126"></td><td class = "cell "id="127"></td><td class = "cell "id="128"></td><td class = "cell "id="129"></td>
</tr>
<tr>
<td class="numbers">4</td>
<td class = "cell "id="130"></td><td class = "cell "id="131"></td><td class = "cell "id="132"></td><td class = "cell "id="133"></td><td class = "cell "id="134"></td>
<td class = "cell "id="135"></td><td class = "cell "id="136"></td><td class = "cell "id="137"></td><td class = "cell "id="138"></td><td class = "cell "id="139"></td>
</tr>
<tr>
<td class="numbers">5</td>
<td class = "cell "id="140"></td><td class = "cell "id="141"></td><td class = "cell "id="142"></td><td class = "cell "id="143"></td><td class = "cell "id="144"></td>
<td class = "cell "id="145"></td><td class = "cell "id="146"></td><td class = "cell "id="147"></td><td class = "cell "id="148"></td><td class = "cell "id="149"></td>
</tr>
<tr>
<td class="numbers">6</td>
<td class = "cell "id="150"></td><td class = "cell "id="151"></td><td class = "cell "id="152"></td><td class = "cell "id="153"></td><td class = "cell "id="154"></td>
<td class = "cell "id="155"></td><td class = "cell "id="156"></td><td class = "cell "id="157"></td><td class = "cell "id="158"></td><td class = "cell "id="159"></td>
</tr>
<tr>
<td class="numbers">7</td>
<td class = "cell "id="160"></td><td class = "cell "id="161"></td><td class = "cell "id="162"></td><td class = "cell "id="163"></td><td class = "cell "id="164"></td>
<td class = "cell "id="165"></td><td class = "cell "id="166"></td><td class = "cell "id="167"></td><td class = "cell "id="168"></td><td class = "cell "id="169"></td>
</tr>
<tr>
<td class="numbers">8</td>
<td class = "cell "id="170"></td><td class = "cell "id="171"></td><td class = "cell "id="172"></td><td class = "cell "id="173"></td><td class = "cell "id="174"></td>
<td class = "cell "id="175"></td><td class = "cell "id="176"></td><td class = "cell "id="177"></td><td class = "cell "id="178"></td><td class = "cell "id="179"></td>
</tr>
<tr>
<td class="numbers">9</td>
<td class = "cell "id="180"></td><td class = "cell "id="181"></td><td class = "cell "id="182"></td><td class = "cell "id="183"></td><td class = "cell "id="184"></td>
<td class = "cell "id="185"></td><td class = "cell "id="186"></td><td class = "cell "id="187"></td><td class = "cell "id="188"></td><td class = "cell "id="189"></td>
</tr>
<tr>
<td class="numbers">10</td>
<td class = "cell "id="190"></td><td class = "cell "id="191"></td><td class = "cell "id="192"></td><td class = "cell "id="193"></td><td class = "cell "id="194"></td>
<td class = "cell "id="195"></td><td class = "cell "id="196"></td><td class = "cell "id="197"></td><td class = "cell "id="198"></td><td class = "cell "id="199"></td>
</tr>
</table>
<!-- /I use this tables as gird and cells for battleship -->
<!-- computer side name -->
<div id="wopr"><h2>WOPR</h2></div>
<div id="reset"><h2>RESET</h2></div>
</div>
</div>
<script src="js/battleship.js" type="text/javascript"></script>
</body>
</html>