css 新年音乐Bingo

hi3rlvi2  于 4个月前  发布在  Go
关注(0)|答案(1)|浏览(68)

所以我想做一个新年音乐宾果游戏,我已经做了,所以歌曲得到随机,你可以选择你已经得到的歌曲。但什么也没有发生,当你有4在一排。我试图添加一个sumbit按钮,但什么也没有发生。我的理想的事情是,如果宾果弹出时,选择,而不是当提交按下。

// 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>
tcbh2hod

tcbh2hod1#

你的代码有很多小问题,但最重要的是:

  • 宾果游戏板覆盖#bingo-message
  • 你的宾果检查算法很奇怪

我对你的代码做了一点修改,以达到预期的效果。看看你是否理解我所做的:

#bingo-message {
  color: black;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  text-align: center;
  padding: 30px 0;
  z-index: 10;
}

个字符
第一个问题可以通过将h1z-index设置为比宾果游戏板高的值来解决。我们添加一些样式,然后一切就绪。
至于宾果检查算法:对于水平宾果检查,我们使用splice来获取一行中的所有元素,然后使用Array.every来检查每个元素是否满足一个条件;在我们的例子中,条件是classList是否包含.selected。对于垂直检查,我的解决方案并不理想(我确实硬编码了4x 4网格的索引),但它已经足够了:)。
祝你有一个美好的假期。编程快乐!🎄👨‍👩‍👧‍👦🎇

相关问题