diff --git a/css/style.css b/css/style.css index 7c58716..c26081a 100644 --- a/css/style.css +++ b/css/style.css @@ -123,13 +123,13 @@ td { } #cruiser { - width: fit-content; + cursor: pointer; display: flex; flex-direction: row; } #destroyer { - width: fit-content; + cursor: pointer; display: flex; flex-direction: row; } @@ -353,10 +353,37 @@ td { background-size: 101% 101%; transform: rotate(-270deg); - +color: darkblue } .invisible { visibility: hidden; +} +.ship { + background-color: red; +} + +.placed-ship { + background-color: green; +} + +.green { + background-color: green; +} + +.red { + background-color: red; +} + +.yellow { + background-color: yellow; +} + +.darkblue { + background-color: darkblue; +} + +.blue { + background-color: blue; } \ No newline at end of file diff --git a/img/e0d32fe8c7dcec37402e77bb56ee90c3.jpg b/img/e0d32fe8c7dcec37402e77bb56ee90c3.jpg new file mode 100644 index 0000000..39c230e Binary files /dev/null and b/img/e0d32fe8c7dcec37402e77bb56ee90c3.jpg differ diff --git a/index.html b/index.html index b319232..e74d99e 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@
player Table
- +
@@ -74,305 +74,315 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + +
1
A
B
C
D
E
F
G
H
I
J
computer table
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
12345678910
A
B
C
D
E
F
G
H
I
J
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
12345678910
A
B
C
D
E
F
G
H
I
J
+
diff --git a/script/script.js b/script/script.js index a602dca..8316d80 100644 --- a/script/script.js +++ b/script/script.js @@ -7,33 +7,35 @@ // } // -------------constant---------------- const rows = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; +const columns = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; -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; +let shipsDetails = [ + { name: "carrier", length: 5 ,color: 'green' ,cor:''}, + { name: "battleship", length: 4, color: 'red' , cor: ''}, + { name: "submarine", length: 3, color: 'yellow',cor: '' }, + { name: "cruiser", length: 3, color: 'darkblue',cor: ''}, + { name: "destroyer", length: 2, color:'blue',cor: '' }, +]; + + + + + + + + +let selectedShipLenght +let randomCellUp = [] +let randomCellRight = [] +let randomCellDown = [] +let randomCellLeft =[] +let computerPlacedShips =[] +let PlayerPlacedShips = [] +let shipSide=[] +let shipsLength =[] +let shipsColor = [] //--------cached element refrence------- //-----------event listnener------------ @@ -46,8 +48,7 @@ let selectedShipIds; //--------cached element refrence------- -let restartButtonEl = document.getElementById("restart-game-button"); -let startButtonEl = document.getElementById("start-game-button"); +let playerRandom = document.getElementById("player-random-game-button"); let computerTableEl = document.querySelectorAll(".computer-cell"); let playerTableEl = document.querySelectorAll(".player-cell"); let ships = document.querySelectorAll(".ships"); @@ -55,914 +56,165 @@ let playerCells = document.querySelectorAll(".player-cell"); //-----------event listnener------------ -startButtonEl.addEventListener("click", startGame); -restartButtonEl.addEventListener("click", restartGame); -playerTableEl.forEach(function (pCell) { - pCell.addEventListener("click", playClick); -}); +playerRandom.addEventListener("click", playerRandomShip); -ships.forEach(function (ship) { - ship.addEventListener("click", selectShip); -}); +// playerTableEl.forEach(function (pCell) { +// pCell.addEventListener("click", playClick); +// }); + +// ships.forEach(function (ship) { +// ship.addEventListener("click", selectShip); +// }); // // ------------------------function ---------------- +// +function randomShip(playingTable,playerLetter){ + randomCell(playerLetter) + + checkRandomCellOk(playingTable) + + + let putShip =shipSide[Math.floor(Math.random()*shipSide.length)] + + + if(shipSide.length<1){ + return + } + + + putShip.forEach(function(putCell){ + document.getElementById(putCell).classList.add(shipsColor[0]) + document.getElementById(putCell).classList.add('ship') + }) + + putShip=[] + randomCellUp = [] + randomCellRight = [] + randomCellDown = [] + randomCellLeft =[] + shipSide=[] + shipsLength.shift() + shipsColor.shift() + + + + +} + +function randomCell(playerLetter){ + let randomCell = rows[Math.floor(Math.random() * rows.length)] + columns[Math.floor(Math.random() * columns.length)] + splitRandomCell = splitCellId(randomCell) + console.log(playerLetter) + for( let i = 0 ; i < shipsLength[0] ; i++){ + + randomCellUp.push((playerLetter+rows[rows.indexOf(splitRandomCell[0])-i])+splitRandomCell[1]) + randomCellRight.push(playerLetter+splitRandomCell[0]+columns[columns.indexOf(splitRandomCell[1])+i]) + randomCellDown.push(playerLetter+rows[rows.indexOf(splitRandomCell[0])+i]+splitRandomCell[1]) + randomCellLeft.push(playerLetter+splitRandomCell[0]+columns[columns.indexOf(splitRandomCell[1])-i]) + + + } + +} +function checkRandomCellOk(playingTable){ + randomCellUp.forEach(function(cell){ + if(cell.includes('undefined')){ + randomCellUp = [] + } + }) + randomCellRight.forEach(function(cell){ + if(cell.includes('undefined')){ + randomCellRight = [] + } + + }) + randomCellDown.forEach(function(cell){ + if(cell.includes('undefined')){ + randomCellDown = [] + } + + }) + randomCellLeft.forEach(function(cell){ + if(cell.includes('undefined')){ + randomCellLeft = [] + } + + }) + randomCellUp.forEach(function(id){ + if(document.getElementById(id).classList.contains('ship') == true){ + randomCellUp =[] + } + }) + randomCellRight.forEach(function(id){ + if(document.getElementById(id).classList.contains('ship') ==true){ + randomCellRight =[] + } + }) + randomCellDown.forEach(function(id){ + if(document.getElementById(id).classList.contains('ship') ==true){ + randomCellDown =[] + } + }) + randomCellLeft.forEach(function(id){ + if(document.getElementById(id).classList.contains('ship') ==true){ + randomCellLeft =[] + } + }) + if(randomCellUp.length){ + shipSide.push(randomCellUp) + }if(randomCellRight.length>0){ + shipSide.push(randomCellRight) + }if(randomCellDown.length>0){ + shipSide.push(randomCellDown) + }if(randomCellLeft.length>0){ + shipSide.push(randomCellLeft) + } +} + + +function splitCellId(cellId){ + return cellId.split('') +} + 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, - }); - } - } + computerRandomShip() } -function startGame() { - startButtonEl.className = "hidden"; - restartButtonEl.className = "restart-button"; + +function computerRandomShip(){ + shipsDetails.forEach(function(ship){ + shipsLength.push(ship.length ) + }) + shipsDetails.forEach(function(ship){ + shipsColor.push(ship.color) + }) + console.log(shipsLength.length) + + while(shipsLength.length >0){ + randomShip(playerTableEl , 'C') + } + } -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 playerRandomShip(){ + playerTableEl.forEach(function(elm){ + elm.className = 'player-cell' + }) + shipsDetails.forEach(function(ship){ + shipsLength.push(ship.length ) + }) + shipsDetails.forEach(function(ship){ + shipsColor.push(ship.color) + }) + console.log(shipsLength.length) + + while(shipsLength.length >0){ + randomShip(playerTableEl , 'P') } + } -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();