<!DOCTYPE html>
<html lang=”zh-TW”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>找不同小遊戲</title>
<!– 引入 Tailwind CSS 方便快速排版與設計響應式介面 –>
<script src=”https://cdn.tailwindcss.com”></script>
<style>
/* 匯入圓潤可愛的字體 */
@import url(‘https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap’);
body {
font-family: ‘Nunito’, ‘微軟正黑體’, sans-serif;
/* 柔和的背景色 */
background-color: #fff0f5;
overflow-x: hidden;
}
/* 無邊框、圓角與柔和陰影設計 */
.game-card {
background: white;
border-radius: 30px;
box-shadow: 0 15px 35px rgba(255, 105, 180, 0.15);
transition: transform 0.3s ease;
}
.game-card:hover {
transform: translateY(-5px);
}
/* 遊戲圖示的樣式 */
.emoji-item {
font-size: 4rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
user-select: none;
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f9fa;
border-radius: 20px;
aspect-ratio: 1 / 1;
}
@media (max-width: 640px) {
.emoji-item {
font-size: 3rem;
}
}
.emoji-item:active {
transform: scale(0.85);
}
/* 點對時的歡呼動畫 */
.correct-anim {
animation: tada 1s ease-in-out forwards;
background-color: #d4edda !important; /* 變成淺綠色背景 */
}
/* 點錯時的搖晃動畫 */
.wrong-anim {
animation: shake 0.5s ease-in-out;
background-color: #f8d7da !important; /* 變成淺紅色背景 */
}
@keyframes tada {
0% { transform: scale(1); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.2) rotate(5deg); }
40%, 60%, 80% { transform: scale(1.2) rotate(-5deg); }
100% { transform: scale(1.1) rotate(0); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
</style>
</head>
<body class=”min-h-screen flex flex-col items-center justify-center p-4 sm:p-8″>
<!– 標題區 –>
<header class=”text-center mb-8″>
<h1 class=”text-3xl sm:text-5xl font-black text-pink-500 mb-3 drop-shadow-sm”>👀 找找看，哪裡不一樣？ 👀</h1>
<p class=”text-lg sm:text-xl text-gray-600 font-bold bg-white/60 inline-block px-6 py-2 rounded-full shadow-sm”>
請點擊<span class=”text-pink-500″>「右邊（或下方）」</span>圖片中，長得不一樣的圖案！
</p>
</header>
<!– 遊戲進度 –>
<div class=”mb-4 text-pink-400 font-bold text-xl”>
關卡 <span id=”current-level”>1</span> / 3
</div>
<!– 遊戲主要區域 –>
<main class=”w-full max-w-5xl flex flex-col lg:flex-row gap-8 justify-center items-center”>
<!– 左側：標準答案區 –>
<div class=”game-card w-full max-w-sm p-6 sm:p-8 relative”>
<div class=”absolute -top-4 -left-4 bg-blue-400 text-white font-bold px-4 py-1 rounded-full shadow-md transform -rotate-6″>標準圖案</div>
<div id=”left-grid” class=”grid grid-cols-2 gap-4 mt-2″>
<!– 圖案會由 JS 動態生成 –>
</div>
</div>
<!– 中間裝飾箭頭 –>
<div class=”hidden lg:block text-5xl text-pink-300 font-bold”>
👉
</div>
<div class=”block lg:hidden text-5xl text-pink-300 font-bold transform rotate-90″>
👉
</div>
<!– 右側：挑戰區 (玩家點擊這裡) –>
<div class=”game-card w-full max-w-sm p-6 sm:p-8 relative border-4 border-transparent hover:border-pink-200 cursor-default”>
<div class=”absolute -top-4 -right-4 bg-pink-500 text-white font-bold px-4 py-1 rounded-full shadow-md transform rotate-6″>點擊這裡找不同</div>
<div id=”right-grid” class=”grid grid-cols-2 gap-4 mt-2″>
<!– 圖案會由 JS 動態生成 –>
</div>
</div>
</main>
<!– 訊息提示區 –>
<div id=”message-container” class=”h-20 mt-8 flex items-center justify-center”>
<p id=”message” class=”text-2xl sm:text-3xl font-bold opacity-0 transition-opacity duration-300″></p>
</div>
<!– 控制按鈕 –>
<button id=”next-btn” onclick=”nextLevel()” class=”hidden bg-gradient-to-r from-pink-400 to-pink-500 hover:from-pink-500 hover:to-pink-600 text-white font-bold py-3 px-10 rounded-full shadow-lg transform transition hover:scale-105 active:scale-95 text-xl”>
下一關 ➡️
</button>
<button id=”restart-btn” onclick=”resetGame()” class=”hidden bg-gradient-to-r from-blue-400 to-blue-500 hover:from-blue-500 hover:to-blue-600 text-white font-bold py-3 px-10 rounded-full shadow-lg transform transition hover:scale-105 active:scale-95 text-xl”>
再玩一次 🔄
</button>
<script>
// 遊戲資料設定 (包含南瓜和打開的紙箱等元素)
const levels = [
{
original: [‘🐶’, ‘🎃’, ‘📦’, ‘🍎’],
changed: [‘🐶’, ‘🎃’, ‘🎁’, ‘🍎’], // 📦 變成 🎁
diffIndex: 2
},
{
original: [‘🚗’, ‘🍎’, ‘🐸’, ‘🌟’],
changed: [‘🚙’, ‘🍎’, ‘🐸’, ‘🌟’], // 🚗 變成 🚙
diffIndex: 0
},
{
original: [‘🎈’, ‘🍦’, ‘🍔’, ‘🐶’],
changed: [‘🎈’, ‘🍦’, ‘🌭’, ‘🐶’], // 🍔 變成 🌭
diffIndex: 2
}
];
let currentLevelIndex = 0;
let isWaitingForNext = false; // 防止重複點擊
const leftGrid = document.getElementById(‘left-grid’);
const rightGrid = document.getElementById(‘right-grid’);
const messageEl = document.getElementById(‘message’);
const nextBtn = document.getElementById(‘next-btn’);
const restartBtn = document.getElementById(‘restart-btn’);
const levelDisplay = document.getElementById(‘current-level’);
// 初始化遊戲並渲染關卡
function renderLevel() {
isWaitingForNext = false;
leftGrid.innerHTML = ”;
rightGrid.innerHTML = ”;
hideMessage();
nextBtn.classList.add(‘hidden’);
restartBtn.classList.add(‘hidden’);
levelDisplay.innerText = currentLevelIndex + 1;
const currentData = levels[currentLevelIndex];
// 渲染左側 (標準)
currentData.original.forEach(emoji => {
const div = document.createElement(‘div’);
div.className = ’emoji-item shadow-sm’;
div.innerText = emoji;
leftGrid.appendChild(div);
});
// 渲染右側 (挑戰)
currentData.changed.forEach((emoji, index) => {
const div = document.createElement(‘div’);
div.className = ’emoji-item shadow-sm hover:bg-pink-50 hover:shadow-md’;
div.innerText = emoji;
// 綁定點擊事件
div.onclick = () => handleItemClick(div, index, currentData.diffIndex);
rightGrid.appendChild(div);
});
}
// 處理玩家點擊圖案
function handleItemClick(element, clickedIndex, correctIndex) {
if (isWaitingForNext) return; // 如果已經答對，不讓玩家繼續點
// 清除之前的動畫狀態
element.classList.remove(‘wrong-anim’);
void element.offsetWidth; // 觸發重繪 (Reflow)，讓動畫可以重複播放
if (clickedIndex === correctIndex) {
// 答對了
isWaitingForNext = true;
element.classList.add(‘correct-anim’);
showMessage(‘🎉 太棒了！你找到不一樣的地方了！ 🎉’, ‘text-green-500’);
// 顯示下一關或重玩按鈕
setTimeout(() => {
if (currentLevelIndex < levels.length – 1) {
nextBtn.classList.remove(‘hidden’);
} else {
showMessage(‘🏆 恭喜過關！你太厲害了！ 🏆’, ‘text-pink-500’);
restartBtn.classList.remove(‘hidden’);
}
}, 1000);
} else {
// 答錯了
element.classList.add(‘wrong-anim’);
showMessage(‘Oops! 好像不是這個喔，再仔細看一看～ 👀’, ‘text-red-400’);
}
}
// 顯示訊息
function showMessage(text, colorClass) {
messageEl.innerText = text;
messageEl.className = `text-2xl sm:text-3xl font-bold transition-opacity duration-300 opacity-100 ${colorClass}`;
}
// 隱藏訊息
function hideMessage() {
messageEl.classList.remove(‘opacity-100’);
messageEl.classList.add(‘opacity-0’);
}
// 下一關
function nextLevel() {
if (currentLevelIndex < levels.length – 1) {
currentLevelIndex++;
renderLevel();
}
}
// 重新開始遊戲
function resetGame() {
currentLevelIndex = 0;
renderLevel();
}
// 網頁載入完成後，自動開始第一關
window.onload = renderLevel;
</script>
</body>
</html>