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:
commit
80f20c4b09
4 changed files with 58 additions and 77 deletions
|
@ -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;
|
||||
});
|
|
@ -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>
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue