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

update for patrick to change the rendering

Browse source
This commit is contained in:
sageTheDM 2025-01-04 22:31:47 +01:00
parent bfdab37fcd
commit 2fab0a38ea
3 changed files with 102 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
secret/mineSweeper/index.html
View file

@ -5,9 +5,17 @@
<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">
</head> </head>
<body> <body>
<div id="settings">
<label for="gridSize">Grid Size:</label>
<input type="number" id="gridSize" min="1" value="18">
<label for="bombs">Number of Bombs:</label>
<input type="number" id="bombs" min="1" value="54">
<button id="startGame">Start Game</button>
</div>
<canvas id="game"></canvas> <canvas id="game"></canvas>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

54
secret/mineSweeper/script.js
View file

@ -1,3 +1,28 @@
// 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);
// // Hide settings and show canvas
// 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);
// }
const canvas = document.getElementById('game'); const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -93,19 +118,22 @@ class Minesweeper {
drawSquare(x, y, type) { drawSquare(x, y, type) {
ctx.lineWidth = 3; ctx.lineWidth = 3;
x += 2, y += 2; x += 2, y += 2;
type != 0 ? ctx.fillStyle = 'lightgrey' : ctx.fillStyle = 'darkgrey'; let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
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 = 'black'; 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);
if (type != 1) { if (type != 1) {
const fontSize = this.size / 2; const fontSize = this.size / 2;
const number = this.getNearbyBombs(x - 2, y - 2) const number = this.getNearbyBombs(x - 2, y - 2);
let finalPrint; let finalPrint;
ctx.font = `${fontSize}px monospace`; ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = 'black'; ctx.fillStyle = '#000';
type == 0 ? finalPrint = number ? number : ' ' : {} type == 0 ? finalPrint = number ? number : ' ' : {};
type == 2 ? finalPrint = '🚩' : {} type == 2 ? finalPrint = '🚩' : {};
type == 3 ? finalPrint = '❓' : {} type == 3 ? finalPrint = '❓' : {};
ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3); ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3);
} }
} }
@ -116,9 +144,13 @@ class Minesweeper {
const squareWidth = canvas.width / (this.field.length + 4); const squareWidth = canvas.width / (this.field.length + 4);
const squareHeight = canvas.height / (this.field[0].length + 4); const squareHeight = canvas.height / (this.field[0].length + 4);
squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight; squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight;
const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
for (let x = 0; x < this.field.length; x++) { for (let x = 0; x < this.field.length; x++) {
for (let y = 0; y < this.field[x].length; y++) { for (let y = 0; y < this.field[x].length; y++) {
this.drawSquare(x, y, this.field[x][y]); this.drawSquare(x, y, this.field[x][y], offsetX, offsetY);
} }
} }
} }
@ -130,12 +162,12 @@ 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 * 2) / 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 * 2) / 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 * 2) / 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 * 2) / field.size);
field.markSquare(x, y) field.markSquare(x, y);
}); });

49
secret/mineSweeper/styles.css Normal file
View file

@ -0,0 +1,49 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
#settings {
margin: 20px;
text-align: center;
}
label {
margin-right: 10px;
}
input {
padding: 5px;
margin-right: 10px;
width: 60px;
text-align: center;
}
button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
canvas {
display: none;
margin: 20px auto;
border: 1px solid #ccc;
}