Merlin Spin Game – Timed Version
body { text-align: center; font-family: Verdana, sans-serif; margin: 0; padding: 0; font-size: 14px; }
#gameContainer { display: flex; flex-direction: column; align-items: center; max-width: 700px; margin: auto; padding: 10px; }
#wheel-container { position: relative; width: 200px; height: 200px; margin: 10px 0; }
#wheel { width: 100%; height: 100%; border-radius: 50%; border: 3px solid black; background: conic-gradient(
red 0deg 36deg,
blue 36deg 72deg,
green 72deg 108deg,
yellow 108deg 144deg,
orange 144deg 180deg,
purple 180deg 216deg,
pink 216deg 252deg,
cyan 252deg 288deg,
lime 288deg 324deg,
magenta 324deg 360deg
); position: relative; transition: transform 3s ease-out; }
#spinButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 5px 10px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 12px; }
#peopleBoard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; max-width: 400px; margin-top: 10px; }
.person-button { padding: 10px; cursor: pointer; border: 1px solid white; background: green; color: white; font-size: 12px; font-weight: bold; text-align: center; transition: background 0.3s, transform 0.2s; }
.clicked-correct { background: darkgreen !important; transform: scale(1.1); }
.clicked-wrong { background: darkred !important; transform: scale(1.1); }
#clueText, #score, #resultContainer, #timer { margin: 5px 0; }
#resetButton { margin-top: 10px; padding: 5px 10px; background: red; color: white; cursor: pointer; border: none; font-size: 12px; }
Merlin Spin Game
Clue: Click Spin to get a clue
Score: 0
Time: 0:00
Reset Game
let currentClue = “”;
let correctAnswer = “”;
let score = 0;
let remainingPeople = [];
let startTime = null;
let timerInterval = null;
const people = [
{ name: “King Arthur”, clue: “Won by Merlin and raised by Sir Ector. Pulls Excalibur out of the stone.” },
{ name: “Queen Mab”, clue: “She’s trying to preserve the Old Ways and creates Merlin.” },
{ name: “Lady of the Lake”, clue: “A Druid priestess who gives Merlin the magic sword.” },
{ name: “Guinevere”, clue: “Arthur’s wife, who falls in love with Sir Lancelot.” },
{ name: “Nimue”, clue: “Merlin falls in love with this woman who later becomes scarred.” },
{ name: “Frick”, clue: “A gnome-like servant to Queen Mab.” },
{ name: “Sir Lancelot”, clue: “Arthur’s most loyal knight until he falls for Guinevere.” },
{ name: “Merlin”, clue: “A wizard who covers the rise and fall of Camelot.” },
{ name: “Mordred”, clue: “Schooled in the Old Ways, he wounds Arthur in battle.” },
{ name: “Lady Igraine”, clue: “Arthur’s mother. Uther Pendragon had a relationship with her under a spell.” },
{ name: “Morgan Le Fey”, clue: “Arthur’s half-sister who tricks him into having a child.” },
{ name: “Excalibur”, clue: “A mystical sword gifted to Arthur by the Lady of the Lake.” },
{ name: “Uther Pendragon”, clue: “Arthur’s father, who fights under the red dragon.” },
{ name: “Lord Vortigern”, clue: “A deceitful king who tries to build a castle that keeps collapsing.” },
{ name: “Ambrosia”, clue: “A pagan witch who raises Merlin.” }
];
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const now = new Date();
const elapsed = Math.floor((now – startTime) / 1000);
const minutes = Math.floor(elapsed / 60);
const seconds = elapsed % 60;
document.getElementById(“timeDisplay”).textContent = `${minutes}:${seconds.toString().padStart(2, ‘0’)}`;
}
function stopTimer() {
clearInterval(timerInterval);
}
function populatePeopleBoard() {
let board = document.getElementById(“peopleBoard”);
board.innerHTML = “”;
let shuffledPeople = people.sort(() => 0.5 – Math.random());
shuffledPeople.forEach(person => {
let btn = document.createElement(“button”);
btn.textContent = person.name;
btn.classList.add(“person-button”);
btn.onclick = () => checkAnswer(person.name, btn);
board.appendChild(btn);
});
}
function checkAnswer(selectedName, button) {
let resultContainer = document.getElementById(“resultContainer”);
if (selectedName === correctAnswer) {
resultContainer.textContent = “Correct! Super Spin again!”;
button.classList.add(“clicked-correct”);
score += 10;
document.getElementById(“score”).textContent = score;
if (remainingPeople.length === 0) {
stopTimer();
const now = new Date();
const totalSeconds = Math.floor((now – startTime) / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const timeTaken = `${minutes}:${seconds.toString().padStart(2, ‘0’)}`;
document.getElementById(“clueText”).textContent = `All clues completed in ${timeTaken} minutes.`;
document.getElementById(“spinButton”).disabled = true;
resultContainer.textContent += ” Game Over!”;
}
} else {
resultContainer.textContent = “Sorry! You just lost ten points – Try again.”;
button.classList.add(“clicked-wrong”);
score = Math.max(0, score – 10);
document.getElementById(“score”).textContent = score;
}
setTimeout(() => {
button.classList.remove(“clicked-correct”, “clicked-wrong”);
}, 800);
}
document.getElementById(“spinButton”).addEventListener(“click”, function() {
if (remainingPeople.length === people.length) {
startTimer();
}
if (remainingPeople.length === 0) {
document.getElementById(“clueText”).textContent = “All clues completed!”;
return;
}
let wheel = document.getElementById(“wheel”);
let randomDegree = Math.floor(2000 + Math.random() * 2000);
wheel.style.transform = `rotate(${randomDegree}deg)`;
setTimeout(() => {
let index = Math.floor(Math.random() * remainingPeople.length);
let randomPerson = remainingPeople.splice(index, 1)[0];
currentClue = randomPerson.clue;
correctAnswer = randomPerson.name;
document.getElementById(“clueText”).textCont
Merlin Spin Game – Timed Version
body { text-align: center; font-family: Verdana, sans-serif; margin: 0; padding: 0; font-size: 14px; }
#gameContainer { display: flex; flex-direction: column; align-items: center; max-width: 700px; margin: auto; padding: 10px; }
#wheel-container { position: relative; width: 200px; height: 200px; margin: 10px 0; }
#wheel { width: 100%; height: 100%; border-radius: 50%; border: 3px solid black; background: conic-gradient(
red 0deg 36deg,
blue 36deg 72deg,
green 72deg 108deg,
yellow 108deg 144deg,
orange 144deg 180deg,
purple 180deg 216deg,
pink 216deg 252deg,
cyan 252deg 288deg,
lime 288deg 324deg,
magenta 324deg 360deg
); position: relative; transition: transform 3s ease-out; }
#spinButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 5px 10px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 12px; }
#peopleBoard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; max-width: 400px; margin-top: 10px; }
.person-button { padding: 10px; cursor: pointer; border: 1px solid white; background: green; color: white; font-size: 12px; font-weight: bold; text-align: center; transition: background 0.3s, transform 0.2s; }
.clicked-correct { background: darkgreen !important; transform: scale(1.1); }
.clicked-wrong { background: darkred !important; transform: scale(1.1); }
#clueText, #score, #resultContainer, #timer { margin: 5px 0; }
#resetButton { margin-top: 10px; padding: 5px 10px; background: red; color: white; cursor: pointer; border: none; font-size: 12px; }
Merlin Spin Game
Clue: Click Spin to get a clue
Score: 0
Time: 0:00
Reset Game
let currentClue = “”;
let correctAnswer = “”;
let score = 0;
let remainingPeople = [];
let startTime = null;
let timerInterval = null;
const people = [
{ name: “King Arthur”, clue: “Won by Merlin and raised by Sir Ector. Pulls Excalibur out of the stone.” },
{ name: “Queen Mab”, clue: “She’s trying to preserve the Old Ways and creates Merlin.” },
{ name: “Lady of the Lake”, clue: “A Druid priestess who gives Merlin the magic sword.” },
{ name: “Guinevere”, clue: “Arthur’s wife, who falls in love with Sir Lancelot.” },
{ name: “Nimue”, clue: “Merlin falls in love with this woman who later becomes scarred.” },
{ name: “Frick”, clue: “A gnome-like servant to Queen Mab.” },
{ name: “Sir Lancelot”, clue: “Arthur’s most loyal knight until he falls for Guinevere.” },
{ name: “Merlin”, clue: “A wizard who covers the rise and fall of Camelot.” },
{ name: “Mordred”, clue: “Schooled in the Old Ways, he wounds Arthur in battle.” },
{ name: “Lady Igraine”, clue: “Arthur’s mother. Uther Pendragon had a relationship with her under a spell.” },
{ name: “Morgan Le Fey”, clue: “Arthur’s half-sister who tricks him into having a child.” },
{ name: “Excalibur”, clue: “A mystical sword gifted to Arthur by the Lady of the Lake.” },
{ name: “Uther Pendragon”, clue: “Arthur’s father, who fights under the red dragon.” },
{ name: “Lord Vortigern”, clue: “A deceitful king who tries to build a castle that keeps collapsing.” },
{ name: “Ambrosia”, clue: “A pagan witch who raises Merlin.” }
];
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const now = new Date();
const elapsed = Math.floor((now – startTime) / 1000);
const minutes = Math.floor(elapsed / 60);
const seconds = elapsed % 60;
document.getElementById(“timeDisplay”).textContent = `${minutes}:${seconds.toString().padStart(2, ‘0’)}`;
}
function stopTimer() {
clearInterval(timerInterval);
}
function populatePeopleBoard() {
let board = document.getElementById(“peopleBoard”);
board.innerHTML = “”;
let shuffledPeople = people.sort(() => 0.5 – Math.random());
shuffledPeople.forEach(person => {
let btn = document.createElement(“button”);
btn.textContent = person.name;
btn.classList.add(“person-button”);
btn.onclick = () => checkAnswer(person.name, btn);
board.appendChild(btn);
});
}
function checkAnswer(selectedName, button) {
let resultContainer = document.getElementById(“resultContainer”);
if (selectedName === correctAnswer) {
resultContainer.textContent = “Correct! Super Spin again!”;
button.classList.add(“clicked-correct”);
score += 10;
document.getElementById(“score”).textContent = score;
if (remainingPeople.length === 0) {
stopTimer();
const now = new Date();
const totalSeconds = Math.floor((now – startTime) / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const timeTaken = `${minutes}:${seconds.toString().padStart(2, ‘0’)}`;
document.getElementById(“clueText”).textContent = `All clues completed in ${timeTaken} minutes.`;
document.getElementById(“spinButton”).disabled = true;
resultContainer.textContent += ” Game Over!”;
}
} else {
resultContainer.textContent = “Sorry! You just lost ten points – Try again.”;
button.classList.add(“clicked-wrong”);
score = Math.max(0, score – 10);
document.getElementById(“score”).textContent = score;
}
setTimeout(() => {
button.classList.remove(“clicked-correct”, “clicked-wrong”);
}, 800);
}
document.getElementById(“spinButton”).addEventListener(“click”, function() {
if (remainingPeople.length === people.length) {
startTimer();
}
if (remainingPeople.length === 0) {
document.getElementById(“clueText”).textContent = “All clues completed!”;
return;
}
let wheel = document.getElementById(“wheel”);
let randomDegree = Math.floor(2000 + Math.random() * 2000);
wheel.style.transform = `rotate(${randomDegree}deg)`;
setTimeout(() => {
let index = Math.floor(Math.random() * remainingPeople.length);
let randomPerson = remainingPeople.splice(index, 1)[0];
currentClue = randomPerson.clue;
correctAnswer = randomPerson.name;
document.getElementById(“clueText”).textCont
Far Side of History 