所以我想做一个新年音乐宾果游戏，我已经做了，所以歌曲得到随机，你可以 Select 你得到的歌曲.但是当你连续四次的时候什么都不会发生.我试着添加一个sumbit按钮，但没有任何react .我的理想的事情将是，如果宾果弹出时， Select ，而不是当提交按下.
// Define the list of songs with artist names
const songs = [
"Auld Lang Syne - Traditional",
"Happy New Year - ABBA",
"New Year's Day - U2",
"What Are You Doing New Year's Eve? - Ella Fitzgerald",
"It's Just Another New Year's Eve - Barry Manilow",
"New Year's Eve - Snoop Dogg ft. Marty James",
"New Year's Day - Taylor Swift",
"Bringing in a Brand New Year - B.B. King",
"New Year's Resolution - Otis Redding & Carla Thomas",
"This Will Be (An Everlasting Love) - Natalie Cole",
"New Year's Kiss - Gwen Stefani",
"Year's End - The Black Eyed Peas",
"Ring in the New - Imogen Heap",
"Another Year Has Gone By - Celine Dion",
"New Year's Eve 1999 - Alabama",
"New Year's Eve - Tom Waits"
];
let shuffledSongs = [];
// Function to randomize songs and update the Bingo card
function randomizeSongs() {
const bingoCard = document.getElementById("bingo-card");
bingoCard.innerHTML = "";
shuffledSongs = shuffleArray(songs);
// Create Bingo card cells and add them to the card
for (let i = 0; i < 16; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.textContent = shuffledSongs[i];
// Add a click event listener to mark the cell
cell.addEventListener("click", function() {
this.classList.toggle("selected");
checkBingo();
});
bingoCard.appendChild(cell);
}
// Reset the Bingo message
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "none";
}
// Function to check for a bingo
function checkBingo() {
const rows = document.querySelectorAll(".cell");
const selectedCells = Array.from(rows).filter(cell => cell.classList.contains("selected"));
// Check for a horizontal bingo
for (let i = 0; i < 4; i++) {
const row = selectedCells.filter(cell => cell.textContent === shuffledSongs[i * 4]);
if (row.length === 4) {
showBingoMessage();
resetGame();
return;
}
}
// Check for a vertical bingo
for (let i = 0; i < 4; i++) {
const column = selectedCells.filter(cell => cell.textContent === shuffledSongs[i]);
if (column.length === 4) {
showBingoMessage();
resetGame();
return;
}
}
}
// Function to show the Bingo message
function showBingoMessage() {
const bingoMessage = document.getElementById("bingo-message");
bingoMessage.style.display = "block";
}
// Function to reset the game
function resetGame() {
const selectedCells = document.querySelectorAll(".selected");
selectedCells.forEach(cell => cell.classList.remove("selected"));
}
// Function to shuffle an array using Fisher-Yates algorithm
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Function to create fireworks
function createFireworks() {
const fireworksContainer = document.getElementById("fireworks-container");
for (let i = 0; i < 50; i++) {
const firework = document.createElement("img");
firework.src = "https://i.gifer.com/VZvx.gif"; // Replace with the URL of your fireworks GIF
firework.classList.add("firework");
firework.style.left = `${Math.random() * 100}vw`;
firework.style.top = `${Math.random() * 100}vh`;
firework.style.animationDuration = `${Math.random() * 2 + 1}s`;
fireworksContainer.appendChild(firework);
}
}
// Initial randomization on page load
randomizeSongs();
// Initial fireworks creation on page load
createFireworks();
// Function to submit bingo
function submitBingo() {
checkBingo();
}body {
background: linear-gradient(to bottom, #0d0d0d, #0d0d0d 50%, #141414 50%, #141414);
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Remove overflow: hidden; to enable scrolling */
min-height: 100vh;
/* Set a minimum height to allow content to fill */
}
#fireworks-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
/* Set the z-index to a lower value */
}
.firework {
position: absolute;
width: 50px;
height: 50px;
animation: explode 2s ease-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
#bingo-card {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 400px;
margin: 20px auto;
z-index: 1;
/* Set the z-index to a higher value */
}
.cell {
position: relative;
border: 1px solid #fff;
padding: 10px;
text-align: center;
font-size: 14px;
cursor: pointer;
background-color: #1e1e1e;
}
.selected {
background-color: #a0a0a0;
}
.bingo-text {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: gold;
display: none;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: gold;
color: #000;
border: none;
cursor: pointer;
z-index: 1;
/* Set the z-index to a higher value */
}
/* Responsive styling for smaller screens */
@media screen and (max-width: 480px) {
button {
width: 100%;
/* Make the button full width on smaller screens */
}
}<div id="fireworks-container"></div>
<h1>New Year's Eve Bingo</h1>
<div id="bingo-card"></div>
<div class="bingo-text" id="bingo-message">BINGO!</div>
<button onclick="randomizeSongs()">Randomize Songs</button>
<button onclick="submitBingo()">Submit Bingo</button>