Bag #2380
Description
<title>Blooket Fan Game v2</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #f0f8ff; transition: background 0.5s; }
h1, h2 { margin-top: 20px; color: #333; }
input, select, button { padding: 10px 15px; font-size: 16px; margin: 5px; cursor: pointer; }
#answers button { display: block; margin: 10px auto; width: 200px; transition: transform 0.2s; }
#answers button:hover { transform: scale(1.1); }
.blook { display: inline-block; width: 60px; height: 60px; margin: 5px; border-radius: 50%; line-height: 60px; font-size: 30px; color: white; font-weight: bold; cursor: pointer; transition: transform 0.2s; }
.blook:hover { transform: scale(1.2); }
#collected-blooks .blook { border: 2px dashed #333; }
#leaderboard { margin-top: 20px; }
</style>
<script>
// ---- 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 playerDisplay = document.getElementById("player-display");
const doubleBtn = document.getElementById("double-btn");
const collectedDiv = document.getElementById("collected-blooks");
const leaderboardList = document.getElementById("leaderboard-list");
// ---- Populate Blooks ----
blooks.forEach((blook, idx) => {
const div = document.createElement("div");
div.className = "blook";
div.style.background = blook.color;
div.textContent = blook.emoji;
div.title = blook.name;
div.onclick = () => selectBlook(idx);
blookSelection.appendChild(div);
});
function selectBlook(idx) {
selectedBlook = blooks[idx];
blookSelection.querySelectorAll(".blook").forEach(el => el.style.border = "");
blookSelection.children[idx].style.border = "3px solid black";
}
// ---- Start Game ----
startBtn.onclick = () => {
if(!selectedBlook) return alert("Choose a Blook!");
playerName = playerNameInput.value || "Player";
document.getElementById("player-area").style.display = "none";
gameArea.style.display = "block";
playerDisplay.textContent = `${playerName} ${selectedBlook.emoji}`;
score = 0;
scoreEl.textContent = score;
collectedBlooks = [selectedBlook];
renderCollectedBlooks();
currentQuestion = 0;
doublePoints = false;
showQuestion();
document.body.style.background = selectedBlook.color + "33";
};
// ---- Show Question ----
function showQuestion() {
nextBtn.style.display = "none";
const q = questions[Math.floor(Math.random() * questions.length)];
questionEl.textContent = q.question;
answersEl.innerHTML = "";
q.answers.forEach((ans, idx) => {
const btn = document.createElement("button");
btn.textContent = ans;
btn.onclick = () => selectAnswer(idx, q.correct);
answersEl.appendChild(btn);
});
}
// ---- Select Answer ----
function selectAnswer(idx, correct) {
let points = 10;
if(doublePoints) { points *= 2; doublePoints = false; }
if(idx === correct) {
alert("✅ Correct!");
score += points;
// Chance to collect a new Blook
const newBlook = blooks[Math.floor(Math.random() * blooks.length)];
if(!collectedBlooks.includes(newBlook)) {
collectedBlooks.push(newBlook);
renderCollectedBlooks();
alert(`🎉 You collected a new Blook: ${newBlook.emoji}`);
}
} else {
alert(`❌ Wrong! Correct: ${questions[currentQuestion].answers[correct]}`);
}
scoreEl.textContent = score;
nextBtn.style.display = "inline-block";
}
// ---- Next Question ----
nextBtn.onclick = () => {
currentQuestion++;
if(currentQuestion < 10) {
showQuestion();
} else {
alert(`${playerName}, game over! Your score: ${score}`);
saveLeaderboard();
renderLeaderboard();
document.getElementById("player-area").style.display = "block";
gameArea.style.display = "none";
playerNameInput.value = "";
selectedBlook = null;
blookSelection.querySelectorAll(".blook").forEach(el => el.style.border = "");
document.body.style.background = "#f0f8ff";
}
};
// ---- Power-up ----
doubleBtn.onclick = () => {
doublePoints = true;
alert("⚡ Next correct answer gives double points!");
};
// ---- Render Collected Blooks ----
function renderCollectedBlooks() {
collectedDiv.innerHTML = "";
collectedBlooks.forEach(blook => {
const div = document.createElement("div");
div.className = "blook";
div.style.background = blook.color;
div.textContent = blook.emoji;
collectedDiv.appendChild(div);
});
}
// ---- Leaderboard (localStorage) ----
function saveLeaderboard() {
const leaderboard = JSON.parse(localStorage.getItem("blook-leaderboard")) || [];
leaderboard.push({ name: playerName, score });
leaderboard.sort((a,b) => b.score - a.score);
localStorage.setItem("blook-leaderboard", JSON.stringify(leaderboard.slice(0,10)));
}
function renderLeaderboard() {
const leaderboard = JSON.parse(localStorage.getItem("blook-leaderboard")) || [];
leaderboardList.innerHTML = "";
leaderboard.forEach(player => {
const li = document.createElement("li");
li.textContent = `${player.name} - ${player.score}`;
leaderboardList.appendChild(li);
});
}
// ---- Load Leaderboard on start ----
renderLeaderboard();
</script>
Blooket Fan Game v2
Choose your Blook:
Start GameScore: 0
Next QuestionPower-up: Double Points