|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>90's Whack-a-Mole with AI Questions</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); |
|
|
|
body { |
|
font-family: 'Comic Sans MS', cursive, sans-serif; |
|
background-color: #ffccf5; |
|
background-image: linear-gradient(to right, #ffccf5, #ccf2ff); |
|
overflow-x: hidden; |
|
} |
|
|
|
.title { |
|
font-family: 'Press Start 2P', cursive; |
|
text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff; |
|
animation: rainbow 5s linear infinite; |
|
} |
|
|
|
.hole { |
|
background: radial-gradient(circle, #4d2e00 30%, #000 100%); |
|
box-shadow: inset 0 10px 0 0 #3a2200, 0 10px 0 0 rgba(0,0,0,0.3); |
|
} |
|
|
|
.mole { |
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="25" fill="%23333"/><circle cx="40" cy="25" r="3" fill="%23fff"/><circle cx="60" cy="25" r="3" fill="%23fff"/><path d="M45 35 Q50 40 55 35" stroke="%23fff" fill="transparent" stroke-width="2"/><circle cx="50" cy="50" r="30" fill="%23333"/></svg>') center/contain no-repeat; |
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10 10 L90 90 M10 90 L90 10" stroke="%23ff0000" stroke-width="8"/></svg>'), auto; |
|
} |
|
|
|
.hit { |
|
animation: hit 0.3s; |
|
} |
|
|
|
.missed { |
|
animation: missed 0.5s; |
|
} |
|
|
|
@keyframes hit { |
|
0% { transform: translateY(0) rotate(0deg); } |
|
50% { transform: translateY(-20px) rotate(20deg); } |
|
100% { transform: translateY(0) rotate(0deg); } |
|
} |
|
|
|
@keyframes missed { |
|
0% { transform: translateY(0); } |
|
50% { transform: translateY(10px); } |
|
100% { transform: translateY(0); } |
|
} |
|
|
|
@keyframes rainbow { |
|
0% { color: #ff0000; } |
|
14% { color: #ff7f00; } |
|
28% { color: #ffff00; } |
|
42% { color: #00ff00; } |
|
57% { color: #0000ff; } |
|
71% { color: #4b0082; } |
|
85% { color: #9400d3; } |
|
100% { color: #ff0000; } |
|
} |
|
|
|
.question-box { |
|
background: linear-gradient(135deg, #ffcc00, #ff9900); |
|
border: 5px dashed #ff0066; |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.05); } |
|
100% { transform: scale(1); } |
|
} |
|
|
|
.button { |
|
transition: all 0.3s; |
|
} |
|
|
|
.button:hover { |
|
transform: scale(1.1) rotate(5deg); |
|
} |
|
|
|
.cursor-trail { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
background-color: rgba(255, 0, 255, 0.5); |
|
border-radius: 50%; |
|
pointer-events: none; |
|
transform: translate(-50%, -50%); |
|
z-index: 9999; |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen flex flex-col items-center justify-center p-4"> |
|
<div id="cursor-trails"></div> |
|
|
|
<h1 class="title text-4xl md:text-6xl mb-8 text-center">90's WHACK-A-MOLE</h1> |
|
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-8 mb-8"> |
|
<div class="bg-purple-200 p-4 rounded-lg border-4 border-dashed border-pink-500"> |
|
<p class="text-xl font-bold text-purple-800">Score: <span id="score" class="text-3xl">0</span></p> |
|
</div> |
|
<div class="bg-blue-200 p-4 rounded-lg border-4 border-dashed border-cyan-500"> |
|
<p class="text-xl font-bold text-blue-800">Time: <span id="time" class="text-3xl">60</span>s</p> |
|
</div> |
|
<div class="bg-yellow-200 p-4 rounded-lg border-4 border-dashed border-orange-500"> |
|
<p class="text-xl font-bold text-yellow-800">Misses: <span id="misses" class="text-3xl">0</span></p> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-3 gap-4 md:gap-8 mb-8"> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
<div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden"> |
|
<div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex gap-4 mb-8"> |
|
<button id="start-btn" class="button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full text-xl shadow-lg"> |
|
<i class="fas fa-play mr-2"></i> START |
|
</button> |
|
<button id="reset-btn" class="button bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full text-xl shadow-lg"> |
|
<i class="fas fa-redo mr-2"></i> RESET |
|
</button> |
|
</div> |
|
|
|
<div id="question-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
<div class="question-box p-6 md:p-8 rounded-xl max-w-md w-full mx-4 text-center"> |
|
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-purple-800">AI QUESTION!</h2> |
|
<p id="question-text" class="text-xl mb-6">Would you like to answer a question?</p> |
|
<div class="flex justify-center gap-4"> |
|
<button id="yes-btn" class="button bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full text-lg"> |
|
YES |
|
</button> |
|
<button id="no-btn" class="button bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded-full text-lg"> |
|
NO |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="answer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
<div class="question-box p-6 md:p-8 rounded-xl max-w-md w-full mx-4 text-center"> |
|
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-purple-800">AI SAYS:</h2> |
|
<p id="answer-text" class="text-xl mb-6">The answer to your question is...</p> |
|
<button id="close-answer-btn" class="button bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full text-lg"> |
|
CONTINUE GAME |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-8 text-center"> |
|
<p class="text-lg text-gray-700">Made with <i class="fas fa-heart text-red-500"></i> for the 90s kids!</p> |
|
<div class="flex justify-center gap-4 mt-2"> |
|
<i class="fas fa-gamepad text-2xl text-purple-600"></i> |
|
<i class="fas fa-music text-2xl text-blue-600"></i> |
|
<i class="fas fa-tv text-2xl text-green-600"></i> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
let score = 0; |
|
let timeLeft = 60; |
|
let misses = 0; |
|
let gameInterval; |
|
let moleInterval; |
|
let timerInterval; |
|
let isGameRunning = false; |
|
|
|
|
|
const holes = document.querySelectorAll('.hole'); |
|
const moles = document.querySelectorAll('.mole'); |
|
const scoreDisplay = document.getElementById('score'); |
|
const timeDisplay = document.getElementById('time'); |
|
const missesDisplay = document.getElementById('misses'); |
|
const startBtn = document.getElementById('start-btn'); |
|
const resetBtn = document.getElementById('reset-btn'); |
|
const questionModal = document.getElementById('question-modal'); |
|
const questionText = document.getElementById('question-text'); |
|
const answerModal = document.getElementById('answer-modal'); |
|
const answerText = document.getElementById('answer-text'); |
|
const yesBtn = document.getElementById('yes-btn'); |
|
const noBtn = document.getElementById('no-btn'); |
|
const closeAnswerBtn = document.getElementById('close-answer-btn'); |
|
const cursorTrails = document.getElementById('cursor-trails'); |
|
|
|
|
|
const questions = [ |
|
"Is the internet just a fad?", |
|
"Will Y2K cause computers to crash worldwide?", |
|
"Is dial-up the future of internet connectivity?", |
|
"Should we be worried about the Millennium Bug?", |
|
"Will CDs replace cassette tapes completely?", |
|
"Is virtual reality just a passing trend?", |
|
"Should I upgrade to Windows 95?", |
|
"Will email replace traditional mail?", |
|
"Is the World Wide Web here to stay?", |
|
"Should I get a pager or a mobile phone?", |
|
"Will Tamagotchis make us better parents?", |
|
"Is the Clippy assistant helpful in Microsoft Office?", |
|
"Should I use AltaVista or Yahoo for web searches?", |
|
"Will DVD replace VHS tapes?", |
|
"Is the Furby a security risk?", |
|
"Should I be worried about computer viruses?", |
|
"Will AOL dominate the internet forever?", |
|
"Is the iMac's colorful design just a gimmick?", |
|
"Should I upgrade to a 56k modem?", |
|
"Will MP3 players replace CD players?" |
|
]; |
|
|
|
|
|
const answers = [ |
|
"The internet is definitely not a fad - it's the future!", |
|
"Y2K was overhyped, but some systems did have minor issues.", |
|
"Dial-up is slow but was essential before broadband.", |
|
"The Millennium Bug was real but mostly mitigated in time.", |
|
"CDs did replace cassettes, but both were later replaced by digital.", |
|
"VR took decades but is now making a strong comeback.", |
|
"Windows 95 was revolutionary for its time!", |
|
"Email became dominant but traditional mail still exists.", |
|
"The Web changed everything and is definitely permanent.", |
|
"Mobile phones won, but pagers had their moment.", |
|
"Tamagotchis were fun but didn't teach real parenting.", |
|
"Clippy was annoying and was eventually removed.", |
|
"Neither - Google came along and dominated search.", |
|
"DVDs did replace VHS, but streaming replaced both.", |
|
"Furbies were just toys, not actual security risks.", |
|
"Viruses are real threats - always use protection!", |
|
"AOL declined but was important in early internet days.", |
|
"The iMac's design was innovative and influential.", |
|
"56k was the peak of dial-up before broadband.", |
|
"MP3 players led to smartphones replacing both." |
|
]; |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
const trail = document.createElement('div'); |
|
trail.className = 'cursor-trail'; |
|
trail.style.left = `${e.pageX}px`; |
|
trail.style.top = `${e.pageY}px`; |
|
cursorTrails.appendChild(trail); |
|
|
|
|
|
setTimeout(() => { |
|
trail.style.opacity = '0'; |
|
trail.style.transform = 'translate(-50%, -50%) scale(2)'; |
|
setTimeout(() => { |
|
cursorTrails.removeChild(trail); |
|
}, 300); |
|
}, 500); |
|
}); |
|
|
|
|
|
startBtn.addEventListener('click', () => { |
|
if (isGameRunning) return; |
|
|
|
isGameRunning = true; |
|
score = 0; |
|
timeLeft = 60; |
|
misses = 0; |
|
updateDisplays(); |
|
|
|
|
|
timerInterval = setInterval(() => { |
|
timeLeft--; |
|
updateDisplays(); |
|
|
|
if (timeLeft <= 0) { |
|
endGame(); |
|
} |
|
}, 1000); |
|
|
|
|
|
moleInterval = setInterval(popRandomMole, 800); |
|
|
|
startBtn.disabled = true; |
|
startBtn.classList.add('opacity-50'); |
|
}); |
|
|
|
|
|
resetBtn.addEventListener('click', () => { |
|
endGame(); |
|
score = 0; |
|
timeLeft = 60; |
|
misses = 0; |
|
updateDisplays(); |
|
|
|
|
|
moles.forEach(mole => { |
|
mole.classList.remove('hit', 'missed'); |
|
mole.style.opacity = '0'; |
|
mole.style.pointerEvents = 'none'; |
|
}); |
|
|
|
startBtn.disabled = false; |
|
startBtn.classList.remove('opacity-50'); |
|
}); |
|
|
|
|
|
function popRandomMole() { |
|
if (!isGameRunning) return; |
|
|
|
|
|
moles.forEach(mole => { |
|
mole.style.opacity = '0'; |
|
mole.style.pointerEvents = 'none'; |
|
}); |
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * moles.length); |
|
const mole = moles[randomIndex]; |
|
|
|
|
|
mole.style.opacity = '1'; |
|
mole.style.pointerEvents = 'auto'; |
|
|
|
|
|
setTimeout(() => { |
|
if (mole.style.opacity === '1') { |
|
mole.classList.add('missed'); |
|
misses++; |
|
updateDisplays(); |
|
|
|
|
|
setTimeout(() => { |
|
showQuestion(); |
|
}, 300); |
|
|
|
setTimeout(() => { |
|
mole.classList.remove('missed'); |
|
mole.style.opacity = '0'; |
|
mole.style.pointerEvents = 'none'; |
|
}, 500); |
|
} |
|
}, 700); |
|
} |
|
|
|
|
|
moles.forEach(mole => { |
|
mole.addEventListener('click', () => { |
|
if (!isGameRunning) return; |
|
|
|
mole.classList.add('hit'); |
|
score++; |
|
updateDisplays(); |
|
|
|
setTimeout(() => { |
|
mole.classList.remove('hit'); |
|
mole.style.opacity = '0'; |
|
mole.style.pointerEvents = 'none'; |
|
}, 300); |
|
}); |
|
}); |
|
|
|
|
|
function showQuestion() { |
|
if (!isGameRunning) return; |
|
|
|
|
|
clearInterval(moleInterval); |
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * questions.length); |
|
questionText.textContent = questions[randomIndex]; |
|
|
|
|
|
questionModal.dataset.answerIndex = randomIndex; |
|
|
|
|
|
questionModal.classList.remove('hidden'); |
|
} |
|
|
|
|
|
yesBtn.addEventListener('click', () => { |
|
questionModal.classList.add('hidden'); |
|
|
|
const answerIndex = questionModal.dataset.answerIndex; |
|
answerText.textContent = answers[answerIndex]; |
|
|
|
answerModal.classList.remove('hidden'); |
|
}); |
|
|
|
|
|
noBtn.addEventListener('click', () => { |
|
questionModal.classList.add('hidden'); |
|
resumeGame(); |
|
}); |
|
|
|
|
|
closeAnswerBtn.addEventListener('click', () => { |
|
answerModal.classList.add('hidden'); |
|
resumeGame(); |
|
}); |
|
|
|
|
|
function resumeGame() { |
|
if (isGameRunning) { |
|
moleInterval = setInterval(popRandomMole, 800); |
|
} |
|
} |
|
|
|
|
|
function endGame() { |
|
isGameRunning = false; |
|
clearInterval(moleInterval); |
|
clearInterval(timerInterval); |
|
|
|
|
|
questionModal.classList.add('hidden'); |
|
answerModal.classList.add('hidden'); |
|
|
|
startBtn.disabled = false; |
|
startBtn.classList.remove('opacity-50'); |
|
} |
|
|
|
|
|
function updateDisplays() { |
|
scoreDisplay.textContent = score; |
|
timeDisplay.textContent = timeLeft; |
|
missesDisplay.textContent = misses; |
|
} |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=linoyts/vibe-coded-90s-whack-a-mole" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
