diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html new file mode 100644 index 0000000..e94569d --- /dev/null +++ b/secret/mineSweeper/index.html @@ -0,0 +1,15 @@ + + + + + + + Minesweeper + + + + + + + + \ No newline at end of file diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js new file mode 100644 index 0000000..487ce04 --- /dev/null +++ b/secret/mineSweeper/script.js @@ -0,0 +1,141 @@ +const canvas = document.getElementById('game'); +const ctx = canvas.getContext('2d'); + +class Minesweeper { + constructor(w, h, bombs) { + this.size = 25; + this.field = new Array(w); + this.bombs = new Array(w); + 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][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.drawField(); + } + + getNearbyBombs(x, y) { + let counter = 0; + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { + this.bombs[newX][newY] ? counter++ : {}; + } + } + } + return counter; + } + + checkWin() { + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + if (this.field[x][y] != 0 && !this.bombs[x][y]) { + return; + } + } + } + this.drawField(); + alert("You won!"); + window.location.reload(); + } + + markSquare(x, y) { + if (x < this.field.length && y < this.field[0].length) { + switch (this.field[x][y]) { + case 1: + this.field[x][y]++; + break; + case 2: + this.field[x][y]++; + break; + case 3: + this.field[x][y] = 1; + break; + default: + break; + } + this.drawField(); + } + } + + 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!"); + window.location.reload(); + } else if (this.field[x][y] == 1) { + this.field[x][y] = 0; + if (this.getNearbyBombs(x, y) == 0) { + for (let newX = x - 1; newX <= x + 1; newX++) { + for (let newY = y - 1; newY <= y + 1; newY++) { + if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { + this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {}; + } + } + } + } + }; + this.checkWin(); + this.drawField(); + } + } + + drawSquare(x, y, type) { + ctx.lineWidth = 3; + x += 2, y += 2; + type != 0 ? ctx.fillStyle = 'lightgrey' : ctx.fillStyle = 'darkgrey'; + ctx.fillRect(x * this.size, y * this.size, this.size, this.size); + ctx.strokeStyle = 'black'; + ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); + if (type != 1) { + const fontSize = this.size / 2; + const number = this.getNearbyBombs(x - 2, y - 2) + let finalPrint; + ctx.font = `${fontSize}px monospace`; + ctx.fillStyle = 'black'; + type == 0 ? finalPrint = number ? number : ' ' : {} + type == 2 ? finalPrint = '🚩' : {} + type == 3 ? finalPrint = '❓' : {} + ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3); + } + } + + drawField() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + const squareWidth = canvas.width / (this.field.length + 4); + const squareHeight = canvas.height / (this.field[0].length + 4); + squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight; + for (let x = 0; x < this.field.length; x++) { + for (let y = 0; y < this.field[x].length; y++) { + this.drawSquare(x, y, this.field[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) +});