<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bingo Game</title>
<script src="bingo.js"></script>
</head>
<body>
<h1>Bingo Game</h1>
<table id="bingoTable"></table>
<button onclick="newGame()">New Game</button>
</body>
</html>
const rows = 5;
const cols = 5;
const numbers = [];
const chosenNumbers = [];
for (let i = 1; i <= 75; i++) {
numbers.push(i);
}
for (let i = numbers.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[numbers[i], numbers[j]] = [numbers[j], numbers[i]];
}
const table = document.getElementById("bingoTable");
for (let i = 0; i < rows; i++) {
const row = document.createElement("tr");
for (let j = 0; j < cols; j++) {
const cell = document.createElement("td");
cell.textContent = numbers[i * cols + j];
row.appendChild(cell);
}
table.appendChild(row);
}
table.addEventListener("click", function(event) {
if (event.target.tagName === "TD") {
event.target.classList.add("chosen");
chosenNumbers.push(parseInt(event.target.textContent));
checkBingo();
}
});
function checkBingo() {
if (chosenNumbers.length < 5) {
return;
}
const rows = [];
const cols = [];
const diag1 = [];
const diag2 = [];
for (let i = 0; i < 5; i++) {
rows[i] = [];
cols[i] = [];
for (let j = 0; j < 5; j++) {
rows[i][j] = false;
cols[i][j] = false;
if (i === j) {
diag1.push(false);
}
if (i + j === 4) {
diag2.push(false);
}
}
}
for (let i = 0; i < chosenNumbers.length; i++) {
const number = chosenNumbers[i];
const row = Math.floor((number - 1) / 5);
const col = (number - 1) % 5;
rows[row][col] = true;
cols[col][row] = true;
if (row === col) {
diag1[row] = true;
}
if (row + col === 4) {
diag2[row] = true;
}
}
for (let i = 0; i < 5; i++) {
if (rows[i].every(x => x === true) ||
cols[i].every(x => x === true)) {
alert("Bingo!");
return;
}
}
if (diag1.every(x => x === true) || diag2.every(x => x === true)) {
alert("Bingo!");
return;
}
}