commit ddb85b529897f867ff912c57085597140674478b Author: roozbehk Date: Fri Aug 12 10:23:23 2022 -0400 initial commit diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..1304bfc --- /dev/null +++ b/css/style.css @@ -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: ; +} \ No newline at end of file diff --git a/img/battleship-0.png b/img/battleship-0.png new file mode 100644 index 0000000..a54ee59 Binary files /dev/null and b/img/battleship-0.png differ diff --git a/img/battleship-1.png b/img/battleship-1.png new file mode 100644 index 0000000..4a508fd Binary files /dev/null and b/img/battleship-1.png differ diff --git a/img/battleship-2.png b/img/battleship-2.png new file mode 100644 index 0000000..189cfa0 Binary files /dev/null and b/img/battleship-2.png differ diff --git a/img/battleship-3.png b/img/battleship-3.png new file mode 100644 index 0000000..b664ccd Binary files /dev/null and b/img/battleship-3.png differ diff --git a/img/carrier-0.png b/img/carrier-0.png new file mode 100644 index 0000000..476d06e Binary files /dev/null and b/img/carrier-0.png differ diff --git a/img/carrier-1.png b/img/carrier-1.png new file mode 100644 index 0000000..2a61427 Binary files /dev/null and b/img/carrier-1.png differ diff --git a/img/carrier-2.png b/img/carrier-2.png new file mode 100644 index 0000000..11694bd Binary files /dev/null and b/img/carrier-2.png differ diff --git a/img/carrier-3.png b/img/carrier-3.png new file mode 100644 index 0000000..d5a787e Binary files /dev/null and b/img/carrier-3.png differ diff --git a/img/carrier-4.png b/img/carrier-4.png new file mode 100644 index 0000000..a5a7b3a Binary files /dev/null and b/img/carrier-4.png differ diff --git a/img/cruiser-0.png b/img/cruiser-0.png new file mode 100644 index 0000000..4b82d79 Binary files /dev/null and b/img/cruiser-0.png differ diff --git a/img/cruiser-1.png b/img/cruiser-1.png new file mode 100644 index 0000000..047f78b Binary files /dev/null and b/img/cruiser-1.png differ diff --git a/img/cruiser-2.png b/img/cruiser-2.png new file mode 100644 index 0000000..3e1567f Binary files /dev/null and b/img/cruiser-2.png differ diff --git a/img/destroyer-0.png b/img/destroyer-0.png new file mode 100644 index 0000000..ea46727 Binary files /dev/null and b/img/destroyer-0.png differ diff --git a/img/destroyer-1.png b/img/destroyer-1.png new file mode 100644 index 0000000..e600348 Binary files /dev/null and b/img/destroyer-1.png differ diff --git a/img/submarine-0.png b/img/submarine-0.png new file mode 100644 index 0000000..34c1c6c Binary files /dev/null and b/img/submarine-0.png differ diff --git a/img/submarine-1.png b/img/submarine-1.png new file mode 100644 index 0000000..7533002 Binary files /dev/null and b/img/submarine-1.png differ diff --git a/img/submarine-2.png b/img/submarine-2.png new file mode 100644 index 0000000..7fdbe64 Binary files /dev/null and b/img/submarine-2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b319232 --- /dev/null +++ b/index.html @@ -0,0 +1,379 @@ + + + + + + + + Document + + + + + + + + + + +
+
+

BATTLE SHIP

+
+ +
+
+
player ships stat
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
player Table
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
12345678910
A
B
C
D
E
F
G
H
I
J
+
+
computer table
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
12345678910
A
B
C
D
E
F
G
H
I
J
+ +
+ +
+ + + + \ No newline at end of file diff --git a/script/script.js b/script/script.js new file mode 100644 index 0000000..d9fa214 --- /dev/null +++ b/script/script.js @@ -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();