roozbehk/battleship
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Both Board Have Random Selection -Stiil working on ai

Browse Source
This commit is contained in:
roozbehk 2022-08-13 18:42:08 -04:00
parent ebab446f47
commit 188e28159a
4 changed files with 465 additions and 1176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -123,13 +123,13 @@ td {
} }
#cruiser { #cruiser {
width: fit-content; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#destroyer { #destroyer {
width: fit-content; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -353,10 +353,37 @@ td {
background-size: 101% 101%; background-size: 101% 101%;
transform: rotate(-270deg); transform: rotate(-270deg);
color: darkblue
} }
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
.ship {
background-color: red;
}
.placed-ship {
background-color: green;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.darkblue {
background-color: darkblue;
}
.blue {
background-color: blue;
}

BIN
img/e0d32fe8c7dcec37402e77bb56ee90c3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

510
index.html
View File

@ -57,7 +57,7 @@
</div> </div>
<div id="player-table-stat" class="stats">player Table</div> <div id="player-table-stat" class="stats">player Table</div>
<div> <div>
<table class="player-table disable" id="player-table"> <table class="player-table" id="player-table">
<tr> <tr>
<th></th> <th></th>
<th>1</th> <th>1</th>
@ -74,305 +74,315 @@
</tr> </tr>
<tr> <tr>
<th class="headers">A</th> <th class="headers">A</th>
<td class="player-cell" id="100"></td> <td class="player-cell" id="PA1"></td>
<td class="player-cell" id="101"></td> <td class="player-cell" id="PA2"></td>
<td class="player-cell" id="102"></td> <td class="player-cell" id="PA3"></td>
<td class="player-cell" id="103"></td> <td class="player-cell" id="PA4"></td>
<td class="player-cell" id="104"></td> <td class="player-cell" id="PA5"></td>
<td class="player-cell" id="105"></td> <td class="player-cell" id="PA6"></td>
<td class="player-cell" id="106"></td> <td class="player-cell" id="PA7"></td>
<td class="player-cell" id="107"></td> <td class="player-cell" id="PA8"></td>
<td class="player-cell" id="108"></td> <td class="player-cell" id="PA9"></td>
<td class="player-cell" id="109"></td> <td class="player-cell" id="PA10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">B</th> <th class="headers">B</th>
<td class="player-cell" id="110"></td> <td class="player-cell" id="PB1"></td>
<td class="player-cell" id="111"></td> <td class="player-cell" id="PB2"></td>
<td class="player-cell" id="112"></td> <td class="player-cell" id="PB3"></td>
<td class="player-cell" id="113"></td> <td class="player-cell" id="PB4"></td>
<td class="player-cell" id="114"></td> <td class="player-cell" id="PB5"></td>
<td class="player-cell" id="115"></td> <td class="player-cell" id="PB6"></td>
<td class="player-cell" id="116"></td> <td class="player-cell" id="PB7"></td>
<td class="player-cell" id="117"></td> <td class="player-cell" id="PB8"></td>
<td class="player-cell" id="118"></td> <td class="player-cell" id="PB9"></td>
<td class="player-cell" id="119"></td> <td class="player-cell" id="PB10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">C</th> <th class="headers">C</th>
<td class="player-cell" id="120"></td> <td class="player-cell" id="PC1"></td>
<td class="player-cell" id="121"></td> <td class="player-cell" id="PC2"></td>
<td class="player-cell" id="122"></td> <td class="player-cell" id="PC3"></td>
<td class="player-cell" id="123"></td> <td class="player-cell" id="PC4"></td>
<td class="player-cell" id="124"></td> <td class="player-cell" id="PC5"></td>
<td class="player-cell" id="125"></td> <td class="player-cell" id="PC6"></td>
<td class="player-cell" id="126"></td> <td class="player-cell" id="PC7"></td>
<td class="player-cell" id="127"></td> <td class="player-cell" id="PC8"></td>
<td class="player-cell" id="128"></td> <td class="player-cell" id="PC9"></td>
<td class="player-cell" id="129"></td> <td class="player-cell" id="PC10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">D</th> <th class="headers">D</th>
<td class="player-cell" id="130"></td> <td class="player-cell" id="PD1"></td>
<td class="player-cell" id="131"></td> <td class="player-cell" id="PD2"></td>
<td class="player-cell" id="132"></td> <td class="player-cell" id="PD3"></td>
<td class="player-cell" id="133"></td> <td class="player-cell" id="PD4"></td>
<td class="player-cell" id="134"></td> <td class="player-cell" id="PD5"></td>
<td class="player-cell" id="135"></td> <td class="player-cell" id="PD6"></td>
<td class="player-cell" id="136"></td> <td class="player-cell" id="PD7"></td>
<td class="player-cell" id="137"></td> <td class="player-cell" id="PD8"></td>
<td class="player-cell" id="138"></td> <td class="player-cell" id="PD9"></td>
<td class="player-cell" id="139"></td> <td class="player-cell" id="PD10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">E</th> <th class="headers">E</th>
<td class="player-cell" id="140"></td> <td class="player-cell" id="PE1"></td>
<td class="player-cell" id="141"></td> <td class="player-cell" id="PE2"></td>
<td class="player-cell" id="142"></td> <td class="player-cell" id="PE3"></td>
<td class="player-cell" id="143"></td> <td class="player-cell" id="PE4"></td>
<td class="player-cell" id="144"></td> <td class="player-cell" id="PE5"></td>
<td class="player-cell" id="145"></td> <td class="player-cell" id="PE6"></td>
<td class="player-cell" id="146"></td> <td class="player-cell" id="PE7"></td>
<td class="player-cell" id="147"></td> <td class="player-cell" id="PE8"></td>
<td class="player-cell" id="148"></td> <td class="player-cell" id="PE9"></td>
<td class="player-cell" id="149"></td> <td class="player-cell" id="PE10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">F</th> <th class="headers">F</th>
<td class="player-cell" id="150"></td> <td class="player-cell" id="PF1"></td>
<td class="player-cell" id="151"></td> <td class="player-cell" id="PF2"></td>
<td class="player-cell" id="152"></td> <td class="player-cell" id="PF3"></td>
<td class="player-cell" id="153"></td> <td class="player-cell" id="PF4"></td>
<td class="player-cell" id="154"></td> <td class="player-cell" id="PF5"></td>
<td class="player-cell" id="155"></td> <td class="player-cell" id="PF6"></td>
<td class="player-cell" id="156"></td> <td class="player-cell" id="PF7"></td>
<td class="player-cell" id="157"></td> <td class="player-cell" id="PF8"></td>
<td class="player-cell" id="158"></td> <td class="player-cell" id="PF9"></td>
<td class="player-cell" id="159"></td> <td class="player-cell" id="PF10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">G</th> <th class="headers">G</th>
<td class="player-cell" id="160"></td> <td class="player-cell" id="PG1"></td>
<td class="player-cell" id="161"></td> <td class="player-cell" id="PG2"></td>
<td class="player-cell" id="162"></td> <td class="player-cell" id="PG3"></td>
<td class="player-cell" id="163"></td> <td class="player-cell" id="PG4"></td>
<td class="player-cell" id="164"></td> <td class="player-cell" id="PG5"></td>
<td class="player-cell" id="165"></td> <td class="player-cell" id="PG6"></td>
<td class="player-cell" id="166"></td> <td class="player-cell" id="PG7"></td>
<td class="player-cell" id="167"></td> <td class="player-cell" id="PG8"></td>
<td class="player-cell" id="168"></td> <td class="player-cell" id="PG9"></td>
<td class="player-cell" id="169"></td> <td class="player-cell" id="PG10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">H</th> <th class="headers">H</th>
<td class="player-cell" id="170"></td> <td class="player-cell" id="PH1"></td>
<td class="player-cell" id="171"></td> <td class="player-cell" id="PH2"></td>
<td class="player-cell" id="172"></td> <td class="player-cell" id="PH3"></td>
<td class="player-cell" id="173"></td> <td class="player-cell" id="PH4"></td>
<td class="player-cell" id="174"></td> <td class="player-cell" id="PH5"></td>
<td class="player-cell" id="175"></td> <td class="player-cell" id="PH6"></td>
<td class="player-cell" id="176"></td> <td class="player-cell" id="PH7"></td>
<td class="player-cell" id="177"></td> <td class="player-cell" id="PH8"></td>
<td class="player-cell" id="178"></td> <td class="player-cell" id="PH9"></td>
<td class="player-cell" id="179"></td> <td class="player-cell" id="PH10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">I</th> <th class="headers">I</th>
<td class="player-cell" id="180"></td> <td class="player-cell" id="PI1"></td>
<td class="player-cell" id="181"></td> <td class="player-cell" id="PI2"></td>
<td class="player-cell" id="182"></td> <td class="player-cell" id="PI3"></td>
<td class="player-cell" id="183"></td> <td class="player-cell" id="PI4"></td>
<td class="player-cell" id="184"></td> <td class="player-cell" id="PI5"></td>
<td class="player-cell" id="185"></td> <td class="player-cell" id="PI6"></td>
<td class="player-cell" id="186"></td> <td class="player-cell" id="PI7"></td>
<td class="player-cell" id="187"></td> <td class="player-cell" id="PI8"></td>
<td class="player-cell" id="188"></td> <td class="player-cell" id="PI9"></td>
<td class="player-cell" id="189"></td> <td class="player-cell" id="PI10"></td>
</tr> </tr>
<tr> <tr>
<th class="headers">J</th> <th class="headers">J</th>
<td class="player-cell" id="190"></td> <td class="player-cell" id="PJ1"></td>
<td class="player-cell" id="191"></td> <td class="player-cell" id="PJ2"></td>
<td class="player-cell" id="192"></td> <td class="player-cell" id="PJ3"></td>
<td class="player-cell" id="193"></td> <td class="player-cell" id="PJ4"></td>
<td class="player-cell" id="194"></td> <td class="player-cell" id="PJ5"></td>
<td class="player-cell" id="195"></td> <td class="player-cell" id="PJ6"></td>
<td class="player-cell" id="196"></td> <td class="player-cell" id="PJ7"></td>
<td class="player-cell" id="197"></td> <td class="player-cell" id="PJ8"></td>
<td class="player-cell" id="198"></td> <td class="player-cell" id="PJ9"></td>
<td class="player-cell" id="199"></td> <td class="player-cell" id="PJ10"></td>
</tr> </tr>
</table> </table>
</div> </div>
<div id="computer-table-stat" class="stats">computer table</div> <div id="computer-table-stat" class="stats">computer table</div>
<div> <div>
<table class="computer-tabel disable" id="computer-table "> <div>
<tr> <table class="computer-table" id="computer-table">
<th></th> <tr>
<th>1</th> <th></th>
<th>2</th> <th>1</th>
<th>3</th> <th>2</th>
<th>4</th> <th>3</th>
<th>5</th> <th>4</th>
<th>6</th> <th>5</th>
<th>7</th> <th>6</th>
<th>8</th> <th>7</th>
<th>9</th> <th>8</th>
<th>10</th> <th>9</th>
<th>10</th>
</tr> </tr>
<tr> <tr>
<th class="headers">A</th> <th class="headers">A</th>
<td class="computer-cell" id="C-A-1"></td> <td class="computer-cell" id="CA1"></td>
<td class="computer-cell" id="C-A-2"></td> <td class="computer-cell" id="CA2"></td>
<td class="computer-cell" id="C-A-3"></td> <td class="computer-cell" id="CA3"></td>
<td class="computer-cell" id="C-A-4"></td> <td class="computer-cell" id="CA4"></td>
<td class="computer-cell" id="C-A-5"></td> <td class="computer-cell" id="CA5"></td>
<td class="computer-cell" id="C-A-6"></td> <td class="computer-cell" id="CA6"></td>
<td class="computer-cell" id="C-A-7"></td> <td class="computer-cell" id="CA7"></td>
<td class="computer-cell" id="C-A-8"></td> <td class="computer-cell" id="CA8"></td>
<td class="computer-cell" id="C-A-9"></td> <td class="computer-cell" id="CA9"></td>
<td class="computer-cell" id="C-A-10"></td> <td class="computer-cell" id="CA10"></td>
</tr>
<tr> </tr>
<th class="headers">B</th> <tr>
<td class="computer-cell" id="C-B-1"></td> <th class="headers">B</th>
<td class="computer-cell" id="C-B-2"></td> <td class="computer-cell" id="CB1"></td>
<td class="computer-cell" id="C-B-3"></td> <td class="computer-cell" id="CB2"></td>
<td class="computer-cell" id="C-B-4"></td> <td class="computer-cell" id="CB3"></td>
<td class="computer-cell" id="C-B-5"></td> <td class="computer-cell" id="CB4"></td>
<td class="computer-cell" id="C-B-6"></td> <td class="computer-cell" id="CB5"></td>
<td class="computer-cell" id="C-B-7"></td> <td class="computer-cell" id="CB6"></td>
<td class="computer-cell" id="C-B-8"></td> <td class="computer-cell" id="CB7"></td>
<td class="computer-cell" id="C-B-9"></td> <td class="computer-cell" id="CB8"></td>
<td class="computer-cell" id="C-B-10"></td> <td class="computer-cell" id="CB9"></td>
</tr> <td class="computer-cell" id="CB10"></td>
<tr>
<th class="headers">C</th> </tr>
<td class="computer-cell" id="C-C-1"></td> <tr>
<td class="computer-cell" id="C-C-2"></td> <th class="headers">C</th>
<td class="computer-cell" id="C-C-3"></td> <td class="computer-cell" id="CC1"></td>
<td class="computer-cell" id="C-C-4"></td> <td class="computer-cell" id="CC2"></td>
<td class="computer-cell" id="C-C-5"></td> <td class="computer-cell" id="CC3"></td>
<td class="computer-cell" id="C-C-6"></td> <td class="computer-cell" id="CC4"></td>
<td class="computer-cell" id="C-C-7"></td> <td class="computer-cell" id="CC5"></td>
<td class="computer-cell" id="C-C-8"></td> <td class="computer-cell" id="CC6"></td>
<td class="computer-cell" id="C-C-9"></td> <td class="computer-cell" id="CC7"></td>
<td class="computer-cell" id="C-C-10"></td> <td class="computer-cell" id="CC8"></td>
</tr> <td class="computer-cell" id="CC9"></td>
<tr> <td class="computer-cell" id="CC10"></td>
<th class="headers">D</th>
<td class="computer-cell" id="C-D-1"></td> </tr>
<td class="computer-cell" id="C-D-2"></td> <tr>
<td class="computer-cell" id="C-D-3"></td> <th class="headers">D</th>
<td class="computer-cell" id="C-D-4"></td> <td class="computer-cell" id="CD1"></td>
<td class="computer-cell" id="C-D-5"></td> <td class="computer-cell" id="CD2"></td>
<td class="computer-cell" id="C-D-6"></td> <td class="computer-cell" id="CD3"></td>
<td class="computer-cell" id="C-D-7"></td> <td class="computer-cell" id="CD4"></td>
<td class="computer-cell" id="C-D-8"></td> <td class="computer-cell" id="CD5"></td>
<td class="computer-cell" id="C-D-9"></td> <td class="computer-cell" id="CD6"></td>
<td class="computer-cell" id="C-D-10"></td> <td class="computer-cell" id="CD7"></td>
</tr> <td class="computer-cell" id="CD8"></td>
<tr> <td class="computer-cell" id="CD9"></td>
<th class="headers">E</th> <td class="computer-cell" id="CD10"></td>
<td class="computer-cell" id="C-E-1"></td>
<td class="computer-cell" id="C-E-2"></td> </tr>
<td class="computer-cell" id="C-E-3"></td> <tr>
<td class="computer-cell" id="C-E-4"></td> <th class="headers">E</th>
<td class="computer-cell" id="C-E-5"></td> <td class="computer-cell" id="CE1"></td>
<td class="computer-cell" id="C-E-6"></td> <td class="computer-cell" id="CE2"></td>
<td class="computer-cell" id="C-E-7"></td> <td class="computer-cell" id="CE3"></td>
<td class="computer-cell" id="C-E-8"></td> <td class="computer-cell" id="CE4"></td>
<td class="computer-cell" id="C-E-9"></td> <td class="computer-cell" id="CE5"></td>
<td class="computer-cell" id="C-E-10"></td> <td class="computer-cell" id="CE6"></td>
</tr> <td class="computer-cell" id="CE7"></td>
<tr> <td class="computer-cell" id="CE8"></td>
<th class="headers">F</th> <td class="computer-cell" id="CE9"></td>
<td class="computer-cell" id="C-F-1"></td> <td class="computer-cell" id="CE10"></td>
<td class="computer-cell" id="C-F-2"></td>
<td class="computer-cell" id="C-F-3"></td> </tr>
<td class="computer-cell" id="C-F-4"></td> <tr>
<td class="computer-cell" id="C-F-5"></td> <th class="headers">F</th>
<td class="computer-cell" id="C-F-6"></td> <td class="computer-cell" id="CF1"></td>
<td class="computer-cell" id="C-F-7"></td> <td class="computer-cell" id="CF2"></td>
<td class="computer-cell" id="C-F-8"></td> <td class="computer-cell" id="CF3"></td>
<td class="computer-cell" id="C-F-9"></td> <td class="computer-cell" id="CF4"></td>
<td class="computer-cell" id="C-F-10"></td> <td class="computer-cell" id="CF5"></td>
</tr> <td class="computer-cell" id="CF6"></td>
<tr> <td class="computer-cell" id="CF7"></td>
<th class="headers">G</th> <td class="computer-cell" id="CF8"></td>
<td class="computer-cell" id="C-G-1"></td> <td class="computer-cell" id="CF9"></td>
<td class="computer-cell" id="C-G-2"></td> <td class="computer-cell" id="CF10"></td>
<td class="computer-cell" id="C-G-3"></td>
<td class="computer-cell" id="C-G-4"></td> </tr>
<td class="computer-cell" id="C-G-5"></td> <tr>
<td class="computer-cell" id="C-G-6"></td> <th class="headers">G</th>
<td class="computer-cell" id="C-G-7"></td> <td class="computer-cell" id="CG1"></td>
<td class="computer-cell" id="C-G-8"></td> <td class="computer-cell" id="CG2"></td>
<td class="computer-cell" id="C-G-9"></td> <td class="computer-cell" id="CG3"></td>
<td class="computer-cell" id="C-G-10"></td> <td class="computer-cell" id="CG4"></td>
</tr> <td class="computer-cell" id="CG5"></td>
<tr> <td class="computer-cell" id="CG6"></td>
<th class="headers">H</th> <td class="computer-cell" id="CG7"></td>
<td class="computer-cell" id="C-H-1"></td> <td class="computer-cell" id="CG8"></td>
<td class="computer-cell" id="C-H-2"></td> <td class="computer-cell" id="CG9"></td>
<td class="computer-cell" id="C-H-3"></td> <td class="computer-cell" id="CG10"></td>
<td class="computer-cell" id="C-H-4"></td>
<td class="computer-cell" id="C-H-5"></td> </tr>
<td class="computer-cell" id="C-H-6"></td> <tr>
<td class="computer-cell" id="C-H-7"></td>
<td class="computer-cell" id="C-H-8"></td> <th class="headers">H</th>
<td class="computer-cell" id="C-H-9"></td> <td class="computer-cell" id="CH1"></td>
<td class="computer-cell" id="C-H-10"></td> <td class="computer-cell" id="CH2"></td>
</tr> <td class="computer-cell" id="CH3"></td>
<tr> <td class="computer-cell" id="CH4"></td>
<th class="headers">I</th> <td class="computer-cell" id="CH5"></td>
<td class="computer-cell" id="C-I-1"></td> <td class="computer-cell" id="CH6"></td>
<td class="computer-cell" id="C-I-2"></td> <td class="computer-cell" id="CH7"></td>
<td class="computer-cell" id="C-I-3"></td> <td class="computer-cell" id="CH8"></td>
<td class="computer-cell" id="C-I-4"></td> <td class="computer-cell" id="CH9"></td>
<td class="computer-cell" id="C-I-5"></td> <td class="computer-cell" id="CH10"></td>
<td class="computer-cell" id="C-I-6"></td>
<td class="computer-cell" id="C-I-7"></td> </tr>
<td class="computer-cell" id="C-I-8"></td> <tr>
<td class="computer-cell" id="C-I-9"></td> <th class="headers">I</th>
<td class="computer-cell" id="C-I-10"></td> <td class="computer-cell" id="CI1"></td>
</tr> <td class="computer-cell" id="CI2"></td>
<tr> <td class="computer-cell" id="CI3"></td>
<th class="headers">J</th> <td class="computer-cell" id="CI4"></td>
<td class="computer-cell" id="C-J-1"></td> <td class="computer-cell" id="CI5"></td>
<td class="computer-cell" id="C-J-2"></td> <td class="computer-cell" id="CI6"></td>
<td class="computer-cell" id="C-J-3"></td> <td class="computer-cell" id="CI7"></td>
<td class="computer-cell" id="C-J-4"></td> <td class="computer-cell" id="CI8"></td>
<td class="computer-cell" id="C-J-5"></td> <td class="computer-cell" id="CI9"></td>
<td class="computer-cell" id="C-J-6"></td> <td class="computer-cell" id="CI10"></td>
<td class="computer-cell" id="C-J-7"></td>
<td class="computer-cell" id="C-J-8"></td> </tr>
<td class="computer-cell" id="C-J-9"></td> <tr>
<td class="computer-cell" id="C-J-10"></td> <th class="headers">J</th>
</tr> <td class="computer-cell" id="CJ1"></td>
</table> <td class="computer-cell" id="CJ2"></td>
</table> <td class="computer-cell" id="CJ3"></td>
<td class="computer-cell" id="CJ4"></td>
<td class="computer-cell" id="CJ5"></td>
<td class="computer-cell" id="CJ6"></td>
<td class="computer-cell" id="CJ7"></td>
<td class="computer-cell" id="CJ8"></td>
<td class="computer-cell" id="CJ9"></td>
<td class="computer-cell" id="CJ10"></td>
</tr>
</table>
</div>
</div> </div>
<!-- <div id="computer-ships-stats" class="stats" >computer ships stat</div> <!-- <div id="computer-ships-stats" class="stats" >computer ships stat</div>
<div id="computer-ships">computer ships</div> --> <div id="computer-ships">computer ships</div> -->
</main> </main>
<footer> <footer>
<div> <div>
<button id="start-game-button">START GAME</button> <button id="player-random-game-button">Player Random</button>
<button id="restart-game-button" class="hidden">RESTART</button>
</div>
</footer> </footer>
</body> </body>

1096
script/script.js
View File

File diff suppressed because it is too large Load Diff