diff --git a/secret/mineSweeper/counter.js b/secret/mineSweeper/counter.js new file mode 100644 index 0000000..8e9f78a --- /dev/null +++ b/secret/mineSweeper/counter.js @@ -0,0 +1,14 @@ +'use strict' + +document.addEventListener('DOMContentLoaded', () => { + const bombsSlider = document.getElementById('bombs'); + const bombsValue = document.getElementById('bombsValue'); + + // Update the displayed number of bombs when the slider value changes + bombsSlider.addEventListener('input', () => { + bombsValue.textContent = bombsSlider.value; + }); + + // Initialize the displayed value on page load + bombsValue.textContent = bombsSlider.value; +}); diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html index eabf508..22c9313 100644 --- a/secret/mineSweeper/index.html +++ b/secret/mineSweeper/index.html @@ -1,30 +1,44 @@ + + + + Minesweeper + + - - - - Minesweeper - - + +
+

Minesweeper

+ + - -
-

Minesweeper

- - + + + 20 - - + +
- -
+
+ +
-
- -
- - - - - \ No newline at end of file + + + + diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index d35c436..8945dd7 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -12,33 +12,26 @@ const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); class Minesweeper { - constructor(width, height, bombs) { + constructor(w, h, bombs) { this.size = 25; - this.field = new Array(width); - this.bombs = new Array(width); + this.field = new Array(w); + this.bombs = new Array(w); for (let x = 0; x < this.field.length; x++) { - this.field[x] = new Array(height); - this.bombs[x] = new Array(height); - for (let y = 0; y < this.field[x].length; y++) { + this.field[x] = new Array(h); + this.bombs[x] = new Array(h); + for (let y = 0; y < this.field.length; y++) { this.field[x][y] = 1; this.bombs[x][y] = false; } } - this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs; - this.width = width; - this.height = height; - this.firstClick = false; - this.drawField(); - } - - generateBombs() { - for (let i = 0; i < this.bombAmount; i++) { - let x = Math.floor(Math.random() * this.width); - let y = Math.floor(Math.random() * this.height); - (this.bombs[x][y] || this.field[x][y] == 0) ? i-- : this.bombs[x][y] = true; + for (let i = 0; i < bombs; i++) { + let x = Math.floor(Math.random() * w); + let y = Math.floor(Math.random() * h); + this.bombs[x][y] ? i-- : this.bombs[x][y] = true; } - this.firstClick = true; + + this.drawField(); } getNearbyBombs(x, y) { @@ -58,14 +51,11 @@ class Minesweeper { for (let y = 0; y < this.field[x].length; y++) { if (this.field[x][y] != 0 && !this.bombs[x][y]) { return; - } else if (this.field[x][y] == 0 && this.bombs[x][y]) { - alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`); - this.bombs[x][y] = false; } } } this.drawField(); - alert('You won!'); + alert("You won!"); window.location.reload(); } @@ -91,11 +81,10 @@ class Minesweeper { uncoverSquare(x, y) { if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { if (this.bombs[x][y] && this.field[x][y] == 1) { - alert('You lost!'); + alert("You lost!"); window.location.reload(); } else if (this.field[x][y] == 1) { this.field[x][y] = 0; - !this.firstClick ? this.generateBombs() : {}; if (this.getNearbyBombs(x, y) == 0) { for (let newX = x - 1; newX <= x + 1; newX++) { for (let newY = y - 1; newY <= y + 1; newY++) { @@ -113,9 +102,9 @@ class Minesweeper { drawSquare(x, y, type) { ctx.lineWidth = 3; - let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; - let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; - ctx.fillStyle = type != 0 ? covered : uncovered; + let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; + let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; + ctx.fillStyle = type !== 0 ? activeColor : color1; ctx.fillRect(x * this.size, y * this.size, this.size, this.size); ctx.strokeStyle = '#000'; ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); @@ -134,12 +123,9 @@ class Minesweeper { } drawField() { - if (window.innerWidth > window.innerHeight) { - this.size = window.innerHeight / (this.field[0].length + 4); - } else { - this.size = window.innerWidth / (this.field.length + 4); - } - + 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; diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css index 738993d..6eb681f 100644 --- a/secret/mineSweeper/styles.css +++ b/secret/mineSweeper/styles.css @@ -88,6 +88,7 @@ button:active { canvas { display: none; + height: 69vh; } @media(max-width: 600px) { @@ -101,4 +102,8 @@ canvas { width: 90%; max-width: none; } -} \ No newline at end of file + + canvas { + height: 50vh; + } +}