diff --git a/secret/mineSweeper/counter.js b/secret/mineSweeper/counter.js deleted file mode 100644 index 8e9f78a..0000000 --- a/secret/mineSweeper/counter.js +++ /dev/null @@ -1,14 +0,0 @@ -'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 22c9313..eabf508 100644 --- a/secret/mineSweeper/index.html +++ b/secret/mineSweeper/index.html @@ -1,44 +1,30 @@ - - - - Minesweeper - - - -
-

Minesweeper

- - + + + + Minesweeper + + - - - 20 + +
+

Minesweeper

+ + - -
+ + -
- -
+ +
- - - - +
+ +
+ + + + + \ No newline at end of file diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index 8945dd7..d35c436 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -12,28 +12,35 @@ const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); class Minesweeper { - constructor(w, h, bombs) { + constructor(width, height, bombs) { this.size = 25; - this.field = new Array(w); - this.bombs = new Array(w); + this.field = new Array(width); + this.bombs = new Array(width); for (let x = 0; x < this.field.length; x++) { - this.field[x] = new Array(h); - this.bombs[x] = new Array(h); - for (let y = 0; y < this.field.length; y++) { + 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][y] = 1; this.bombs[x][y] = false; } } - 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.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; + } + this.firstClick = true; + } + getNearbyBombs(x, y) { let counter = 0; for (let newX = x - 1; newX <= x + 1; newX++) { @@ -51,11 +58,14 @@ 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(); } @@ -81,10 +91,11 @@ 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++) { @@ -102,9 +113,9 @@ class Minesweeper { drawSquare(x, y, type) { ctx.lineWidth = 3; - let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; - let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; - ctx.fillStyle = type !== 0 ? activeColor : color1; + let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; + let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; + ctx.fillStyle = type != 0 ? covered : uncovered; 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); @@ -123,9 +134,12 @@ 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; + if (window.innerWidth > window.innerHeight) { + this.size = window.innerHeight / (this.field[0].length + 4); + } else { + this.size = window.innerWidth / (this.field.length + 4); + } + 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 6eb681f..738993d 100644 --- a/secret/mineSweeper/styles.css +++ b/secret/mineSweeper/styles.css @@ -88,7 +88,6 @@ button:active { canvas { display: none; - height: 69vh; } @media(max-width: 600px) { @@ -102,8 +101,4 @@ canvas { width: 90%; max-width: none; } - - canvas { - height: 50vh; - } -} +} \ No newline at end of file