92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const gridContainer = document.getElementById('bingo-grid');
|
|
const timerElement = document.getElementById('timer');
|
|
const statusElement = document.getElementById('status-message');
|
|
const countdownOverlay = document.getElementById('countdown-overlay');
|
|
const countdownElement = document.getElementById('countdown-number');
|
|
|
|
let currentNumber = 1;
|
|
const maxNumber = 25;
|
|
let timerInterval;
|
|
let seconds = 0;
|
|
let milliseconds = 0;
|
|
let gameActive = false;
|
|
|
|
function createGrid() {
|
|
for (let i = 0; i < maxNumber; i++) {
|
|
const cell = document.createElement('div');
|
|
cell.classList.add('grid-cell');
|
|
cell.dataset.index = i;
|
|
|
|
const content = document.createElement('div');
|
|
content.classList.add('cell-content');
|
|
cell.appendChild(content);
|
|
|
|
cell.addEventListener('click', () => handleCellClick(cell));
|
|
gridContainer.appendChild(cell);
|
|
}
|
|
}
|
|
|
|
function handleCellClick(cell) {
|
|
if (!gameActive || cell.classList.contains('filled')) {
|
|
return;
|
|
}
|
|
|
|
const content = cell.querySelector('.cell-content');
|
|
if (content.textContent === '') {
|
|
content.textContent = currentNumber;
|
|
cell.classList.add('filled');
|
|
currentNumber++;
|
|
|
|
if (currentNumber > maxNumber) {
|
|
finishGame();
|
|
}
|
|
}
|
|
}
|
|
|
|
function startGame() {
|
|
gameActive = true;
|
|
startTimer();
|
|
statusElement.textContent = 'Fill the grid!';
|
|
}
|
|
|
|
function finishGame() {
|
|
gameActive = false;
|
|
stopTimer();
|
|
statusElement.innerHTML = `Finished in <span class="accent-color">${timerElement.textContent}</span>!`;
|
|
}
|
|
|
|
function startTimer() {
|
|
const startTime = Date.now();
|
|
timerInterval = setInterval(() => {
|
|
const elapsedTime = Date.now() - startTime;
|
|
seconds = Math.floor(elapsedTime / 1000);
|
|
milliseconds = Math.floor((elapsedTime % 1000) / 10);
|
|
timerElement.textContent = `${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`;
|
|
}, 10);
|
|
}
|
|
|
|
function stopTimer() {
|
|
clearInterval(timerInterval);
|
|
}
|
|
|
|
function startCountdown() {
|
|
let count = 3;
|
|
countdownElement.textContent = count;
|
|
countdownOverlay.style.display = 'flex';
|
|
|
|
const countdownInterval = setInterval(() => {
|
|
count--;
|
|
if (count > 0) {
|
|
countdownElement.textContent = count;
|
|
} else {
|
|
clearInterval(countdownInterval);
|
|
countdownOverlay.style.display = 'none';
|
|
startGame();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
createGrid();
|
|
startCountdown();
|
|
}); |