From c8ba7b494f04be6ff4799080bd3d1d344f26fa76 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sun, 5 Jan 2025 00:13:09 +0100 Subject: [PATCH] what the hell --- secret/mineSweeper/index.html | 13 +++-- secret/mineSweeper/script.js | 70 +++++++++++---------------- secret/mineSweeper/styles.css | 91 +++++++++++++++++++++++++++++------ 3 files changed, 113 insertions(+), 61 deletions(-) diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html index c393c43..9109ff7 100644 --- a/secret/mineSweeper/index.html +++ b/secret/mineSweeper/index.html @@ -10,13 +10,20 @@
+

Minesweeper

- + + - + +
- + +
+ +
+ diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js index f37cb34..8945dd7 100644 --- a/secret/mineSweeper/script.js +++ b/secret/mineSweeper/script.js @@ -1,27 +1,12 @@ -// 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('startGame').addEventListener('click', function () { + 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'; + 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); -// } + renderGame(gridSize, bombs); +}); const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); @@ -117,7 +102,6 @@ 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; @@ -127,7 +111,7 @@ class Minesweeper { if (type != 1) { const fontSize = this.size / 2; - const number = this.getNearbyBombs(x - 2, y - 2); + const number = this.getNearbyBombs(x, y); let finalPrint; ctx.font = `${fontSize}px sans-serif`; ctx.fillStyle = '#000'; @@ -141,9 +125,9 @@ class Minesweeper { drawField() { const squareWidth = window.innerWidth / (this.field.length + 4); const squareHeight = window.innerHeight / (this.field[0].length + 4); - canvas.width = squareWidth * this.field.length; - canvas.height = squareHeight * this.field[0].length; - squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight; + squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight; + canvas.width = this.size * this.field.length; + canvas.height = this.size * this.field[0].length; const offsetX = (canvas.width - (this.field.length * this.size)) / 2; const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; @@ -156,18 +140,20 @@ class Minesweeper { } } -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); -}); +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); + }); +}; diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css index a2cbba2..e9155df 100644 --- a/secret/mineSweeper/styles.css +++ b/secret/mineSweeper/styles.css @@ -4,46 +4,105 @@ box-sizing: border-box; } -body { - font-family: 'Arial', sans-serif; - background-color: #f0f0f0; - color: #333; +body, +html { + height: 100%; margin: 0; - padding: 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; } #settings { - margin: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; 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-right: 10px; + margin-bottom: 12px; + font-size: 20px; + color: #d1d1d1; } -input { - padding: 5px; - margin-right: 10px; - width: 60px; +input[type="number"], +input[type="range"] { + padding: 12px; + margin-bottom: 20px; + width: 100%; + max-width: 400px; 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: 8px 16px; + padding: 12px 24px; background-color: #007bff; color: white; border: none; - border-radius: 4px; + border-radius: 6px; cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color 0.3s ease, transform 0.2s ease; + font-size: 18px; } button:hover { background-color: #0056b3; + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); } canvas { display: none; - margin: 20px auto; - border: 1px solid #ccc; + 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; + } } -- 2.39.5