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

Compare commits

base: interstellar_development:11087d4935bea0f4b6dd03d443c08ec1b45b7a47
Branches Tags
interstellar_development:main
..
compare: interstellar_development:465ed64ba489e99a0c30cc632d2258079f91d86f
Branches Tags
interstellar_development:main

No commits in common. "11087d4935bea0f4b6dd03d443c08ec1b45b7a47" and "465ed64ba489e99a0c30cc632d2258079f91d86f" have entirely different histories.
11087d4935 ... 465ed64ba4

3 changed files with 61 additions and 113 deletions
Show stats Expand all files Collapse all files

13
secret/mineSweeper/index.html
View file

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

70
secret/mineSweeper/script.js
View file

@ -1,12 +1,27 @@
document.getElementById('startGame').addEventListener('click', function () { // document.getElementById('startGame').addEventListener('click', function () {
const gridSize = parseInt(document.getElementById('gridSize').value); // // Get values from the inputs
const bombs = parseInt(document.getElementById('bombs').value); // const gridSize = parseInt(document.getElementById('gridSize').value);
// const bombs = parseInt(document.getElementById('bombs').value);
document.getElementById('settings').style.display = 'none'; // // Hide settings and show canvas
document.getElementById('game').style.display = 'block'; // document.getElementById('settings').style.display = 'none';
// document.getElementById('game').style.display = 'block';
renderGame(gridSize, bombs); // // 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);
// }
const canvas = document.getElementById('game'); const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -102,6 +117,7 @@ class Minesweeper {
drawSquare(x, y, type) { drawSquare(x, y, type) {
ctx.lineWidth = 3; ctx.lineWidth = 3;
x += 2, y += 2;
let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type !== 0 ? activeColor : color1; ctx.fillStyle = type !== 0 ? activeColor : color1;
@ -111,7 +127,7 @@ class Minesweeper {
if (type != 1) { if (type != 1) {
const fontSize = this.size / 2; const fontSize = this.size / 2;
const number = this.getNearbyBombs(x, y); const number = this.getNearbyBombs(x - 2, y - 2);
let finalPrint; let finalPrint;
ctx.font = `${fontSize}px sans-serif`; ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
@ -125,9 +141,9 @@ class Minesweeper {
drawField() { drawField() {
const squareWidth = window.innerWidth / (this.field.length + 4); const squareWidth = window.innerWidth / (this.field.length + 4);
const squareHeight = window.innerHeight / (this.field[0].length + 4); const squareHeight = window.innerHeight / (this.field[0].length + 4);
squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight; canvas.width = squareWidth * this.field.length;
canvas.width = this.size * this.field.length; canvas.height = squareHeight * this.field[0].length;
canvas.height = this.size * this.field[0].length; squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight;
const offsetX = (canvas.width - (this.field.length * this.size)) / 2; const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
@ -140,20 +156,18 @@ class Minesweeper {
} }
} }
const renderGame = (gridSize, bombs) => { let field = new Minesweeper(18, 18, 54);
let field = new Minesweeper(gridSize, gridSize, bombs); window.addEventListener('resize', () => field.drawField());
window.addEventListener('resize', () => field.drawField()); canvas.addEventListener('click', (event) => {
canvas.addEventListener('click', (event) => { const rect = canvas.getBoundingClientRect();
const rect = canvas.getBoundingClientRect(); const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
const x = Math.floor((event.clientX - rect.left) / field.size); const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
const y = Math.floor((event.clientY - rect.top) / field.size); field.uncoverSquare(x, y);
field.uncoverSquare(x, y); });
}); canvas.addEventListener('contextmenu', (event) => {
canvas.addEventListener('contextmenu', (event) => { event.preventDefault();
event.preventDefault(); const rect = canvas.getBoundingClientRect();
const rect = canvas.getBoundingClientRect(); const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
const x = Math.floor((event.clientX - rect.left) / field.size); const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
const y = Math.floor((event.clientY - rect.top) / field.size); field.markSquare(x, y);
field.markSquare(x, y); });
});
};

91
secret/mineSweeper/styles.css
View file

@ -4,105 +4,46 @@
box-sizing: border-box; box-sizing: border-box;
} }
body, body {
html { font-family: 'Arial', sans-serif;
height: 100%; background-color: #f0f0f0;
color: #333;
margin: 0; margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #121212;
color: #e0e0e0;
} }
#settings { #settings {
display: flex; margin: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: 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 { label {
margin-bottom: 12px; margin-right: 10px;
font-size: 20px;
color: #d1d1d1;
} }
input[type="number"], input {
input[type="range"] { padding: 5px;
padding: 12px; margin-right: 10px;
margin-bottom: 20px; width: 60px;
width: 100%;
max-width: 400px;
text-align: center; 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 { button {
padding: 12px 24px; padding: 8px 16px;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease; transition: background-color 0.3s ease;
font-size: 18px;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
} }
canvas { canvas {
display: none; display: none;
height: 69vh; margin: 20px auto;
} border: 1px solid #ccc;
@media(max-width: 600px) {
#settings {
font-size: 16px;
}
input[type="number"],
input[type="range"],
button {
width: 90%;
max-width: none;
}
canvas {
height: 50vh;
}
} }