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

main #21

Merged
Patrick_Pluto merged 2 commits from sageTheDm/pages:main into main 2025-01-05 00:14:19 +01:00
Conversation 0 Commits 2 Files changed 3 +113 -61
3 changed files with 113 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c8ba7b494f - Show all commits

13
secret/mineSweeper/index.html
View file

@ -10,13 +10,20 @@
<body>
<div id="settings">
<h1>Minesweeper</h1>
<label for="gridSize">Grid Size:</label>
<input type="number" id="gridSize" min="1" value="18">
<input type="number" id="gridSize" min="1" max="25" value="9" aria-label="Grid Size">
<label for="bombs">Number of Bombs:</label>
<input type="number" id="bombs" min="1" value="54">
<input type="range" id="bombs" min="1" max="80" value="20" aria-label="Number of Bombs">
<button id="startGame">Start Game</button>
</div>
<canvas id="game"></canvas>
<div class="container">
<canvas id="game"></canvas>
</div>
<script src="script.js"></script>
</body>

70
secret/mineSweeper/script.js
View file

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

91
secret/mineSweeper/styles.css
View file

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