969 lines
30 KiB
JavaScript
969 lines
30 KiB
JavaScript
// 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();
|