袋子

// ---- Blooks ---- const blooks = [ { name: "Cat", color: "#ff6666", emoji: "" }, { name: "Dog", color: "#66ccff", emoji: "" }, { name: "Frog", color: "#66ff66", emoji: "" }, { name: "Monkey", color: "#ffcc66", emoji: "" }, { name: "Fox", color: "#ff9966", emoji: "" }, { name: "Panda", color: "#999999", emoji: "" } ];

let selectedBlook = null; let collectedBlooks = []; let doublePoints = false;

// ---- Questions ---- const questions = [ { question: "2 + 2 = ?", answers: ["3", "4", "5", "6"], correct: 1 }, { question: "Blooket is a ____ game?", answers: ["Board", "Trivia", "Shooter", "Puzzle"], correct: 1 }, { question: "Which color is in the Blooket logo?", answers: ["Red", "Blue", "Green", "Yellow"], correct: 1 }, { question: "What do you earn in Blooket games?", answers: ["Points", "Coins", "Stars", "All of these"], correct: 3 }, { question: "Which animal is a Blook example?", answers: ["Lion", "Penguin", "Cat", "Elephant"], correct: 2 } ];

let currentQuestion = 0; let score = 0; let playerName = "";

// ---- DOM Elements ---- const startBtn = document.getElementById("start-btn"); const playerNameInput = document.getElementById("player-name"); const blookSelection = document.getElementById("blook-selection"); const gameArea = document.getElementById("game-area"); const questionEl = document.getElementById("question"); const answersEl = document.getElementById("answers"); const scoreEl = document.getElementById("score"); const nextBtn = document.getElementById("next-btn"); const doubleBtn = document.getElementById("double-btn"); const collectedBlooksEl = document.getElementById("collected-blooks"); const leaderboardListEl = document.getElementById("leaderboard-list");

// ---- Event Listeners ---- playerNameInput.addEventListener("keyup", (event) => { if (event.keyCode === 13) { startGame(); } });

startBtn.addEventListener("click", startGame);

// ---- Helper Functions ---- function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

// ---- Game Logic ---- function startGame() { playerName = playerNameInput.value; selectedBlook = blooks[getRandomInt(0, blooks.length - 1)]; collectedBlooks.push(selectedBlook); gameArea.style.display = "block"; startBtn.style.display = "none"; playerNameInput.value = ""; displayPlayerName(); displayQuestion(); displayAnswers(); displayScore(); displayCollectedBlooks(); displayPowerUp(); displayLeaderboard(); }

// ---- Display Functions ---- function displayPlayerName() { const playerDisplay = document.getElementById("player-display"); playerDisplay.innerHTML = playerName; }

function displayQuestion() { const question = questions[currentQuestion]; questionEl.innerHTML = question.question; for (let i = 0; i < question.answers.length; i++) { const answer = question.answers[i]; const answerEl = document.createElement("button"); answerEl.innerHTML = answer; answerEl.classList.add("answer"); answerEl.dataset.correct = i === question.correct; answersEl.appendChild(answerEl); } }

function displayAnswers() { const answers = document.querySelectorAll(".answer"); for (let i = 0; i < answers.length; i++) { answers[i].addEventListener("click", (event) => { if (event.target.dataset.correct) { score += 10; } else { score -= 5; } displayScore(); if (currentQuestion < questions.length - 1) { nextQuestion(); } else { displayLeaderboard(); } }); } }

function displayScore() { scoreEl.innerHTML = score; }

function displayCollectedBlooks() { collectedBlooksEl.innerHTML = ""; for (let i = 0; i < collectedBlooks.length; i++) { const blook = collectedBlooks[i]; const blookEl = document.createElement("div"); blookEl.classList.add("blook"); blookEl.innerHTML = blook.name; blookEl.style.backgroundColor = blook.color; collectedBlooksEl.appendChild(blookEl); } }

function displayPowerUp() { const doubleBtnEl = document.getElementById("double-btn"); if (doublePoints) { doubleBtnEl.innerHTML = "Disable Double Points"; } else { doubleBtnEl.innerHTML = "Double Points"; } doubleBtnEl.addEventListener("click", (event) => { if (event.target.innerHTML === "Double Points") { doublePoints = true; event.target.innerHTML = "Disable Double Points"; } else { doublePoints = false; event.target.innerHTML = "Double Points"; } }); }

function displayLeaderboard() { const leaderboardListEl = document.getElementById("leaderboard-list"); leaderboardListEl.innerHTML = ""; for (let i = 0; i < 10; i++) { const player = { name: "Player " + (i + 1), score: score }; const listItem = document.createElement("li"); listItem.innerHTML = player.name + ": " + player.score; leaderboardListEl.appendChild(listItem); } }

// ---- Game Logic ---- function nextQuestion() { currentQuestion++; displayQuestion(); displayScore(); displayCollectedBlooks(); displayPowerUp(); displayLeaderboard(); }

// ---- Game Loop ---- setInterval(() => { if (doublePoints) { score += 20; } else { score += 10; } displayScore(); if (currentQuestion < questions.length - 1) { nextQuestion(); } else { displayLeaderboard(); } }, 1000);