initial commit
This commit is contained in:
commit
ddb85b5298
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
362
css/style.css
Normal file
362
css/style.css
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
margin: 10px;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 10px;
|
||||
font-family: 'Bangers', cursive;
|
||||
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
}
|
||||
|
||||
.stats {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
|
||||
}
|
||||
|
||||
td {
|
||||
border-collapse: collapse;
|
||||
border: 2px solid black;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
#player-ships-stats {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/2;
|
||||
}
|
||||
|
||||
#player-table-stat {
|
||||
grid-row: 1/2;
|
||||
grid-column: 2/3;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#computer-table-stat {
|
||||
grid-row: 1/2;
|
||||
grid-column: 3/4;
|
||||
}
|
||||
|
||||
#computer-ships-stats {
|
||||
grid-row: 1/2;
|
||||
grid-column: 4/5;
|
||||
}
|
||||
|
||||
#player-ships {
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-image: url('/img/battleship-0.png');
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
#player-table {
|
||||
grid-row: 2/3;
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
#computer-table {
|
||||
grid-row: 2/3;
|
||||
grid-column: 3/4;
|
||||
}
|
||||
|
||||
#computer-ships {
|
||||
grid-row: 2/3;
|
||||
grid-column: 4/5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.computer-cell:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.player-cell:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#carrier {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
|
||||
#battleship {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#submarine {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#cruiser {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#destroyer {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#carrier-0 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/carrier-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#carrier-1 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/carrier-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
width: fit-content;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
#carrier-2 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/carrier-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
#carrier-3 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/carrier-3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
#carrier-4 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/carrier-4.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
#battleship-0 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/battleship-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#battleship-1 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/battleship-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#battleship-2 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/battleship-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#battleship-3 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background: url("/img/battleship-3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#submarine-0 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img//ubmarine-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#submarine-1 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/submarine-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#submarine-2 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/submarine-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#cruiser-0 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/cruiser-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#cruiser-1 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/cruiser-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#cruiser-2 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/cruiser-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#destroyer-0 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/destroyer-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#destroyer-1 {
|
||||
column-width: 45px;
|
||||
height: 45px;
|
||||
background-image: url("/img/destroyer-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
margin: 0;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.selected {
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.disable {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.background-down {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.background-right {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.background-up {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.background-left {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 101% 101%;
|
||||
transform: rotate(-270deg);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.invisible {
|
||||
visibility: ;
|
||||
}
|
||||
BIN
img/battleship-0.png
Normal file
BIN
img/battleship-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
BIN
img/battleship-1.png
Normal file
BIN
img/battleship-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
BIN
img/battleship-2.png
Normal file
BIN
img/battleship-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 821 KiB |
BIN
img/battleship-3.png
Normal file
BIN
img/battleship-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
BIN
img/carrier-0.png
Normal file
BIN
img/carrier-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
BIN
img/carrier-1.png
Normal file
BIN
img/carrier-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
BIN
img/carrier-2.png
Normal file
BIN
img/carrier-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
BIN
img/carrier-3.png
Normal file
BIN
img/carrier-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 534 KiB |
BIN
img/carrier-4.png
Normal file
BIN
img/carrier-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
BIN
img/cruiser-0.png
Normal file
BIN
img/cruiser-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
img/cruiser-1.png
Normal file
BIN
img/cruiser-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
img/cruiser-2.png
Normal file
BIN
img/cruiser-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
BIN
img/destroyer-0.png
Normal file
BIN
img/destroyer-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
BIN
img/destroyer-1.png
Normal file
BIN
img/destroyer-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 KiB |
BIN
img/submarine-0.png
Normal file
BIN
img/submarine-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
img/submarine-1.png
Normal file
BIN
img/submarine-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
img/submarine-2.png
Normal file
BIN
img/submarine-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
379
index.html
Normal file
379
index.html
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script defer src="script/script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div>
|
||||
<h1>BATTLE SHIP</h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main class="box">
|
||||
<div id="player-ships-stats" class="stats">player ships stat</div>
|
||||
<div id="player-ships">
|
||||
<div id="carrier" class="ships" draggable="true">
|
||||
<div id="carrier-0"></div>
|
||||
<div id="carrier-1"></div>
|
||||
<div id="carrier-2"></div>
|
||||
<div id="carrier-3"></div>
|
||||
<div id="carrier-4"></div>
|
||||
</div>
|
||||
<div id="battleship" class="ships" draggable="true">
|
||||
<div id="battleship-0"></div>
|
||||
<div id="battleship-1"></div>
|
||||
<div id="battleship-2"></div>
|
||||
<div id="battleship-3"></div>
|
||||
</div>
|
||||
<div id="submarine" class="ships" draggable="true">
|
||||
<div id="submarine-0"></div>
|
||||
<div id="submarine-1"></div>
|
||||
<div id="submarine-2"></div>
|
||||
</div>
|
||||
<div id="cruiser" class="ships" draggable="true">
|
||||
<div id="cruiser-0"></div>
|
||||
<div id="cruiser-1"></div>
|
||||
<div id="cruiser-2"></div>
|
||||
</div>
|
||||
<div id="destroyer" class="ships" draggable="true">
|
||||
<div id="destroyer-0"></div>
|
||||
<div id="destroyer-1"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="player-table-stat" class="stats">player Table</div>
|
||||
<div>
|
||||
<table class="player-table disable" id="player-table">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
<th>6</th>
|
||||
<th>7</th>
|
||||
<th>8</th>
|
||||
<th>9</th>
|
||||
<th>10</th>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">A</th>
|
||||
<td class="player-cell" id="100"></td>
|
||||
<td class="player-cell" id="101"></td>
|
||||
<td class="player-cell" id="102"></td>
|
||||
<td class="player-cell" id="103"></td>
|
||||
<td class="player-cell" id="104"></td>
|
||||
<td class="player-cell" id="105"></td>
|
||||
<td class="player-cell" id="106"></td>
|
||||
<td class="player-cell" id="107"></td>
|
||||
<td class="player-cell" id="108"></td>
|
||||
<td class="player-cell" id="109"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">B</th>
|
||||
<td class="player-cell" id="110"></td>
|
||||
<td class="player-cell" id="111"></td>
|
||||
<td class="player-cell" id="112"></td>
|
||||
<td class="player-cell" id="113"></td>
|
||||
<td class="player-cell" id="114"></td>
|
||||
<td class="player-cell" id="115"></td>
|
||||
<td class="player-cell" id="116"></td>
|
||||
<td class="player-cell" id="117"></td>
|
||||
<td class="player-cell" id="118"></td>
|
||||
<td class="player-cell" id="119"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">C</th>
|
||||
<td class="player-cell" id="120"></td>
|
||||
<td class="player-cell" id="121"></td>
|
||||
<td class="player-cell" id="122"></td>
|
||||
<td class="player-cell" id="123"></td>
|
||||
<td class="player-cell" id="124"></td>
|
||||
<td class="player-cell" id="125"></td>
|
||||
<td class="player-cell" id="126"></td>
|
||||
<td class="player-cell" id="127"></td>
|
||||
<td class="player-cell" id="128"></td>
|
||||
<td class="player-cell" id="129"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">D</th>
|
||||
<td class="player-cell" id="130"></td>
|
||||
<td class="player-cell" id="131"></td>
|
||||
<td class="player-cell" id="132"></td>
|
||||
<td class="player-cell" id="133"></td>
|
||||
<td class="player-cell" id="134"></td>
|
||||
<td class="player-cell" id="135"></td>
|
||||
<td class="player-cell" id="136"></td>
|
||||
<td class="player-cell" id="137"></td>
|
||||
<td class="player-cell" id="138"></td>
|
||||
<td class="player-cell" id="139"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">E</th>
|
||||
<td class="player-cell" id="140"></td>
|
||||
<td class="player-cell" id="141"></td>
|
||||
<td class="player-cell" id="142"></td>
|
||||
<td class="player-cell" id="143"></td>
|
||||
<td class="player-cell" id="144"></td>
|
||||
<td class="player-cell" id="145"></td>
|
||||
<td class="player-cell" id="146"></td>
|
||||
<td class="player-cell" id="147"></td>
|
||||
<td class="player-cell" id="148"></td>
|
||||
<td class="player-cell" id="149"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">F</th>
|
||||
<td class="player-cell" id="150"></td>
|
||||
<td class="player-cell" id="151"></td>
|
||||
<td class="player-cell" id="152"></td>
|
||||
<td class="player-cell" id="153"></td>
|
||||
<td class="player-cell" id="154"></td>
|
||||
<td class="player-cell" id="155"></td>
|
||||
<td class="player-cell" id="156"></td>
|
||||
<td class="player-cell" id="157"></td>
|
||||
<td class="player-cell" id="158"></td>
|
||||
<td class="player-cell" id="159"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">G</th>
|
||||
<td class="player-cell" id="160"></td>
|
||||
<td class="player-cell" id="161"></td>
|
||||
<td class="player-cell" id="162"></td>
|
||||
<td class="player-cell" id="163"></td>
|
||||
<td class="player-cell" id="164"></td>
|
||||
<td class="player-cell" id="165"></td>
|
||||
<td class="player-cell" id="166"></td>
|
||||
<td class="player-cell" id="167"></td>
|
||||
<td class="player-cell" id="168"></td>
|
||||
<td class="player-cell" id="169"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<th class="headers">H</th>
|
||||
<td class="player-cell" id="170"></td>
|
||||
<td class="player-cell" id="171"></td>
|
||||
<td class="player-cell" id="172"></td>
|
||||
<td class="player-cell" id="173"></td>
|
||||
<td class="player-cell" id="174"></td>
|
||||
<td class="player-cell" id="175"></td>
|
||||
<td class="player-cell" id="176"></td>
|
||||
<td class="player-cell" id="177"></td>
|
||||
<td class="player-cell" id="178"></td>
|
||||
<td class="player-cell" id="179"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">I</th>
|
||||
<td class="player-cell" id="180"></td>
|
||||
<td class="player-cell" id="181"></td>
|
||||
<td class="player-cell" id="182"></td>
|
||||
<td class="player-cell" id="183"></td>
|
||||
<td class="player-cell" id="184"></td>
|
||||
<td class="player-cell" id="185"></td>
|
||||
<td class="player-cell" id="186"></td>
|
||||
<td class="player-cell" id="187"></td>
|
||||
<td class="player-cell" id="188"></td>
|
||||
<td class="player-cell" id="189"></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">J</th>
|
||||
<td class="player-cell" id="190"></td>
|
||||
<td class="player-cell" id="191"></td>
|
||||
<td class="player-cell" id="192"></td>
|
||||
<td class="player-cell" id="193"></td>
|
||||
<td class="player-cell" id="194"></td>
|
||||
<td class="player-cell" id="195"></td>
|
||||
<td class="player-cell" id="196"></td>
|
||||
<td class="player-cell" id="197"></td>
|
||||
<td class="player-cell" id="198"></td>
|
||||
<td class="player-cell" id="199"></td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="computer-table-stat" class="stats">computer table</div>
|
||||
<div>
|
||||
<table class="computer-tabel disable" id="computer-table ">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>1</th>
|
||||
<th>2</th>
|
||||
<th>3</th>
|
||||
<th>4</th>
|
||||
<th>5</th>
|
||||
<th>6</th>
|
||||
<th>7</th>
|
||||
<th>8</th>
|
||||
<th>9</th>
|
||||
<th>10</th>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">A</th>
|
||||
<td class="computer-cell" id="C-A-1"></td>
|
||||
<td class="computer-cell" id="C-A-2"></td>
|
||||
<td class="computer-cell" id="C-A-3"></td>
|
||||
<td class="computer-cell" id="C-A-4"></td>
|
||||
<td class="computer-cell" id="C-A-5"></td>
|
||||
<td class="computer-cell" id="C-A-6"></td>
|
||||
<td class="computer-cell" id="C-A-7"></td>
|
||||
<td class="computer-cell" id="C-A-8"></td>
|
||||
<td class="computer-cell" id="C-A-9"></td>
|
||||
<td class="computer-cell" id="C-A-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">B</th>
|
||||
<td class="computer-cell" id="C-B-1"></td>
|
||||
<td class="computer-cell" id="C-B-2"></td>
|
||||
<td class="computer-cell" id="C-B-3"></td>
|
||||
<td class="computer-cell" id="C-B-4"></td>
|
||||
<td class="computer-cell" id="C-B-5"></td>
|
||||
<td class="computer-cell" id="C-B-6"></td>
|
||||
<td class="computer-cell" id="C-B-7"></td>
|
||||
<td class="computer-cell" id="C-B-8"></td>
|
||||
<td class="computer-cell" id="C-B-9"></td>
|
||||
<td class="computer-cell" id="C-B-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">C</th>
|
||||
<td class="computer-cell" id="C-C-1"></td>
|
||||
<td class="computer-cell" id="C-C-2"></td>
|
||||
<td class="computer-cell" id="C-C-3"></td>
|
||||
<td class="computer-cell" id="C-C-4"></td>
|
||||
<td class="computer-cell" id="C-C-5"></td>
|
||||
<td class="computer-cell" id="C-C-6"></td>
|
||||
<td class="computer-cell" id="C-C-7"></td>
|
||||
<td class="computer-cell" id="C-C-8"></td>
|
||||
<td class="computer-cell" id="C-C-9"></td>
|
||||
<td class="computer-cell" id="C-C-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">D</th>
|
||||
<td class="computer-cell" id="C-D-1"></td>
|
||||
<td class="computer-cell" id="C-D-2"></td>
|
||||
<td class="computer-cell" id="C-D-3"></td>
|
||||
<td class="computer-cell" id="C-D-4"></td>
|
||||
<td class="computer-cell" id="C-D-5"></td>
|
||||
<td class="computer-cell" id="C-D-6"></td>
|
||||
<td class="computer-cell" id="C-D-7"></td>
|
||||
<td class="computer-cell" id="C-D-8"></td>
|
||||
<td class="computer-cell" id="C-D-9"></td>
|
||||
<td class="computer-cell" id="C-D-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">E</th>
|
||||
<td class="computer-cell" id="C-E-1"></td>
|
||||
<td class="computer-cell" id="C-E-2"></td>
|
||||
<td class="computer-cell" id="C-E-3"></td>
|
||||
<td class="computer-cell" id="C-E-4"></td>
|
||||
<td class="computer-cell" id="C-E-5"></td>
|
||||
<td class="computer-cell" id="C-E-6"></td>
|
||||
<td class="computer-cell" id="C-E-7"></td>
|
||||
<td class="computer-cell" id="C-E-8"></td>
|
||||
<td class="computer-cell" id="C-E-9"></td>
|
||||
<td class="computer-cell" id="C-E-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">F</th>
|
||||
<td class="computer-cell" id="C-F-1"></td>
|
||||
<td class="computer-cell" id="C-F-2"></td>
|
||||
<td class="computer-cell" id="C-F-3"></td>
|
||||
<td class="computer-cell" id="C-F-4"></td>
|
||||
<td class="computer-cell" id="C-F-5"></td>
|
||||
<td class="computer-cell" id="C-F-6"></td>
|
||||
<td class="computer-cell" id="C-F-7"></td>
|
||||
<td class="computer-cell" id="C-F-8"></td>
|
||||
<td class="computer-cell" id="C-F-9"></td>
|
||||
<td class="computer-cell" id="C-F-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">G</th>
|
||||
<td class="computer-cell" id="C-G-1"></td>
|
||||
<td class="computer-cell" id="C-G-2"></td>
|
||||
<td class="computer-cell" id="C-G-3"></td>
|
||||
<td class="computer-cell" id="C-G-4"></td>
|
||||
<td class="computer-cell" id="C-G-5"></td>
|
||||
<td class="computer-cell" id="C-G-6"></td>
|
||||
<td class="computer-cell" id="C-G-7"></td>
|
||||
<td class="computer-cell" id="C-G-8"></td>
|
||||
<td class="computer-cell" id="C-G-9"></td>
|
||||
<td class="computer-cell" id="C-G-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">H</th>
|
||||
<td class="computer-cell" id="C-H-1"></td>
|
||||
<td class="computer-cell" id="C-H-2"></td>
|
||||
<td class="computer-cell" id="C-H-3"></td>
|
||||
<td class="computer-cell" id="C-H-4"></td>
|
||||
<td class="computer-cell" id="C-H-5"></td>
|
||||
<td class="computer-cell" id="C-H-6"></td>
|
||||
<td class="computer-cell" id="C-H-7"></td>
|
||||
<td class="computer-cell" id="C-H-8"></td>
|
||||
<td class="computer-cell" id="C-H-9"></td>
|
||||
<td class="computer-cell" id="C-H-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">I</th>
|
||||
<td class="computer-cell" id="C-I-1"></td>
|
||||
<td class="computer-cell" id="C-I-2"></td>
|
||||
<td class="computer-cell" id="C-I-3"></td>
|
||||
<td class="computer-cell" id="C-I-4"></td>
|
||||
<td class="computer-cell" id="C-I-5"></td>
|
||||
<td class="computer-cell" id="C-I-6"></td>
|
||||
<td class="computer-cell" id="C-I-7"></td>
|
||||
<td class="computer-cell" id="C-I-8"></td>
|
||||
<td class="computer-cell" id="C-I-9"></td>
|
||||
<td class="computer-cell" id="C-I-10"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="headers">J</th>
|
||||
<td class="computer-cell" id="C-J-1"></td>
|
||||
<td class="computer-cell" id="C-J-2"></td>
|
||||
<td class="computer-cell" id="C-J-3"></td>
|
||||
<td class="computer-cell" id="C-J-4"></td>
|
||||
<td class="computer-cell" id="C-J-5"></td>
|
||||
<td class="computer-cell" id="C-J-6"></td>
|
||||
<td class="computer-cell" id="C-J-7"></td>
|
||||
<td class="computer-cell" id="C-J-8"></td>
|
||||
<td class="computer-cell" id="C-J-9"></td>
|
||||
<td class="computer-cell" id="C-J-10"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
<!-- <div id="computer-ships-stats" class="stats" >computer ships stat</div>
|
||||
<div id="computer-ships">computer ships</div> -->
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<button id="start-game-button">START GAME</button>
|
||||
<button id="restart-game-button" class="hidden">RESTART</button>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
968
script/script.js
Normal file
968
script/script.js
Normal file
|
|
@ -0,0 +1,968 @@
|
|||
// function login(showhide) {
|
||||
// if (showhide == "show") {
|
||||
// document.getElementById("popupbox").style.visibility = "visible";
|
||||
// } else if (showhide == "hide") {
|
||||
// document.getElementById("popupbox").style.visibility = "hidden";
|
||||
// }
|
||||
// }
|
||||
// -------------constant----------------
|
||||
const rows = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
|
||||
|
||||
const shipsDetails = [
|
||||
{ name: "carrier", length: 5 },
|
||||
{ name: "battleship", length: 4 },
|
||||
{ name: "submarine", length: 3 },
|
||||
{ name: "cruiser", length: 3 },
|
||||
{ name: "destroyer", length: 2 },
|
||||
];
|
||||
|
||||
// --------apps state(variables)--------
|
||||
let computerTable;
|
||||
let playerTable;
|
||||
let selectedShip;
|
||||
let sellectedCellId;
|
||||
let selecteCell;
|
||||
let selectedShipLenght;
|
||||
let cruiserCor;
|
||||
let battleshipCor;
|
||||
let carrierCor;
|
||||
let destroyerCor;
|
||||
let submarineCor;
|
||||
let cellRighCor;
|
||||
let cellUpCor;
|
||||
let cellLeftCor;
|
||||
let cellDownCor;
|
||||
let clicks;
|
||||
let selectedShipIds;
|
||||
//--------cached element refrence-------
|
||||
|
||||
//-----------event listnener------------
|
||||
|
||||
// ------------------------function ----------------
|
||||
|
||||
// -------------constant----------------
|
||||
|
||||
// --------apps state(variables)--------
|
||||
|
||||
//--------cached element refrence-------
|
||||
|
||||
let restartButtonEl = document.getElementById("restart-game-button");
|
||||
let startButtonEl = document.getElementById("start-game-button");
|
||||
let computerTableEl = document.querySelectorAll(".computer-cell");
|
||||
let playerTableEl = document.querySelectorAll(".player-cell");
|
||||
let ships = document.querySelectorAll(".ships");
|
||||
let playerCells = document.querySelectorAll(".player-cell");
|
||||
|
||||
//-----------event listnener------------
|
||||
|
||||
startButtonEl.addEventListener("click", startGame);
|
||||
restartButtonEl.addEventListener("click", restartGame);
|
||||
playerTableEl.forEach(function (pCell) {
|
||||
pCell.addEventListener("click", playClick);
|
||||
});
|
||||
|
||||
ships.forEach(function (ship) {
|
||||
ship.addEventListener("click", selectShip);
|
||||
});
|
||||
|
||||
// // ------------------------function ----------------
|
||||
|
||||
function init() {
|
||||
playerTableEl.forEach(function (cell) {
|
||||
cell.innerHTML = cell.id;
|
||||
});
|
||||
|
||||
playerTable = [];
|
||||
computerTable = [];
|
||||
selectedShip = undefined;
|
||||
selectedShipId = undefined;
|
||||
cellRighCor = [];
|
||||
cellDownCor = [];
|
||||
cellUpCor = [];
|
||||
cellLeftCor = [];
|
||||
let cruiserCor = [];
|
||||
battleshipCor = [];
|
||||
carrierCor = [];
|
||||
destroyerCor = [];
|
||||
submarineCor = [];
|
||||
cellRighCor = [];
|
||||
cellUpCor = [];
|
||||
cellLeftCor = [];
|
||||
cellDownCor = [];
|
||||
clicks = [];
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
for (var j = 1; j <= rows.length; j++) {
|
||||
computerTable.push({
|
||||
userTableId: "C",
|
||||
row: rows[i],
|
||||
colomn: j,
|
||||
acc: false,
|
||||
ship: false,
|
||||
hit: false,
|
||||
});
|
||||
playerTable.push({
|
||||
userTableId: "P",
|
||||
row: rows[i],
|
||||
colomn: j,
|
||||
acc: false,
|
||||
ship: false,
|
||||
hit: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
startButtonEl.className = "hidden";
|
||||
restartButtonEl.className = "restart-button";
|
||||
}
|
||||
|
||||
function selectShip() {
|
||||
if (this.className == "ships") {
|
||||
selectedShip = this.id;
|
||||
this.className = "selected";
|
||||
ships.forEach(function (ship) {
|
||||
disableEnablePlayerTable();
|
||||
});
|
||||
for (let i = 0; i < shipsDetails.length; i++) {
|
||||
if (shipsDetails[i].name == this.id) {
|
||||
selectedShipLenght = shipsDetails[i].length;
|
||||
}
|
||||
}
|
||||
} else if (this.className == "selected") {
|
||||
this.className = "ships";
|
||||
ships.forEach(function (ship) {
|
||||
if (ship.className == "disable") {
|
||||
ship.className = "ships";
|
||||
selectedShip = undefined;
|
||||
}
|
||||
disableEnablePlayerTable();
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function placingShip() {
|
||||
let strSlice = sellectedCellId.split("");
|
||||
strSlice[1] = Number(strSlice[1]); //row//
|
||||
strSlice[0] = Number(strSlice[0]); //column
|
||||
|
||||
if (
|
||||
strSlice[1] + 1 < selectedShipLenght && // row//
|
||||
strSlice[0] + 1 < selectedShipLenght // column//
|
||||
) {
|
||||
shipDirection("top-left");
|
||||
} else if (
|
||||
strSlice[1] + 1 < selectedShipLenght && // row//
|
||||
strSlice[0] > 10 - selectedShipLenght // column//
|
||||
) {
|
||||
shipDirection("bottom-left");
|
||||
} else if (
|
||||
strSlice[1] > 10 - selectedShipLenght && // row//
|
||||
strSlice[0] > 10 - selectedShipLenght // column//
|
||||
) {
|
||||
shipDirection("bottom-right");
|
||||
} else if (
|
||||
strSlice[1] > 10 - selectedShipLenght && // row//
|
||||
strSlice[0] + 1 < selectedShipLenght // column//
|
||||
) {
|
||||
shipDirection("top-right");
|
||||
} else if (strSlice[1] < selectedShipLenght - 1) {
|
||||
shipDirection("left");
|
||||
} else if (strSlice[1] > 10 - selectedShipLenght) {
|
||||
shipDirection("right");
|
||||
} else if (strSlice[0] > 10 - selectedShipLenght) {
|
||||
shipDirection("down");
|
||||
} else if (strSlice[0] + 1 < selectedShipLenght) {
|
||||
shipDirection("up");
|
||||
} else {
|
||||
shipDirection("middle");
|
||||
}
|
||||
}
|
||||
|
||||
function shipDirection(cellZone) {
|
||||
cellRighCor;
|
||||
let cellIdNumber = Number(sellectedCellId);
|
||||
let cellIdString;
|
||||
|
||||
if (cellZone == "top-left") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellDownCor.push(clicks[0]);
|
||||
//right
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber + i}`.toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
}
|
||||
|
||||
// if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
// cellRighCor = [];
|
||||
// console.log[cellRighCor];
|
||||
// break;
|
||||
// } else {
|
||||
// document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
// /img/${selectedShip}-${i}.png)`;
|
||||
// document.getElementById(cellIdString).classList.remove("disable");
|
||||
// document.getElementById(cellIdString).classList.add("background-right");
|
||||
// }
|
||||
}
|
||||
console.log(cellRighCor);
|
||||
for (let i = 0; i < cellRighCor.length; i++) {
|
||||
console.log(cellRighCor[i]);
|
||||
}
|
||||
//down
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
// cellIdString = (cellIdNumber + i * 10).toString();
|
||||
// cellDownCor.push(cellIdString);
|
||||
if (cellIdNumber == 0) {
|
||||
cellIdString = (1 * (i * 10)).toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
}
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "bottom-left") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellUpCor.push(clicks[0]);
|
||||
|
||||
//right
|
||||
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellRighCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-right");
|
||||
}
|
||||
}
|
||||
//up
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
cellUpCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "bottom-right") {
|
||||
cellUpCor.push(clicks[0]);
|
||||
cellLeftCor.push(clicks[0]);
|
||||
//left
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
console.log(cellLeftCor);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
cellUpCor.push(cellIdString);
|
||||
//up
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "top-right") {
|
||||
cellDownCor.push(clicks[0]);
|
||||
cellLeftCor.push(clicks[0]);
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
//left
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber - i}`.toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
} else {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
}
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
return;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "middle") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellDownCor.push(clicks[0]);
|
||||
cellUpCor.push(clicks[0]);
|
||||
cellLeftCor.push(clicks[0]);
|
||||
//up
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
|
||||
if (Number(cellIdString) < 10) {
|
||||
cellIdString = 0 + cellIdString;
|
||||
} else {
|
||||
}
|
||||
cellUpCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
}
|
||||
//down
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber + i * 10}`.toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
}
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
}
|
||||
//right
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellRighCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-right");
|
||||
}
|
||||
}
|
||||
//left
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "left") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellDownCor.push(clicks[0]);
|
||||
cellUpCor.push(clicks[0]);
|
||||
|
||||
//up
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
if (cellIdString.length < 2) {
|
||||
cellUpCor.push(`0${cellIdString}`);
|
||||
} else {
|
||||
cellUpCor.push(cellIdString);
|
||||
}
|
||||
|
||||
if (Number(cellIdString) < 10) {
|
||||
cellIdString = 0 + cellIdString;
|
||||
}
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
console.log(cellUpCor);
|
||||
}
|
||||
//down
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber + i * 10}`.toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
}
|
||||
cellDownCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
}
|
||||
//right
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellRighCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-right");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "down") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellDownCor.push(clicks[0]);
|
||||
|
||||
cellLeftCor.push(clicks[0]);
|
||||
//up
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
|
||||
if (Number(cellIdString) < 10) {
|
||||
cellIdString = 0 + cellIdString;
|
||||
}
|
||||
cellUpCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
}
|
||||
//right
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
cellRighCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellRighCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-right");
|
||||
}
|
||||
}
|
||||
//left
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "right") {
|
||||
cellDownCor.push(clicks[0]);
|
||||
cellUpCor.push(clicks[0]);
|
||||
cellLeftCor.push(clicks[0]);
|
||||
|
||||
//left
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
cellLeftCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
|
||||
//up
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
|
||||
if (Number(cellIdString) < 10) {
|
||||
cellIdString = 0 + cellIdString;
|
||||
}
|
||||
cellUpCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellUpCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-up");
|
||||
}
|
||||
}
|
||||
//down
|
||||
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i * 10).toString();
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber + i * 10}`.toString();
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
}
|
||||
cellDownCor.push(cellIdString);
|
||||
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
console.log(
|
||||
"left " + cellLeftCor + " up " + cellUpCor + " down " + cellDownCor
|
||||
);
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
} else if (cellZone == "up") {
|
||||
cellRighCor.push(clicks[0]);
|
||||
cellDownCor.push(clicks[0]);
|
||||
|
||||
cellLeftCor.push(clicks[0]);
|
||||
//right
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber + i}`.toString();
|
||||
} else {
|
||||
cellIdString = (cellIdNumber + i).toString();
|
||||
}
|
||||
cellRighCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellRighCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-right");
|
||||
}
|
||||
}
|
||||
//left
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
|
||||
if (cellIdNumber < 10) {
|
||||
cellIdString = `0${cellIdNumber - i}`.toString();
|
||||
} else {
|
||||
cellIdString = (cellIdNumber - i).toString();
|
||||
}
|
||||
cellLeftCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellLeftCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.remove("disable");
|
||||
document.getElementById(cellIdString).classList.add("background-left");
|
||||
}
|
||||
}
|
||||
//down
|
||||
for (let i = 1; i < selectedShipLenght; i++) {
|
||||
cellIdString = (cellIdNumber + i * 10).toString();
|
||||
cellDownCor.push(cellIdString);
|
||||
if (document.getElementById(cellIdString).classList.contains("ship")) {
|
||||
cellDownCor = [];
|
||||
break;
|
||||
} else {
|
||||
document.getElementById(cellIdString).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-${i}.png)`;
|
||||
document.getElementById(cellIdString).classList.add("background-down");
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
"left: " +
|
||||
cellLeftCor +
|
||||
" right: " +
|
||||
cellRighCor +
|
||||
" up: " +
|
||||
cellUpCor +
|
||||
" dwon: " +
|
||||
cellDownCor
|
||||
);
|
||||
}
|
||||
|
||||
function disableEnablePlayerTable() {
|
||||
document.getElementById("player-table").classList.toggle("disable");
|
||||
}
|
||||
function hitCell() {}
|
||||
|
||||
function restartGame() {
|
||||
userChoice = prompt(
|
||||
'ARE YOU SURE YOU WANT TO RESTART THE GAME? ENTER "Y" To CONFIRM!!!'
|
||||
).toLocaleLowerCase();
|
||||
|
||||
if (userChoice == "y") {
|
||||
playerTableEl.forEach(function (elm) {
|
||||
elm.style.background = "none";
|
||||
startButtonEl.className = "start-button";
|
||||
restartButtonEl.className = "hidden";
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function playClick() {
|
||||
clicks.push(this.id);
|
||||
sellectedCellId = this.id;
|
||||
|
||||
if (clicks.length == 1 && clicks[0] == this.id) {
|
||||
console.log("start placing ship");
|
||||
placingShip();
|
||||
} else if (
|
||||
cellRighCor.includes(this.id) ||
|
||||
cellDownCor.includes(this.id) ||
|
||||
cellUpCor.includes(this.id) ||
|
||||
cellLeftCor.includes(this.id)
|
||||
) {
|
||||
console.log("ship placed");
|
||||
addShip();
|
||||
} else if (
|
||||
clicks[0] !== this.id &&
|
||||
!cellRighCor.includes(this.id) &&
|
||||
!cellDownCor.includes(this.id) &&
|
||||
!cellLeftCor.includes(this.id) &&
|
||||
!cellUpCor.includes(this.id)
|
||||
) {
|
||||
console.log("moving ship");
|
||||
console.log(clicks);
|
||||
|
||||
clicks = [];
|
||||
clicks.push(this.id);
|
||||
moveShip();
|
||||
placingShip();
|
||||
} else {
|
||||
console.log("nothing happend");
|
||||
}
|
||||
}
|
||||
function moveShip() {
|
||||
if (cellRighCor.length > 0) {
|
||||
cellRighCor.forEach(function (id) {
|
||||
if (document.getElementById(id).classList.contains("ship")) {
|
||||
return;
|
||||
} else {
|
||||
document.getElementById(id).style.backgroundColor = "none";
|
||||
document.getElementById(id).classList.remove("background-right");
|
||||
cellRighCor = [];
|
||||
}
|
||||
});
|
||||
}
|
||||
if (cellDownCor.length > 0) {
|
||||
cellDownCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-down");
|
||||
cellDownCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellLeftCor.length > 0) {
|
||||
cellLeftCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-left");
|
||||
cellLeftCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellUpCor.length > 0) {
|
||||
cellUpCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-up");
|
||||
cellUpCor = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
function addShip() {
|
||||
if (cellRighCor.includes(clicks[clicks.length - 1])) {
|
||||
cellRighCor.forEach(function (id) {
|
||||
document.getElementById(id).classList = "ship background-right disable";
|
||||
});
|
||||
document.getElementById(clicks[0]).style.backgroundImage = `url(
|
||||
/img/${selectedShip}-0.png)`;
|
||||
document.getElementById(selectedShip).className = "invisible";
|
||||
|
||||
if (cellDownCor.length > 0) {
|
||||
cellDownCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-down");
|
||||
cellDownCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellLeftCor.length > 0) {
|
||||
cellLeftCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-left");
|
||||
cellLeftCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellUpCor.length > 0) {
|
||||
cellUpCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-up");
|
||||
cellUpCor = [];
|
||||
});
|
||||
}
|
||||
ships.forEach(function (ship) {
|
||||
if (ship.classList.contains("disable")) {
|
||||
ship.className = "ships";
|
||||
selectedShip = undefined;
|
||||
}
|
||||
disableEnablePlayerTable();
|
||||
});
|
||||
} else if (cellDownCor.includes(clicks[clicks.length - 1])) {
|
||||
if (cellRighCor.length > 0) {
|
||||
cellRighCor.forEach(function (id) {
|
||||
document.getElementById(id).style.backgroundColor = "none";
|
||||
document.getElementById(id).classList.remove("background-right");
|
||||
cellRighCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellLeftCor.length > 0) {
|
||||
cellLeftCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-left");
|
||||
cellLeftCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellUpCor.length > 0) {
|
||||
cellUpCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-up");
|
||||
cellUpCor = [];
|
||||
});
|
||||
}
|
||||
} else if (cellLeftCor.includes(clicks[clicks.length - 1])) {
|
||||
if (cellRighCor.length > 0) {
|
||||
cellRighCor.forEach(function (id) {
|
||||
document.getElementById(id).style.backgroundColor = "none";
|
||||
document.getElementById(id).classList.remove("background-right");
|
||||
cellRighCor = [];
|
||||
});
|
||||
}
|
||||
if (cellDownCor.length > 0) {
|
||||
cellDownCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-down");
|
||||
cellDownCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellUpCor.length > 0) {
|
||||
cellUpCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-up");
|
||||
cellUpCor = [];
|
||||
});
|
||||
}
|
||||
} else if (cellUpCor.includes(clicks[clicks.length - 1])) {
|
||||
if (cellRighCor.length > 0) {
|
||||
cellRighCor.forEach(function (id) {
|
||||
document.getElementById(id).style.backgroundColor = "none";
|
||||
document.getElementById(id).classList.remove("background-right");
|
||||
cellRighCor = [];
|
||||
});
|
||||
}
|
||||
if (cellDownCor.length > 0) {
|
||||
cellDownCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-down");
|
||||
cellDownCor = [];
|
||||
});
|
||||
}
|
||||
|
||||
if (cellLeftCor.length > 0) {
|
||||
cellLeftCor.forEach(function (id) {
|
||||
document.getElementById(id).style.removeProperty("background-image");
|
||||
document.getElementById(id).classList.remove("background-left");
|
||||
cellLeftCor = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
cellLeftCor = [];
|
||||
}
|
||||
|
||||
init();
|
||||
Loading…
Reference in New Issue
Block a user