sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

Compare commits

base: sageTheDm:80f20c4b094dcfaeb7dac36a72e7cd9aad08d50c
Branches Tags
sageTheDm:main
interstellar_development:main
..
compare: sageTheDm:916487f82d0e0cbf20da15d73482369601265a49
Branches Tags
sageTheDm:main
interstellar_development:main

No commits in common. "80f20c4b094dcfaeb7dac36a72e7cd9aad08d50c" and "916487f82d0e0cbf20da15d73482369601265a49" have entirely different histories.
80f20c4b09 ... 916487f82d

4 changed files with 77 additions and 58 deletions
Show stats Expand all files Collapse all files

14
secret/mineSweeper/counter.js Normal file
View file

@ -0,0 +1,14 @@
'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;
});

30
secret/mineSweeper/index.html
View file

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

52
secret/mineSweeper/script.js
View file

@ -12,33 +12,26 @@ const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
class Minesweeper { class Minesweeper {
constructor(width, height, bombs) { constructor(w, h, bombs) {
this.size = 25; this.size = 25;
this.field = new Array(width); this.field = new Array(w);
this.bombs = new Array(width); this.bombs = new Array(w);
for (let x = 0; x < this.field.length; x++) { for (let x = 0; x < this.field.length; x++) {
this.field[x] = new Array(height); this.field[x] = new Array(h);
this.bombs[x] = new Array(height); this.bombs[x] = new Array(h);
for (let y = 0; y < this.field[x].length; y++) { for (let y = 0; y < this.field.length; y++) {
this.field[x][y] = 1; this.field[x][y] = 1;
this.bombs[x][y] = false; this.bombs[x][y] = false;
} }
} }
this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs; for (let i = 0; i < bombs; i++) {
this.width = width; let x = Math.floor(Math.random() * w);
this.height = height; let y = Math.floor(Math.random() * h);
this.firstClick = false; this.bombs[x][y] ? i-- : this.bombs[x][y] = true;
this.drawField();
} }
generateBombs() { this.drawField();
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) {
@ -58,14 +51,11 @@ class Minesweeper {
for (let y = 0; y < this.field[x].length; y++) { for (let y = 0; y < this.field[x].length; y++) {
if (this.field[x][y] != 0 && !this.bombs[x][y]) { if (this.field[x][y] != 0 && !this.bombs[x][y]) {
return; 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(); this.drawField();
alert('You won!'); alert("You won!");
window.location.reload(); window.location.reload();
} }
@ -91,11 +81,10 @@ class Minesweeper {
uncoverSquare(x, y) { uncoverSquare(x, y) {
if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) {
if (this.bombs[x][y] && this.field[x][y] == 1) { if (this.bombs[x][y] && this.field[x][y] == 1) {
alert('You lost!'); alert("You lost!");
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++) {
@ -113,9 +102,9 @@ class Minesweeper {
drawSquare(x, y, type) { drawSquare(x, y, type) {
ctx.lineWidth = 3; ctx.lineWidth = 3;
let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type != 0 ? covered : uncovered; ctx.fillStyle = type !== 0 ? activeColor : color1;
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);
@ -134,12 +123,9 @@ class Minesweeper {
} }
drawField() { drawField() {
if (window.innerWidth > window.innerHeight) { const squareWidth = window.innerWidth / (this.field.length + 4);
this.size = window.innerHeight / (this.field[0].length + 4); const squareHeight = window.innerHeight / (this.field[0].length + 4);
} else { squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight;
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;

5
secret/mineSweeper/styles.css
View file

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