|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Wonders of the World Hunt</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> |
|
|
.map-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.world-map { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.target-area { |
|
|
position: absolute; |
|
|
background-color: rgba(255, 255, 0, 0.3); |
|
|
border-radius: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
pointer-events: none; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } |
|
|
70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; } |
|
|
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } |
|
|
} |
|
|
|
|
|
.celebration { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background-color: rgba(0,0,0,0.7); |
|
|
z-index: 1000; |
|
|
animation: fadeIn 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-blue-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold text-blue-800 mb-2">Wonders of the World Hunt</h1> |
|
|
<p class="text-xl text-blue-600">Can you find all the amazing wonders?</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 max-w-4xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="bg-yellow-100 border-l-4 border-yellow-500 p-4"> |
|
|
<h2 id="current-wonder" class="text-2xl font-bold text-blue-800">Find the Great Wall of China</h2> |
|
|
<p id="level-info" class="text-blue-600">Level 1 of 7</p> |
|
|
</div> |
|
|
<div class="bg-green-100 rounded-full px-6 py-3 text-center"> |
|
|
<p class="text-sm text-green-700">Score</p> |
|
|
<p id="score" class="text-2xl font-bold text-green-800">0</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="feedback" class="hidden mb-6 p-4 rounded-lg"></div> |
|
|
|
|
|
<div class="map-container"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png" |
|
|
alt="World Map" class="world-map" id="world-map"> |
|
|
<div class="target-area pulse" id="target-area"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button id="hint-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg flex items-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Get a Hint |
|
|
</button> |
|
|
<button id="next-btn" class="hidden bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg flex items-center"> |
|
|
Next Wonder <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<p class="text-blue-600">Click on the map where you think the wonder is located!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="celebration" class="celebration hidden"> |
|
|
<div class="bg-white p-8 rounded-xl text-center max-w-md"> |
|
|
<h2 class="text-3xl font-bold text-blue-800 mb-4">Congratulations!</h2> |
|
|
<p class="text-xl mb-6">You've found all the wonders of the world!</p> |
|
|
<button id="play-again" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg"> |
|
|
Play Again |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const wonders = [ |
|
|
{ |
|
|
name: "Great Wall of China", |
|
|
hint: "This wonder is in Asia, in a country with a red flag with yellow stars.", |
|
|
fact: "The Great Wall is over 13,000 miles long - that's longer than the distance from New York to Sydney!", |
|
|
coordinates: { x: 78, y: 42 }, |
|
|
radius: 8 |
|
|
}, |
|
|
{ |
|
|
name: "Pyramids of Giza", |
|
|
hint: "Look in Africa, near the northeast corner.", |
|
|
fact: "The Great Pyramid was the tallest man-made structure for over 3,800 years!", |
|
|
coordinates: { x: 55, y: 42 }, |
|
|
radius: 8 |
|
|
}, |
|
|
{ |
|
|
name: "Taj Mahal", |
|
|
hint: "Find the country in South Asia that looks like a triangle pointing down.", |
|
|
fact: "The Taj Mahal changes color depending on the time of day - pinkish in morning, white in day, golden at night!", |
|
|
coordinates: { x: 70, y: 45 }, |
|
|
radius: 8 |
|
|
}, |
|
|
{ |
|
|
name: "Christ the Redeemer", |
|
|
hint: "This statue is in South America, in a country that speaks Portuguese.", |
|
|
fact: "The statue's arms stretch 92 feet wide - that's as long as a blue whale!", |
|
|
coordinates: { x: 33, y: 65 }, |
|
|
radius: 10 |
|
|
}, |
|
|
{ |
|
|
name: "Machu Picchu", |
|
|
hint: "Look in the Andes mountains of South America.", |
|
|
fact: "Machu Picchu was built without any mortar - the stones fit together perfectly!", |
|
|
coordinates: { x: 28, y: 65 }, |
|
|
radius: 10 |
|
|
}, |
|
|
{ |
|
|
name: "Colosseum", |
|
|
hint: "Find the boot-shaped country in Europe.", |
|
|
fact: "The Colosseum could hold 50,000 people and had a retractable roof!", |
|
|
coordinates: { x: 52, y: 38 }, |
|
|
radius: 8 |
|
|
}, |
|
|
{ |
|
|
name: "Chichen Itza", |
|
|
hint: "This Mayan pyramid is in North America, south of the United States.", |
|
|
fact: "During spring and fall equinox, shadows create a snake-like shape on the pyramid!", |
|
|
coordinates: { x: 20, y: 48 }, |
|
|
radius: 10 |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
let currentLevel = 0; |
|
|
let score = 0; |
|
|
let attempts = 0; |
|
|
let mapWidth, mapHeight; |
|
|
|
|
|
|
|
|
const worldMap = document.getElementById('world-map'); |
|
|
const targetArea = document.getElementById('target-area'); |
|
|
const currentWonder = document.getElementById('current-wonder'); |
|
|
const levelInfo = document.getElementById('level-info'); |
|
|
const feedback = document.getElementById('feedback'); |
|
|
const hintBtn = document.getElementById('hint-btn'); |
|
|
const nextBtn = document.getElementById('next-btn'); |
|
|
const scoreDisplay = document.getElementById('score'); |
|
|
const celebration = document.getElementById('celebration'); |
|
|
const playAgainBtn = document.getElementById('play-again'); |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
|
|
|
worldMap.onload = function() { |
|
|
mapWidth = worldMap.offsetWidth; |
|
|
mapHeight = worldMap.offsetHeight; |
|
|
loadLevel(currentLevel); |
|
|
}; |
|
|
|
|
|
|
|
|
worldMap.addEventListener('click', handleMapClick); |
|
|
hintBtn.addEventListener('click', giveHint); |
|
|
nextBtn.addEventListener('click', nextLevel); |
|
|
playAgainBtn.addEventListener('click', resetGame); |
|
|
} |
|
|
|
|
|
|
|
|
function loadLevel(level) { |
|
|
if (level >= wonders.length) { |
|
|
showCelebration(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const wonder = wonders[level]; |
|
|
currentWonder.textContent = `Find the ${wonder.name}`; |
|
|
levelInfo.textContent = `Level ${level + 1} of ${wonders.length}`; |
|
|
feedback.classList.add('hidden'); |
|
|
nextBtn.classList.add('hidden'); |
|
|
attempts = 0; |
|
|
|
|
|
|
|
|
const x = (wonder.coordinates.x / 100) * mapWidth; |
|
|
const y = (wonder.coordinates.y / 100) * mapHeight; |
|
|
const radius = (wonder.radius / 100) * mapWidth; |
|
|
|
|
|
targetArea.style.width = `${radius * 2}px`; |
|
|
targetArea.style.height = `${radius * 2}px`; |
|
|
targetArea.style.left = `${x}px`; |
|
|
targetArea.style.top = `${y}px`; |
|
|
} |
|
|
|
|
|
|
|
|
function handleMapClick(e) { |
|
|
if (nextBtn.classList.contains('hidden') === false) return; |
|
|
|
|
|
const rect = worldMap.getBoundingClientRect(); |
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100; |
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100; |
|
|
|
|
|
const wonder = wonders[currentLevel]; |
|
|
const distance = Math.sqrt( |
|
|
Math.pow(x - wonder.coordinates.x, 2) + |
|
|
Math.pow(y - wonder.coordinates.y, 2) |
|
|
); |
|
|
|
|
|
attempts++; |
|
|
|
|
|
if (distance <= wonder.radius) { |
|
|
|
|
|
score += Math.max(10 - attempts, 1); |
|
|
scoreDisplay.textContent = score; |
|
|
|
|
|
feedback.classList.remove('hidden'); |
|
|
feedback.className = 'bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6'; |
|
|
feedback.innerHTML = ` |
|
|
<h3 class="font-bold text-xl mb-2">Correct! The ${wonder.name} is located here.</h3> |
|
|
<p class="mb-2">${wonder.fact}</p> |
|
|
<p class="text-sm">You earned ${Math.max(10 - attempts, 1)} points!</p> |
|
|
`; |
|
|
|
|
|
|
|
|
targetArea.style.display = 'block'; |
|
|
targetArea.style.backgroundColor = 'rgba(0, 255, 0, 0.3)'; |
|
|
|
|
|
nextBtn.classList.remove('hidden'); |
|
|
} else { |
|
|
|
|
|
feedback.classList.remove('hidden'); |
|
|
feedback.className = 'bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6'; |
|
|
feedback.innerHTML = ` |
|
|
<h3 class="font-bold text-xl mb-2">Not quite right!</h3> |
|
|
<p>Try again. Here's a hint: ${wonder.hint}</p> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function giveHint() { |
|
|
if (feedback.classList.contains('hidden') || feedback.classList.contains('bg-red-100')) { |
|
|
const wonder = wonders[currentLevel]; |
|
|
feedback.classList.remove('hidden'); |
|
|
feedback.className = 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6'; |
|
|
feedback.innerHTML = ` |
|
|
<h3 class="font-bold text-xl mb-2">Hint:</h3> |
|
|
<p>${wonder.hint}</p> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function nextLevel() { |
|
|
currentLevel++; |
|
|
targetArea.style.display = 'none'; |
|
|
loadLevel(currentLevel); |
|
|
} |
|
|
|
|
|
|
|
|
function showCelebration() { |
|
|
celebration.classList.remove('hidden'); |
|
|
createConfetti(); |
|
|
} |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']; |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.left = Math.random() * 100 + 'vw'; |
|
|
confetti.style.top = -10 + 'px'; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
|
|
|
document.body.appendChild(confetti); |
|
|
|
|
|
|
|
|
const animation = confetti.animate([ |
|
|
{ top: '-10px', opacity: 0, transform: `rotate(0deg) scale(0.5)` }, |
|
|
{ top: '10%', opacity: 1, transform: `rotate(${Math.random() * 360}deg) scale(1)` }, |
|
|
{ top: '100vh', opacity: 0, transform: `rotate(${Math.random() * 360}deg) scale(0.5)` } |
|
|
], { |
|
|
duration: 2000 + Math.random() * 3000, |
|
|
delay: Math.random() * 2000 |
|
|
}); |
|
|
|
|
|
animation.onfinish = () => confetti.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function resetGame() { |
|
|
currentLevel = 0; |
|
|
score = 0; |
|
|
scoreDisplay.textContent = '0'; |
|
|
celebration.classList.add('hidden'); |
|
|
loadLevel(currentLevel); |
|
|
} |
|
|
|
|
|
|
|
|
initGame(); |
|
|
</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=pp/wonders-of-the-world" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
