interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed minesweeper

Browse source
This commit is contained in:
Patrick 2025-01-05 20:26:18 +01:00
parent ffca29cc18
commit fec941e502
4 changed files with 53 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

14
secret/mineSweeper/counter.js
View file

@ -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;
});

60
secret/mineSweeper/index.html
View file

@ -1,44 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minesweeper</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body> <head>
<div id="settings"> <meta charset="UTF-8" />
<h1>Minesweeper</h1> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<label for="gridSize">Grid Size:</label> <title>Minesweeper</title>
<input <link rel="stylesheet" href="styles.css" />
type="number" </head>
id="gridSize"
min="1"
max="25"
value="9"
aria-label="Grid Size"
/>
<label for="bombs">Number of Bombs:</label> <body>
<input <div id="settings">
type="range" <h1>Minesweeper</h1>
id="bombs" <label for="gridSize">Grid Size:</label>
min="1" <input type="number" id="gridSize" min="6" max="25" value="9" aria-label="Grid Size" />
max="80"
value="20"
aria-label="Number of Bombs"
/>
<span id="bombsValue">20</span>
<button id="startGame">Start Game</button> <label for="bombs">Number of Bombs:</label>
</div> <input type="number" id="bombs" min="1" max="300" value="9" aria-label="Number of Bombs" />
<div class="container"> <button id="startGame">Start Game</button>
<canvas id="game"></canvas> </div>
</div>
<script src="script.js"></script> <div class="container">
<script src="counter.js"></script> <canvas id="game"></canvas>
</body> </div>
</html>
<script src="script.js"></script>
</body>
</html>

47
secret/mineSweeper/script.js
View file

@ -12,28 +12,35 @@ const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
class Minesweeper { class Minesweeper {
constructor(w, h, bombs) { constructor(width, height, bombs) {
this.size = 25; this.size = 25;
this.field = new Array(w); this.field = new Array(width);
this.bombs = new Array(w); this.bombs = new Array(width);
for (let x = 0; x < this.field.length; x++) { for (let x = 0; x < this.field.length; x++) {
this.field[x] = new Array(h); this.field[x] = new Array(height);
this.bombs[x] = new Array(h); this.bombs[x] = new Array(height);
for (let y = 0; y < this.field.length; y++) { for (let y = 0; y < this.field[x].length; y++) {
this.field[x][y] = 1; this.field[x][y] = 1;
this.bombs[x][y] = false; this.bombs[x][y] = false;
} }
} }
for (let i = 0; i < bombs; i++) { this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs;
let x = Math.floor(Math.random() * w); this.width = width;
let y = Math.floor(Math.random() * h); this.height = height;
this.bombs[x][y] ? i-- : this.bombs[x][y] = true; this.firstClick = false;
}
this.drawField(); 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) { getNearbyBombs(x, y) {
let counter = 0; let counter = 0;
for (let newX = x - 1; newX <= x + 1; newX++) { for (let newX = x - 1; newX <= x + 1; newX++) {
@ -85,6 +92,7 @@ class Minesweeper {
window.location.reload(); window.location.reload();
} else if (this.field[x][y] == 1) { } else if (this.field[x][y] == 1) {
this.field[x][y] = 0; this.field[x][y] = 0;
!this.firstClick ? this.generateBombs() : {};
if (this.getNearbyBombs(x, y) == 0) { if (this.getNearbyBombs(x, y) == 0) {
for (let newX = x - 1; newX <= x + 1; newX++) { for (let newX = x - 1; newX <= x + 1; newX++) {
for (let newY = y - 1; newY <= y + 1; newY++) { for (let newY = y - 1; newY <= y + 1; newY++) {
@ -102,9 +110,9 @@ class Minesweeper {
drawSquare(x, y, type) { drawSquare(x, y, type) {
ctx.lineWidth = 3; ctx.lineWidth = 3;
let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type !== 0 ? activeColor : color1; ctx.fillStyle = type != 0 ? covered : uncovered;
ctx.fillRect(x * this.size, y * this.size, this.size, this.size); ctx.fillRect(x * this.size, y * this.size, this.size, this.size);
ctx.strokeStyle = '#000'; ctx.strokeStyle = '#000';
ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); ctx.strokeRect(x * this.size, y * this.size, this.size, this.size);
@ -123,9 +131,12 @@ class Minesweeper {
} }
drawField() { drawField() {
const squareWidth = window.innerWidth / (this.field.length + 4); if (window.innerWidth > window.innerHeight) {
const squareHeight = window.innerHeight / (this.field[0].length + 4); this.size = window.innerHeight / (this.field[0].length + 4);
squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight; } else {
this.size = window.innerWidth / (this.field.length + 4);
}
canvas.width = this.size * this.field.length; canvas.width = this.size * this.field.length;
canvas.height = this.size * this.field[0].length; canvas.height = this.size * this.field[0].length;

7
secret/mineSweeper/styles.css
View file

@ -88,7 +88,6 @@ button:active {
canvas { canvas {
display: none; display: none;
height: 69vh;
} }
@media(max-width: 600px) { @media(max-width: 600px) {
@ -102,8 +101,4 @@ canvas {
width: 90%; width: 90%;
max-width: none; max-width: none;
} }
}
canvas {
height: 50vh;
}
}