final version

2026-05-28 15:45:47 +03:00
parent d5bd6d9d97
commit 77a828cace
3 changed files with 133 additions and 48 deletions
@@ -1,6 +1,17 @@
 <!DOCTYPE html>
 <html>
-<head> <meta charset="UTF-8"> </head>
+
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="style.css">
+</head>
+
 <body>
-    <script type="text/javascript" src="main.js"> </script>
+	<h2 id="record">RECORD: -</h2>
+	<h3 id="shots">SHOTS: 0 / 35</h3>
+
+	<table id="board"></table>
+	<script src="main.js"></script>
 </body>
+
+</html>
@@ -1,13 +1,16 @@
-var x1=Math.floor(Math.random()*5)+1;
-var x2=x1+1;
-var x3=x1+2;
+window.onload = function () {

-var guess;
-var hits=0;
-var guesses=0;
-var isSunk=false;
-var y1=Math.floor(Math.random()*7)+1;
-var sea=[
+	var shots = 0;
+	var hits = 0;
+	var maxShots = 35;
+	var gameOver = false;
+
+	var record = localStorage.getItem("record") || "-";
+	document.getElementById("record").innerHTML = "RECORD: " + record;
+
+	var sea = [];
+
+	var sea = [
 		[null, null, null, null, null, null, null, null],
 		[null, 0, 0, 0, 0, 0, 0, 0],
 		[null, 0, 0, 0, 0, 0, 0, 0],
@@ -15,37 +18,91 @@ var sea=[
 		[null, 0, 0, 0, 0, 0, 0, 0],
 		[null, 0, 0, 0, 0, 0, 0, 0],
 		[null, 0, 0, 0, 0, 0, 0, 0],
-		 [null, 0, 0, 0, 0, 0, 0, 0],
-];
+		[null, 0, 0, 0, 0, 0, 0, 0]
+	];

-sea[y1][x1]=1;
-sea[y1][x2]=1;
-sea[y1][x3]=1;
+	function createShip() {

-while (isSunk == false) {
-    guess = prompt("Ready, aim, fire! (enter two numbers 1-7):");
+		var x, y;

-    if (guess === null) {
-        break; 
+		do {
+			x = Math.floor(Math.random() * 5) + 1;
+			y = Math.floor(Math.random() * 7) + 1;
+
+		} while (
+			sea[y][x] == 1 ||
+			sea[y][x + 1] == 1 ||
+			sea[y][x + 2] == 1
+		);
+
+		sea[y][x] = 1;
+		sea[y][x + 1] = 1;
+		sea[y][x + 2] = 1;
 	}

-	guess = Number(guess);
+	for (var i = 0; i < 5; i++) {
+		createShip();
+	}
+	
+	console.log("FIELD:");
+	console.log(sea);
+
+	var table = document.getElementById("board");
+
+	for (var i = 1; i <= 7; i++) {
+
+		var row = document.createElement("tr");
+
+		for (var j = 1; j <= 7; j++) {
+
+			var cell = document.createElement("td");
+
+			cell.dataset.y = i;
+			cell.dataset.x = j;
+
+			cell.onclick = function () {
+
+				if (gameOver || this.innerHTML != "") return;
+
+				var y = this.dataset.y;
+				var x = this.dataset.x;
+
+				shots++;
+				document.getElementById("shots").innerHTML =
+					"SHOTS: " + shots + " / " + maxShots;
+
+				if (sea[y][x] == 1) {
+
+					this.innerHTML = "X";
+					sea[y][x] = 0;
+					hits++;
+
+					if (hits == 15) {
+
+						alert("ВЫ ВЫИГРАЛИ");
+
+						if (record == "-" || shots < record) {
+							localStorage.setItem("record", shots);
+						}
+
+						gameOver = true;
+						location.reload();
+					}

-    if (guess < 1 || guess > 7) {
-        alert("Please enter a valid cell number!");
 				} else {
-        ++guesses;
+					this.innerHTML = "O";
 				}
-}

+				if (shots > maxShots && hits < 15) {
+					alert("ВЫ ПРОИГРАЛИ");
+					gameOver = true;
+					location.reload();
+				}
+			};

-console.log(sea[1]);
-console.log(sea[2]);
-console.log(sea[3]);
-console.log(sea[4]);
-console.log(sea[5]);
-console.log(sea[6]);
-console.log(sea[7]);
-console.log(sea);
-console.log(x1,x2,x3);
-console.log(y1);
+			row.appendChild(cell);
+		}
+
+		table.appendChild(row);
+	}
+};
@@ -0,0 +1,17 @@
+body {
+	text-align: center;
+	font-family: Arial;
+}
+
+table {
+	margin: auto;
+	border-collapse: collapse;
+}
+
+td {
+	width: 50px;
+	height: 50px;
+	border: 1px solid black;
+	font-size: 24px;
+	cursor: pointer;
+}