<html lang="zh-TW"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成語猜謎配對遊戲</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
body {
font-family: 'Noto Sans TC', sans-serif;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-color: #f0f9ff;
}
.game-container {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
backdrop-filter: blur(8px);
}
.option-card {
transition: all 0.3s ease;
cursor: pointer;
border: 2px solid transparent;
}
.option-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.option-card.selected {
border-color: #3b82f6;
background-color: #eff6ff;
}
.option-card.correct {
border-color: #10b981;
background-color: #d1fae5;
}
.option-card.incorrect {
border-color: #ef4444;
background-color: #fee2e2;
}
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.code-block {
max-height: 70vh;
overflow-y: auto;
white-space: pre-wrap;
font-family: monospace;
font-size: 14px;
line-height: 1.5;
tab-size: 4;
}
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.celebrate {
animation: celebrate 0.5s ease-in-out;
}
.feedback-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 40px;
border-radius: 10px;
font-size: 24px;
font-weight: bold;
color: white;
z-index: 100;
opacity: 0;
transition: opacity 0.3s ease;
}
.feedback-message.show {
opacity: 1;
}
.feedback-correct {
background-color: rgba(16, 185, 129, 0.9);
}
.feedback-incorrect {
background-color: rgba(239, 68, 68, 0.9);
}
.chinese-scroll {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23f9a8d4' fill-opacity='0.1' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'%3E%3C/path%3E%3C/svg%3E");
}
.ink-brush {
position: relative;
}
.ink-brush::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23000000' fill-opacity='0.05' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z'%3E%3C/path%3E%3C/svg%3E");
z-index: -1;
opacity: 0.8;
border-radius: inherit;
}
</style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.inset-0{inset:0px}.bottom-4{bottom:1rem}.right-4{right:1rem}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-md{max-width:28rem}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138 / var(--tw-border-opacity, 1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-opacity-50{--tw-bg-opacity:0.5}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-yellow-600:hover{--tw-bg-opacity:1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}</style></head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-indigo-800 mb-2 ink-brush">成語猜謎配對遊戲</h1>
<p class="text-gray-600 mb-6">根據提示選擇正確的成語，測試你的成語知識！</p>
<!-- 難度選擇 -->
<div id="difficultySelector" class="mb-8 hidden">
<h2 class="text-xl font-semibold mb-4">選擇難度</h2>
<div class="flex justify-center gap-4 flex-wrap">
<button id="easyBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition-all active">
簡單
</button>
<button id="normalBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
普通
</button>
<button id="hardBtn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
困難
</button>
</div>
</div>
<div id="gameControls" class="">
<div class="flex justify-center gap-4 mb-4">
<button id="startBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition-all">重新開始</button>
<button id="nextBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-all hidden">
下一題
</button>
</div>
<div class="flex justify-center items-center gap-4 flex-wrap">
<span class="text-lg font-semibold">分數: <span id="score">0</span></span>
<span class="text-lg font-semibold">關卡: <span id="level">1</span> / <span id="totalLevels">8</span></span>
<span class="text-lg font-semibold">時間: <span id="timer">00:01</span></span>
<span class="text-lg font-semibold">難度: <span id="currentDifficulty">簡單</span></span>
</div>
</div>
</div>
<div id="gameContainer" class="game-container p-6 rounded-xl shadow-lg">
<div id="idiomContainer" class="flex flex-col items-center gap-6">
<!-- 遊戲內容將在這裡動態生成 -->
<div class="chinese-scroll bg-amber-50 p-6 rounded-lg border-2 border-amber-200 w-full max-w-2xl">
<div class="text-center text-xl font-medium text-gray-800 mb-4" id="idiomHint">提示：形容專心致志，毫無雜念</div>
<!-- 成語選項區域 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6" id="idiomOptions"><div class="option-card bg-white p-4 rounded-lg shadow-md text-center transition-all" data-option="聚精會神">聚精會神</div><div class="option-card bg-white p-4 rounded-lg shadow-md text-center transition-all" data-option="全神貫注">全神貫注</div><div class="option-card bg-white p-4 rounded-lg shadow-md text-center transition-all" data-option="專心致志">專心致志</div><div class="option-card bg-white p-4 rounded-lg shadow-md text-center transition-all" data-option="一心一意">一心一意</div></div>
</div>
</div>
</div>
<!-- 遊戲結束彈窗 -->
<div id="gameOverModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
<h2 class="text-2xl font-bold text-center mb-4">遊戲結束！</h2>
<p class="text-center text-lg mb-2">你的最終得分是: <span id="finalScore" class="font-bold text-indigo-600">0</span></p>
<p class="text-center text-lg mb-4">總用時: <span id="finalTime" class="font-bold text-indigo-600">00:00</span></p>
<div class="flex justify-center gap-4">
<button id="playAgainBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition-all">
再玩一次
</button>
<button id="changeDifficultyBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg transition-all">
更改難度
</button>
</div>
</div>
</div>
<!-- 開發人員模式彈窗 -->
<div id="developerModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white p-6 rounded-lg shadow-xl max-w-5xl w-full">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">開發人員模式 - 完整程式碼</h2>
<button id="closeDevModal" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="code-block bg-gray-100 p-4 rounded-lg text-gray-800" id="codeBlock">
<!-- 程式碼將在這裡動態生成 -->
</div>
<div class="mt-4 flex justify-end">
<button id="copyCodeBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
複製程式碼
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 反饋訊息 -->
<div id="feedbackMessage" class="feedback-message feedback-correct">答對了！</div>
<!-- 開發人員按鈕 -->
<div class="fixed bottom-4 right-4">
<button id="developerBtn" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-lg transition-all flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
開發人員
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 成語資料庫 - 按難度分類
const idiomDatabase = {
easy: [
{ idiom: "一心一意", hint: "形容專心致志，毫無雜念", options: ["一心一意", "專心致志", "全神貫注", "聚精會神"] },
{ idiom: "風和日麗", hint: "形容天氣晴朗，風和日暖", options: ["風和日麗", "晴空萬里", "風調雨順", "陽光明媚"] },
{ idiom: "四面八方", hint: "形容各個方向，各個地方", options: ["四面八方", "五湖四海", "天涯海角", "普天之下"] },
{ idiom: "五光十色", hint: "形容色彩繁多，十分絢麗", options: ["五光十色", "絢麗多彩", "色彩斑斕", "光彩奪目"] },
{ idiom: "自言自語", hint: "自己跟自己說話", options: ["自言自語", "喃喃自語", "獨言獨語", "自說自話"] },
{ idiom: "大吉大利", hint: "形容非常吉利、順利", options: ["大吉大利", "吉祥如意", "萬事如意", "福星高照"] },
{ idiom: "天長地久", hint: "形容時間長久，永遠不變", options: ["天長地久", "地久天長", "永垂不朽", "萬古長青"] },
{ idiom: "日月如梭", hint: "形容時間過得很快", options: ["日月如梭", "光陰似箭", "歲月如流", "時光飛逝"] }
],
normal: [
{ idiom: "守株待兔", hint: "比喻死守狹隘的經驗，不知變通", options: ["守株待兔", "坐享其成", "因循守舊", "固步自封"] },
{ idiom: "千軍萬馬", hint: "形容數量極多的軍隊或人群", options: ["千軍萬馬", "人山人海", "浩浩蕩蕩", "蜂擁而至"] },
{ idiom: "半途而廢", hint: "事情做到一半就放棄", options: ["半途而廢", "虎頭蛇尾", "功虧一簣", "前功盡棄"] },
{ idiom: "入木三分", hint: "形容書法筆力剛勁有力，也比喻見解深刻", options: ["入木三分", "鞭辟入裡", "深入骨髓", "刻骨銘心"] },
{ idiom: "望穿秋水", hint: "形容殷切期盼", options: ["望穿秋水", "翹首以待", "引頸企盼", "殷切期盼"] },
{ idiom: "畫龍點睛", hint: "比喻在關鍵處加以點染使作品更加生動有神", options: ["畫龍點睛", "畫蛇添足", "錦上添花", "點石成金"] },
{ idiom: "一針見血", hint: "比喻說話直截了當，切中要害", options: ["一針見血", "直言不諱", "開門見山", "單刀直入"] },
{ idiom: "一絲不苟", hint: "形容做事認真仔細，一點也不馬虎", options: ["一絲不苟", "謹小慎微", "精益求精", "認真負責"] }
],
hard: [
{ idiom: "刻舟求劍", hint: "比喻不懂事物發展變化的道理，拘泥固執", options: ["刻舟求劍", "緣木求魚", "南轅北轍", "買櫝還珠"] },
{ idiom: "囫圇吞棗", hint: "比喻讀書等不加分析理解，籠統接受", options: ["囫圇吞棗", "不求甚解", "一知半解", "淺嚐輒止"] },
{ idiom: "鳳毛麟角", hint: "比喻珍貴而稀少的人或物", options: ["鳳毛麟角", "稀世珍寶", "絕無僅有", "鳳毛鱗爪"] },
{ idiom: "曇花一現", hint: "比喻美好的事物或景象出現了一下，很快就消失", options: ["曇花一現", "稍縱即逝", "轉瞬即逝", "電光石火"] },
{ idiom: "杯弓蛇影", hint: "比喻疑神疑鬼，自相驚擾", options: ["杯弓蛇影", "風聲鶴唳", "草木皆兵", "驚弓之鳥"] },
{ idiom: "沆瀣一氣", hint: "比喻臭味相投的人勾結在一起", options: ["沆瀣一氣", "狼狽為奸", "同流合污", "臭味相投"] },
{ idiom: "膾炙人口", hint: "比喻詩文或事物很出名，人人稱說", options: ["膾炙人口", "家喻戶曉", "婦孺皆知", "耳熟能詳"] },
{ idiom: "一丘之貉", hint: "比喻彼此同是壞人，沒有什麼差別", options: ["一丘之貉", "半斤八兩", "五十步笑百步", "彼此彼此"] }
]
};
let currentDifficulty = "normal";
let idioms = [];
let currentLevel = 0;
let score = 0;
let gameStarted = false;
let currentIdiom = "";
let startTime = 0;
let timerInterval = null;
let selectedOption = null;
let autoNextTimeout = null;
const difficultySelector = document.getElementById('difficultySelector');
const easyBtn = document.getElementById('easyBtn');
const normalBtn = document.getElementById('normalBtn');
const hardBtn = document.getElementById('hardBtn');
const gameControls = document.getElementById('gameControls');
const gameContainer = document.getElementById('gameContainer');
const startBtn = document.getElementById('startBtn');
const nextBtn = document.getElementById('nextBtn');
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const totalLevelsElement = document.getElementById('totalLevels');
const timerElement = document.getElementById('timer');
const currentDifficultyElement = document.getElementById('currentDifficulty');
const idiomHint = document.getElementById('idiomHint');
const idiomOptions = document.getElementById('idiomOptions');
const gameOverModal = document.getElementById('gameOverModal');
const finalScoreElement = document.getElementById('finalScore');
const finalTimeElement = document.getElementById('finalTime');
const playAgainBtn = document.getElementById('playAgainBtn');
const changeDifficultyBtn = document.getElementById('changeDifficultyBtn');
const developerBtn = document.getElementById('developerBtn');
const developerModal = document.getElementById('developerModal');
const closeDevModal = document.getElementById('closeDevModal');
const codeBlock = document.getElementById('codeBlock');
const copyCodeBtn = document.getElementById('copyCodeBtn');
const feedbackMessage = document.getElementById('feedbackMessage');
// 難度選擇事件
easyBtn.addEventListener('click', () => selectDifficulty('easy'));
normalBtn.addEventListener('click', () => selectDifficulty('normal'));
hardBtn.addEventListener('click', () => selectDifficulty('hard'));
startBtn.addEventListener('click', startGame);
nextBtn.addEventListener('click', nextLevel);
playAgainBtn.addEventListener('click', resetGame);
changeDifficultyBtn.addEventListener('click', showDifficultySelector);
developerBtn.addEventListener('click', showDeveloperModal);
closeDevModal.addEventListener('click', closeDeveloperModal);
copyCodeBtn.addEventListener('click', copyCode);
function selectDifficulty(difficulty) {
currentDifficulty = difficulty;
// 更新按鈕樣式
easyBtn.classList.remove('active');
normalBtn.classList.remove('active');
hardBtn.classList.remove('active');
switch(difficulty) {
case 'easy':
easyBtn.classList.add('active');
currentDifficultyElement.textContent = "簡單";
break;
case 'normal':
normalBtn.classList.add('active');
currentDifficultyElement.textContent = "普通";
break;
case 'hard':
hardBtn.classList.add('active');
currentDifficultyElement.textContent = "困難";
break;
}
// 設置成語資料
idioms = idiomDatabase[difficulty];
totalLevelsElement.textContent = idioms.length;
// 顯示遊戲控制項
difficultySelector.classList.add('hidden');
gameControls.classList.remove('hidden');
gameContainer.classList.remove('hidden');
}
function startGame() {
gameStarted = true;
score = 0;
currentLevel = 0;
updateScore();
// 開始計時
startTimer();
loadLevel();
startBtn.textContent = "重新開始";
}
function startTimer() {
// 清除之前的計時器
if (timerInterval) {
clearInterval(timerInterval);
}
// 設置開始時間
startTime = Date.now();
// 更新計時器顯示
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
const seconds = (elapsedTime % 60).toString().padStart(2, '0');
timerElement.textContent = `${minutes}:${seconds}`;
}
function stopTimer() {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
}
}
function loadLevel() {
// 清除任何自動下一題的計時器
if (autoNextTimeout) {
clearTimeout(autoNextTimeout);
autoNextTimeout = null;
}
if (currentLevel >= idioms.length) {
endGame();
return;
}
selectedOption = null;
nextBtn.classList.add('hidden');
// 更新關卡顯示
levelElement.textContent = currentLevel + 1;
// 獲取當前成語
currentIdiom = idioms[currentLevel].idiom;
// 顯示提示
idiomHint.textContent = `提示：${idioms[currentLevel].hint}`;
// 清空選項區域
idiomOptions.innerHTML = '';
// 獲取選項
const options = idioms[currentLevel].options;
// 打亂選項順序
const shuffledOptions = [...options].sort(() => Math.random() - 0.5);
// 創建選項卡片
shuffledOptions.forEach((option, index) => {
const optionCard = document.createElement('div');
optionCard.className = 'option-card bg-white p-4 rounded-lg shadow-md text-center transition-all';
optionCard.textContent = option;
optionCard.dataset.option = option;
// 添加點擊事件
optionCard.addEventListener('click', function() {
if (selectedOption !== null) {
// 取消之前選中的選項
const prevSelected = document.querySelector('.option-card.selected');
if (prevSelected) {
prevSelected.classList.remove('selected');
}
}
// 選中當前選項
selectedOption = option;
optionCard.classList.add('selected');
// 檢查答案
checkAnswer(optionCard);
});
idiomOptions.appendChild(optionCard);
});
}
function checkAnswer(optionCard) {
if (!gameStarted) return;
const selectedOption = optionCard.dataset.option;
if (selectedOption === currentIdiom) {
// 答對了
optionCard.classList.add('correct');
optionCard.classList.remove('selected');
let pointsEarned = 10;
// 根據難度調整得分
if (currentDifficulty === 'easy') {
pointsEarned = 5;
} else if (currentDifficulty === 'hard') {
pointsEarned = 15;
}
score += pointsEarned;
updateScore();
// 顯示正確反饋
showFeedback("答對了！", "feedback-correct");
// 禁用所有選項
const allOptions = document.querySelectorAll('.option-card');
allOptions.forEach(option => {
option.style.pointerEvents = 'none';
});
// 設置延遲，自動進入下一題
autoNextTimeout = setTimeout(() => {
nextLevel();
}, 1500);
} else {
// 答錯了
optionCard.classList.add('incorrect');
optionCard.classList.remove('selected');
// 顯示正確答案
const correctOption = document.querySelector(`.option-card[data-option="${currentIdiom}"]`);
correctOption.classList.add('correct');
// 顯示錯誤反饋
showFeedback("答錯了！", "feedback-incorrect");
// 禁用所有選項
const allOptions = document.querySelectorAll('.option-card');
allOptions.forEach(option => {
option.style.pointerEvents = 'none';
});
// 顯示下一題按鈕
nextBtn.classList.remove('hidden');
}
}
function showFeedback(message, className) {
feedbackMessage.textContent = message;
feedbackMessage.className = `feedback-message ${className}`;
feedbackMessage.classList.add('show');
setTimeout(() => {
feedbackMessage.classList.remove('show');
}, 1200);
}
function nextLevel() {
currentLevel++;
loadLevel();
}
function updateScore() {
scoreElement.textContent = score;
}
function endGame() {
gameStarted = false;
stopTimer();
finalScoreElement.textContent = score;
finalTimeElement.textContent = timerElement.textContent;
gameOverModal.classList.remove('hidden');
}
function resetGame() {
gameStarted = false;
score = 0;
currentLevel = 0;
updateScore();
gameOverModal.classList.add('hidden');
startGame();
}
function showDifficultySelector() {
gameStarted = false;
score = 0;
currentLevel = 0;
updateScore();
gameOverModal.classList.add('hidden');
gameControls.classList.add('hidden');
gameContainer.classList.add('hidden');
difficultySelector.classList.remove('hidden');
stopTimer();
timerElement.textContent = "00:00";
}
function showDeveloperModal() {
// 獲取當前頁面的HTML代碼
const htmlCode = document.documentElement.outerHTML;
// 顯示在代碼塊中
codeBlock.textContent = htmlCode;
// 顯示模態框
developerModal.classList.remove('hidden');
}
function closeDeveloperModal() {
developerModal.classList.add('hidden');
}
function copyCode() {
const code = codeBlock.textContent;
// 使用Clipboard API複製文本
navigator.clipboard.writeText(code).then(() => {
// 複製成功，臨時更改按鈕文本
const originalText = copyCodeBtn.innerHTML;
copyCodeBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
已複製
`;
setTimeout(() => {
copyCodeBtn.innerHTML = originalText;
}, 2000);
}).catch(err => {
console.error('無法複製文本: ', err);
alert('複製失敗，請手動選擇並複製代碼。');
});
}
// 點擊模態框外部關閉模態框
window.addEventListener('click', function(event) {
if (event.target === gameOverModal) {
gameOverModal.classList.add('hidden');
}
if (event.target === developerModal) {
developerModal.classList.add('hidden');
}
});
// 默認選擇普通難度
normalBtn.classList.add('active');
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9474b32816bbf201',t:'MTc0ODUwODE2MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe>
</body></html>