diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html
index 9109ff7..c393c43 100644
--- a/secret/mineSweeper/index.html
+++ b/secret/mineSweeper/index.html
@@ -10,20 +10,13 @@
-
Minesweeper
-
-
+
-
-
+
-
-
-
-
-
+
diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js
index 8945dd7..f37cb34 100644
--- a/secret/mineSweeper/script.js
+++ b/secret/mineSweeper/script.js
@@ -1,12 +1,27 @@
-document.getElementById('startGame').addEventListener('click', function () {
- const gridSize = parseInt(document.getElementById('gridSize').value);
- const bombs = parseInt(document.getElementById('bombs').value);
+// document.getElementById('startGame').addEventListener('click', function () {
+// // Get values from the inputs
+// const gridSize = parseInt(document.getElementById('gridSize').value);
+// const bombs = parseInt(document.getElementById('bombs').value);
- document.getElementById('settings').style.display = 'none';
- document.getElementById('game').style.display = 'block';
+// // Hide settings and show canvas
+// document.getElementById('settings').style.display = 'none';
+// document.getElementById('game').style.display = 'block';
- renderGame(gridSize, bombs);
-});
+// // Assuming renderGame is a function to draw the canvas or initiate the game
+// renderGame(gridSize, bombs);
+// });
+
+// function renderGame(gridSize, bombs) {
+// // Placeholder for actual game rendering logic
+// const canvas = document.getElementById('game');
+// const ctx = canvas.getContext('2d');
+// canvas.width = gridSize * 20; // Assuming gridSize affects canvas size
+// canvas.height = gridSize * 20;
+
+// // Draw grid or bombs based on input values
+// ctx.fillStyle = '#007bff';
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+// }
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
@@ -102,6 +117,7 @@ class Minesweeper {
drawSquare(x, y, type) {
ctx.lineWidth = 3;
+ x += 2, y += 2;
let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type !== 0 ? activeColor : color1;
@@ -111,7 +127,7 @@ class Minesweeper {
if (type != 1) {
const fontSize = this.size / 2;
- const number = this.getNearbyBombs(x, y);
+ const number = this.getNearbyBombs(x - 2, y - 2);
let finalPrint;
ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = '#000';
@@ -125,9 +141,9 @@ class Minesweeper {
drawField() {
const squareWidth = window.innerWidth / (this.field.length + 4);
const squareHeight = window.innerHeight / (this.field[0].length + 4);
- squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight;
- canvas.width = this.size * this.field.length;
- canvas.height = this.size * this.field[0].length;
+ canvas.width = squareWidth * this.field.length;
+ canvas.height = squareHeight * this.field[0].length;
+ squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight;
const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
@@ -140,20 +156,18 @@ class Minesweeper {
}
}
-const renderGame = (gridSize, bombs) => {
- let field = new Minesweeper(gridSize, gridSize, bombs);
- window.addEventListener('resize', () => field.drawField());
- canvas.addEventListener('click', (event) => {
- const rect = canvas.getBoundingClientRect();
- const x = Math.floor((event.clientX - rect.left) / field.size);
- const y = Math.floor((event.clientY - rect.top) / field.size);
- field.uncoverSquare(x, y);
- });
- canvas.addEventListener('contextmenu', (event) => {
- event.preventDefault();
- const rect = canvas.getBoundingClientRect();
- const x = Math.floor((event.clientX - rect.left) / field.size);
- const y = Math.floor((event.clientY - rect.top) / field.size);
- field.markSquare(x, y);
- });
-};
+let field = new Minesweeper(18, 18, 54);
+window.addEventListener('resize', () => field.drawField());
+canvas.addEventListener('click', (event) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
+ const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
+ field.uncoverSquare(x, y);
+});
+canvas.addEventListener('contextmenu', (event) => {
+ event.preventDefault();
+ const rect = canvas.getBoundingClientRect();
+ const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
+ const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
+ field.markSquare(x, y);
+});
diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css
index e9155df..a2cbba2 100644
--- a/secret/mineSweeper/styles.css
+++ b/secret/mineSweeper/styles.css
@@ -4,105 +4,46 @@
box-sizing: border-box;
}
-body,
-html {
- height: 100%;
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f0f0f0;
+ color: #333;
margin: 0;
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #121212;
- color: #e0e0e0;
+ padding: 0;
}
#settings {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ margin: 20px;
text-align: center;
- margin: auto;
- background-color: #1e1e1e;
- padding: 40px;
- border-radius: 12px;
- box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
- width: 100%;
- max-width: 600px;
-}
-
-h1 {
- font-size: 2.5em;
- margin-bottom: 20px;
- color: #007bff;
}
label {
- margin-bottom: 12px;
- font-size: 20px;
- color: #d1d1d1;
+ margin-right: 10px;
}
-input[type="number"],
-input[type="range"] {
- padding: 12px;
- margin-bottom: 20px;
- width: 100%;
- max-width: 400px;
+input {
+ padding: 5px;
+ margin-right: 10px;
+ width: 60px;
text-align: center;
- border: 1px solid #444;
- border-radius: 6px;
- background-color: #333;
- color: #e0e0e0;
- font-size: 18px;
- transition: border-color 0.3s ease;
-}
-
-input[type="number"]:focus,
-input[type="range"]:focus {
- border-color: #007bff;
- outline: none;
}
button {
- padding: 12px 24px;
+ padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
- border-radius: 6px;
+ border-radius: 4px;
cursor: pointer;
- transition: background-color 0.3s ease, transform 0.2s ease;
- font-size: 18px;
+ transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
- transform: translateY(-2px);
-}
-
-button:active {
- transform: translateY(0);
}
canvas {
display: none;
- height: 69vh;
-}
-
-@media(max-width: 600px) {
- #settings {
- font-size: 16px;
- }
-
- input[type="number"],
- input[type="range"],
- button {
- width: 90%;
- max-width: none;
- }
-
- canvas {
- height: 50vh;
- }
+ margin: 20px auto;
+ border: 1px solid #ccc;
}