what the hell

This commit is contained in:
sageTheDM 2025-01-05 00:13:09 +01:00
parent ece497e2cf
commit c8ba7b494f
3 changed files with 113 additions and 61 deletions

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