diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html index e94569d..c393c43 100644 --- a/secret/mineSweeper/index.html +++ b/secret/mineSweeper/index.html @@ -5,11 +5,19 @@ Minesweeper + - +
+ + + + + +
+ - \ No newline at end of file + diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index 487ce04..d1cb835 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -1,3 +1,28 @@ +// 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); + +// // Hide settings and show canvas +// document.getElementById('settings').style.display = 'none'; +// document.getElementById('game').style.display = 'block'; + +// // 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'); @@ -93,19 +118,22 @@ class Minesweeper { drawSquare(x, y, type) { ctx.lineWidth = 3; x += 2, y += 2; - type != 0 ? ctx.fillStyle = 'lightgrey' : ctx.fillStyle = 'darkgrey'; + 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 = 'black'; + ctx.strokeStyle = '#000'; 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) + 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.font = `${fontSize}px sans-serif`; + ctx.fillStyle = '#000'; + 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); } } @@ -116,9 +144,13 @@ class Minesweeper { 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; + + const offsetX = (canvas.width - (this.field.length * this.size)) / 2; + const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; + 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]); + this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); } } } @@ -130,12 +162,12 @@ 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) + 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) + field.markSquare(x, y); }); diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css new file mode 100644 index 0000000..a2cbba2 --- /dev/null +++ b/secret/mineSweeper/styles.css @@ -0,0 +1,49 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; + color: #333; + margin: 0; + padding: 0; +} + +#settings { + margin: 20px; + text-align: center; +} + +label { + margin-right: 10px; +} + +input { + padding: 5px; + margin-right: 10px; + width: 60px; + text-align: center; +} + +button { + padding: 8px 16px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +canvas { + display: none; + margin: 20px auto; + border: 1px solid #ccc; +}