what the hell
This commit is contained in:
parent
ece497e2cf
commit
c8ba7b494f
3 changed files with 113 additions and 61 deletions
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue