Merge pull request 'main' (#3) from interstellar_development/interstellar_website:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/pages/pulls/3
This commit is contained in:
sageTheDm 2025-01-06 11:26:32 +01:00
commit 80f20c4b09
4 changed files with 58 additions and 77 deletions

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

View file

@ -1,44 +1,30 @@
<!DOCTYPE html>
<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>
<div id="settings">
<h1>Minesweeper</h1>
<label for="gridSize">Grid Size:</label>
<input
type="number"
id="gridSize"
min="1"
max="25"
value="9"
aria-label="Grid Size"
/>
<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>
<label for="bombs">Number of Bombs:</label>
<input
type="range"
id="bombs"
min="1"
max="80"
value="20"
aria-label="Number of Bombs"
/>
<span id="bombsValue">20</span>
<body>
<div id="settings">
<h1>Minesweeper</h1>
<label for="gridSize">Grid Size:</label>
<input type="number" id="gridSize" min="6" max="25" value="9" aria-label="Grid Size" />
<button id="startGame">Start Game</button>
</div>
<label for="bombs">Number of Bombs:</label>
<input type="number" id="bombs" min="1" max="300" value="9" aria-label="Number of Bombs" />
<div class="container">
<canvas id="game"></canvas>
</div>
<button id="startGame">Start Game</button>
</div>
<script src="script.js"></script>
<script src="counter.js"></script>
</body>
</html>
<div class="container">
<canvas id="game"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

View file

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

View file

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