將動物圖片與對應的名稱連線起來！
<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>
body {
font-family: 'Microsoft JhengHei', sans-serif;
background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
min-height: 100vh;
}
.card {
perspective: 1000px;
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}
.flipped .card-inner {
transform: rotateY(180deg);
}
.matched {
opacity: 0.7;
pointer-events: none;
}
.line {
position: absolute;
background-color: #00acc1;
z-index: 10;
pointer-events: none;
opacity: 0.8;
transition: all 0.3s ease;
}
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.celebrate {
animation: celebrate 0.5s ease-in-out;
}
.animal-svg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.code-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
overflow-y: auto;
}
.code-content {
background-color: #fff;
margin: 2% auto;
padding: 20px;
width: 90%;
max-width: 1200px;
border-radius: 8px;
max-height: 90vh;
overflow-y: auto;
}
.code-display {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
font-family: monospace;
font-size: 14px;
line-height: 1.5;
color: #333;
border: 1px solid #ddd;
}
</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}.relative{position:relative}.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}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-32{height:8rem}.h-full{height:100%}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-teal-300{--tw-border-opacity:1;border-color:rgb(94 234 212 / var(--tw-border-opacity, 1))}.border-teal-500{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / 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-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))}.bg-opacity-70{--tw-bg-opacity:0.7}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.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-3xl{font-size:1.875rem;line-height:2.25rem}.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}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110 / var(--tw-text-opacity, 1))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px 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-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-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{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / 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-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110 / 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\:h-36{height:9rem}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}</style></head>
<body>
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-teal-800 mb-2">動物圖片和名字連連看</h1>
<p class="text-lg text-teal-700">將動物圖片與對應的名稱連線起來！</p>
<div class="mt-4 flex justify-center space-x-4">
<div class="bg-white rounded-lg p-4 shadow-md">
<span class="font-bold text-teal-800">分數：</span>
<span id="score" class="text-xl font-bold text-teal-600">0</span>
</div>
<div class="bg-white rounded-lg p-4 shadow-md">
<span class="font-bold text-teal-800">時間：</span>
<span id="timer" class="text-xl font-bold text-teal-600">35</span>
</div>
</div>
<button id="start-btn" class="mt-4 bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105 hidden">
開始遊戲
</button>
<button id="restart-btn" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
重新開始
</button>
</div>
<div id="game-container" class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto transition-opacity duration-500 opacity-100"><div class="card relative h-32 md:h-36" data-id="image-大象" data-type="image" data-match="大象">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a8dadc"></circle>
<path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"></path>
<circle cx="40" cy="45" r="4" fill="#333"></circle>
<circle cx="60" cy="45" r="4" fill="#333"></circle>
<path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"></path>
<path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"></path>
<path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-貓" data-type="name" data-match="貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">貓</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-貓" data-type="image" data-match="貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#f4a261"></circle>
<circle cx="35" cy="40" r="5" fill="#333"></circle>
<circle cx="65" cy="40" r="5" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"></path>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-長頸鹿" data-type="image" data-match="長頸鹿">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"></path>
<circle cx="50" cy="30" r="15" fill="#e9c46a"></circle>
<path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<circle cx="45" cy="25" r="3" fill="#333"></circle>
<circle cx="55" cy="25" r="3" fill="#333"></circle>
<path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-長頸鹿" data-type="name" data-match="長頸鹿">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">長頸鹿</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-狗" data-type="name" data-match="狗">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">狗</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-猴子" data-type="name" data-match="猴子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">猴子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-熊貓" data-type="image" data-match="熊貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#f8f9fa"></circle>
<circle cx="35" cy="35" r="10" fill="#212529"></circle>
<circle cx="65" cy="35" r="10" fill="#212529"></circle>
<circle cx="35" cy="35" r="5" fill="#f8f9fa"></circle>
<circle cx="65" cy="35" r="5" fill="#f8f9fa"></circle>
<circle cx="35" cy="35" r="2" fill="#212529"></circle>
<circle cx="65" cy="35" r="2" fill="#212529"></circle>
<ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"></ellipse>
<path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-狗" data-type="image" data-match="狗">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#e9c46a"></circle>
<circle cx="35" cy="40" r="5" fill="#333"></circle>
<circle cx="65" cy="40" r="5" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"></path>
<ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"></ellipse>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-大象" data-type="name" data-match="大象">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">大象</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-獅子" data-type="name" data-match="獅子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">獅子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-猴子" data-type="image" data-match="猴子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a47148"></circle>
<circle cx="50" cy="40" r="20" fill="#d4a276"></circle>
<circle cx="40" cy="35" r="4" fill="#333"></circle>
<circle cx="60" cy="35" r="4" fill="#333"></circle>
<path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"></path>
<path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"></path>
<ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"></ellipse>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-兔子" data-type="image" data-match="兔子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="60" r="25" fill="#f8edeb"></circle>
<circle cx="40" cy="55" r="4" fill="#333"></circle>
<circle cx="60" cy="55" r="4" fill="#333"></circle>
<ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"></ellipse>
<path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"></path>
<path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"></path>
<path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-兔子" data-type="name" data-match="兔子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">兔子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-熊貓" data-type="name" data-match="熊貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">熊貓</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-獅子" data-type="image" data-match="獅子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#e9c46a"></circle>
<circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"></circle>
<circle cx="40" cy="45" r="4" fill="#333"></circle>
<circle cx="60" cy="45" r="4" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div></div>
<div id="game-over" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 max-w-md w-full text-center shadow-2xl transform transition-all">
<h2 id="result-title" class="text-3xl font-bold mb-4 text-teal-800">恭喜你贏了！</h2>
<p id="result-message" class="text-xl mb-6">你的分數是：<span class="font-bold text-teal-600">122</span><br>剩餘時間獎勵：<span class="font-bold text-green-600">+42</span></p>
<button id="play-again" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
再玩一次
</button>
</div>
</div>
<!-- Developer Button -->
<button id="dev-btn" class="fixed bottom-4 right-4 bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
<!-- Code Modal -->
<div id="code-modal" class="code-modal" style="display: block;">
<div class="code-content">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-teal-800">完整程式碼</h2>
<button id="close-modal" 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="mb-4 flex space-x-2">
<button id="copy-code" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded transition duration-300">
複製程式碼
</button>
<span id="copy-message" class="hidden text-green-600 py-2">已複製到剪貼簿！</span>
</div>
<pre id="code-display" class="code-display"><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>
body {
font-family: 'Microsoft JhengHei', sans-serif;
background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
min-height: 100vh;
}
.card {
perspective: 1000px;
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}
.flipped .card-inner {
transform: rotateY(180deg);
}
.matched {
opacity: 0.7;
pointer-events: none;
}
.line {
position: absolute;
background-color: #00acc1;
z-index: 10;
pointer-events: none;
opacity: 0.8;
transition: all 0.3s ease;
}
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.celebrate {
animation: celebrate 0.5s ease-in-out;
}
.animal-svg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.code-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
overflow-y: auto;
}
.code-content {
background-color: #fff;
margin: 2% auto;
padding: 20px;
width: 90%;
max-width: 1200px;
border-radius: 8px;
max-height: 90vh;
overflow-y: auto;
}
.code-display {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
font-family: monospace;
font-size: 14px;
line-height: 1.5;
color: #333;
border: 1px solid #ddd;
}
</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}.relative{position:relative}.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}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-32{height:8rem}.h-full{height:100%}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-teal-300{--tw-border-opacity:1;border-color:rgb(94 234 212 / var(--tw-border-opacity, 1))}.border-teal-500{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / 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-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))}.bg-opacity-70{--tw-bg-opacity:0.7}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.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-3xl{font-size:1.875rem;line-height:2.25rem}.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}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110 / var(--tw-text-opacity, 1))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px 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-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-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{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / 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-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110 / 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\:h-36{height:9rem}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}</style></head>
<body>
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-teal-800 mb-2">動物圖片和名字連連看</h1>
<p class="text-lg text-teal-700">將動物圖片與對應的名稱連線起來！</p>
<div class="mt-4 flex justify-center space-x-4">
<div class="bg-white rounded-lg p-4 shadow-md">
<span class="font-bold text-teal-800">分數：</span>
<span id="score" class="text-xl font-bold text-teal-600">0</span>
</div>
<div class="bg-white rounded-lg p-4 shadow-md">
<span class="font-bold text-teal-800">時間：</span>
<span id="timer" class="text-xl font-bold text-teal-600">45</span>
</div>
</div>
<button id="start-btn" class="mt-4 bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105 hidden">
開始遊戲
</button>
<button id="restart-btn" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
重新開始
</button>
</div>
<div id="game-container" class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto transition-opacity duration-500 opacity-100"><div class="card relative h-32 md:h-36" data-id="image-大象" data-type="image" data-match="大象">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a8dadc"></circle>
<path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"></path>
<circle cx="40" cy="45" r="4" fill="#333"></circle>
<circle cx="60" cy="45" r="4" fill="#333"></circle>
<path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"></path>
<path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"></path>
<path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-貓" data-type="name" data-match="貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">貓</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-貓" data-type="image" data-match="貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#f4a261"></circle>
<circle cx="35" cy="40" r="5" fill="#333"></circle>
<circle cx="65" cy="40" r="5" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"></path>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-長頸鹿" data-type="image" data-match="長頸鹿">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"></path>
<circle cx="50" cy="30" r="15" fill="#e9c46a"></circle>
<path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<circle cx="45" cy="25" r="3" fill="#333"></circle>
<circle cx="55" cy="25" r="3" fill="#333"></circle>
<path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"></path>
<path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-長頸鹿" data-type="name" data-match="長頸鹿">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">長頸鹿</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-狗" data-type="name" data-match="狗">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">狗</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-猴子" data-type="name" data-match="猴子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">猴子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-熊貓" data-type="image" data-match="熊貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#f8f9fa"></circle>
<circle cx="35" cy="35" r="10" fill="#212529"></circle>
<circle cx="65" cy="35" r="10" fill="#212529"></circle>
<circle cx="35" cy="35" r="5" fill="#f8f9fa"></circle>
<circle cx="65" cy="35" r="5" fill="#f8f9fa"></circle>
<circle cx="35" cy="35" r="2" fill="#212529"></circle>
<circle cx="65" cy="35" r="2" fill="#212529"></circle>
<ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"></ellipse>
<path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-狗" data-type="image" data-match="狗">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#e9c46a"></circle>
<circle cx="35" cy="40" r="5" fill="#333"></circle>
<circle cx="65" cy="40" r="5" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"></path>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"></path>
<ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"></ellipse>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-大象" data-type="name" data-match="大象">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">大象</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-獅子" data-type="name" data-match="獅子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">獅子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-猴子" data-type="image" data-match="猴子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a47148"></circle>
<circle cx="50" cy="40" r="20" fill="#d4a276"></circle>
<circle cx="40" cy="35" r="4" fill="#333"></circle>
<circle cx="60" cy="35" r="4" fill="#333"></circle>
<path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"></path>
<path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"></path>
<ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"></ellipse>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-兔子" data-type="image" data-match="兔子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="60" r="25" fill="#f8edeb"></circle>
<circle cx="40" cy="55" r="4" fill="#333"></circle>
<circle cx="60" cy="55" r="4" fill="#333"></circle>
<ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"></ellipse>
<path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"></path>
<path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"></path>
<path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-兔子" data-type="name" data-match="兔子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">兔子</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="name-熊貓" data-type="name" data-match="熊貓">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<span class="text-2xl font-bold text-teal-800">熊貓</span>
</div>
</div>
</div><div class="card relative h-32 md:h-36" data-id="image-獅子" data-type="image" data-match="獅子">
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
<div class="animal-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#e9c46a"></circle>
<circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"></circle>
<circle cx="40" cy="45" r="4" fill="#333"></circle>
<circle cx="60" cy="45" r="4" fill="#333"></circle>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"></path>
<path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"></path>
</svg></div>
</div>
</div>
</div></div>
<div id="game-over" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 max-w-md w-full text-center shadow-2xl transform transition-all">
<h2 id="result-title" class="text-3xl font-bold mb-4 text-teal-800">恭喜你贏了！</h2>
<p id="result-message" class="text-xl mb-6">你的分數是：<span class="font-bold text-teal-600">122</span><br>剩餘時間獎勵：<span class="font-bold text-green-600">+42</span></p>
<button id="play-again" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
再玩一次
</button>
</div>
</div>
<!-- Developer Button -->
<button id="dev-btn" class="fixed bottom-4 right-4 bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
<!-- Code Modal -->
<div id="code-modal" class="code-modal" style="display: block;">
<div class="code-content">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-teal-800">完整程式碼</h2>
<button id="close-modal" 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="mb-4 flex space-x-2">
<button id="copy-code" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded transition duration-300">
複製程式碼
</button>
<span id="copy-message" class="hidden text-green-600 py-2">已複製到剪貼簿！</span>
</div>
<pre id="code-display" class="code-display">&lt;html lang="zh-TW"&gt;&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;動物連連看遊戲&lt;/title&gt;
&lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
&lt;style&gt;
body {
font-family: 'Microsoft JhengHei', sans-serif;
background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
min-height: 100vh;
}
.card {
perspective: 1000px;
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}
.flipped .card-inner {
transform: rotateY(180deg);
}
.matched {
opacity: 0.7;
pointer-events: none;
}
.line {
position: absolute;
background-color: #00acc1;
z-index: 10;
pointer-events: none;
opacity: 0.8;
transition: all 0.3s ease;
}
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.celebrate {
animation: celebrate 0.5s ease-in-out;
}
.animal-svg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.code-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
overflow-y: auto;
}
.code-content {
background-color: #fff;
margin: 2% auto;
padding: 20px;
width: 90%;
max-width: 1200px;
border-radius: 8px;
max-height: 90vh;
overflow-y: auto;
}
.code-display {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
font-family: monospace;
font-size: 14px;
line-height: 1.5;
color: #333;
border: 1px solid #ddd;
}
&lt;/style&gt;
&lt;style&gt;*, ::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}.relative{position:relative}.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}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-32{height:8rem}.h-full{height:100%}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-x-2 &gt; :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 &gt; :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-teal-300{--tw-border-opacity:1;border-color:rgb(94 234 212 / var(--tw-border-opacity, 1))}.border-teal-500{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / 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-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))}.bg-opacity-70{--tw-bg-opacity:0.7}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.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-3xl{font-size:1.875rem;line-height:2.25rem}.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}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110 / var(--tw-text-opacity, 1))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px 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-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-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{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / 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-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110 / 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\:h-36{height:9rem}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}&lt;/style&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="container mx-auto px-4 py-8"&gt;
&lt;div class="text-center mb-8"&gt;
&lt;h1 class="text-4xl font-bold text-teal-800 mb-2"&gt;動物圖片和名字連連看&lt;/h1&gt;
&lt;p class="text-lg text-teal-700"&gt;將動物圖片與對應的名稱連線起來！&lt;/p&gt;
&lt;div class="mt-4 flex justify-center space-x-4"&gt;
&lt;div class="bg-white rounded-lg p-4 shadow-md"&gt;
&lt;span class="font-bold text-teal-800"&gt;分數：&lt;/span&gt;
&lt;span id="score" class="text-xl font-bold text-teal-600"&gt;0&lt;/span&gt;
&lt;/div&gt;
&lt;div class="bg-white rounded-lg p-4 shadow-md"&gt;
&lt;span class="font-bold text-teal-800"&gt;時間：&lt;/span&gt;
&lt;span id="timer" class="text-xl font-bold text-teal-600"&gt;59&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;button id="start-btn" class="mt-4 bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105 hidden"&gt;
開始遊戲
&lt;/button&gt;
&lt;button id="restart-btn" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300 transform hover:scale-105"&gt;
重新開始
&lt;/button&gt;
&lt;/div&gt;
&lt;div id="game-container" class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto transition-opacity duration-500 opacity-100"&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-大象" data-type="image" data-match="大象"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#a8dadc"&gt;&lt;/circle&gt;
&lt;path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"&gt;&lt;/path&gt;
&lt;circle cx="40" cy="45" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="60" cy="45" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-貓" data-type="name" data-match="貓"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;貓&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-貓" data-type="image" data-match="貓"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="35" fill="#f4a261"&gt;&lt;/circle&gt;
&lt;circle cx="35" cy="40" r="5" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="65" cy="40" r="5" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-長頸鹿" data-type="image" data-match="長頸鹿"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"&gt;&lt;/path&gt;
&lt;circle cx="50" cy="30" r="15" fill="#e9c46a"&gt;&lt;/circle&gt;
&lt;path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;circle cx="45" cy="25" r="3" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="55" cy="25" r="3" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-長頸鹿" data-type="name" data-match="長頸鹿"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;長頸鹿&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-狗" data-type="name" data-match="狗"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;狗&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-猴子" data-type="name" data-match="猴子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;猴子&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-熊貓" data-type="image" data-match="熊貓"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#f8f9fa"&gt;&lt;/circle&gt;
&lt;circle cx="35" cy="35" r="10" fill="#212529"&gt;&lt;/circle&gt;
&lt;circle cx="65" cy="35" r="10" fill="#212529"&gt;&lt;/circle&gt;
&lt;circle cx="35" cy="35" r="5" fill="#f8f9fa"&gt;&lt;/circle&gt;
&lt;circle cx="65" cy="35" r="5" fill="#f8f9fa"&gt;&lt;/circle&gt;
&lt;circle cx="35" cy="35" r="2" fill="#212529"&gt;&lt;/circle&gt;
&lt;circle cx="65" cy="35" r="2" fill="#212529"&gt;&lt;/circle&gt;
&lt;ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"&gt;&lt;/ellipse&gt;
&lt;path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-狗" data-type="image" data-match="狗"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="35" fill="#e9c46a"&gt;&lt;/circle&gt;
&lt;circle cx="35" cy="40" r="5" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="65" cy="40" r="5" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"&gt;&lt;/ellipse&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-大象" data-type="name" data-match="大象"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;大象&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-獅子" data-type="name" data-match="獅子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;獅子&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-猴子" data-type="image" data-match="猴子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#a47148"&gt;&lt;/circle&gt;
&lt;circle cx="50" cy="40" r="20" fill="#d4a276"&gt;&lt;/circle&gt;
&lt;circle cx="40" cy="35" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="60" cy="35" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"&gt;&lt;/path&gt;
&lt;ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"&gt;&lt;/ellipse&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-兔子" data-type="image" data-match="兔子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="60" r="25" fill="#f8edeb"&gt;&lt;/circle&gt;
&lt;circle cx="40" cy="55" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="60" cy="55" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"&gt;&lt;/ellipse&gt;
&lt;path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-兔子" data-type="name" data-match="兔子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;兔子&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="name-熊貓" data-type="name" data-match="熊貓"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;span class="text-2xl font-bold text-teal-800"&gt;熊貓&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="card relative h-32 md:h-36" data-id="image-獅子" data-type="image" data-match="獅子"&gt;
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
&lt;div class="animal-svg"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#e9c46a"&gt;&lt;/circle&gt;
&lt;circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"&gt;&lt;/circle&gt;
&lt;circle cx="40" cy="45" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;circle cx="60" cy="45" r="4" fill="#333"&gt;&lt;/circle&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"&gt;&lt;/path&gt;
&lt;path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;div id="game-over" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"&gt;
&lt;div class="bg-white rounded-xl p-8 max-w-md w-full text-center shadow-2xl transform transition-all"&gt;
&lt;h2 id="result-title" class="text-3xl font-bold mb-4 text-teal-800"&gt;恭喜你贏了！&lt;/h2&gt;
&lt;p id="result-message" class="text-xl mb-6"&gt;你的分數是：&lt;span class="font-bold text-teal-600"&gt;122&lt;/span&gt;&lt;br&gt;剩餘時間獎勵：&lt;span class="font-bold text-green-600"&gt;+42&lt;/span&gt;&lt;/p&gt;
&lt;button id="play-again" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105"&gt;
再玩一次
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Developer Button --&gt;
&lt;button id="dev-btn" class="fixed bottom-4 right-4 bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 flex items-center"&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"&gt;
&lt;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"&gt;&lt;/path&gt;
&lt;/svg&gt;
開發人員
&lt;/button&gt;
&lt;!-- Code Modal --&gt;
&lt;div id="code-modal" class="code-modal" style="display: block;"&gt;
&lt;div class="code-content"&gt;
&lt;div class="flex justify-between items-center mb-4"&gt;
&lt;h2 class="text-2xl font-bold text-teal-800"&gt;完整程式碼&lt;/h2&gt;
&lt;button id="close-modal" class="text-gray-500 hover:text-gray-700"&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class="mb-4 flex space-x-2"&gt;
&lt;button id="copy-code" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded transition duration-300"&gt;
複製程式碼
&lt;/button&gt;
&lt;span id="copy-message" class="hidden text-green-600 py-2"&gt;已複製到剪貼簿！&lt;/span&gt;
&lt;/div&gt;
&lt;pre id="code-display" class="code-display"&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
document.addEventListener('DOMContentLoaded', () =&gt; {
const gameContainer = document.getElementById('game-container');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
const restartBtn = document.getElementById('restart-btn');
const gameOverScreen = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const playAgainBtn = document.getElementById('play-again');
const resultTitle = document.getElementById('result-title');
const resultMessage = document.getElementById('result-message');
const devBtn = document.getElementById('dev-btn');
const codeModal = document.getElementById('code-modal');
const closeModal = document.getElementById('close-modal');
const copyCodeBtn = document.getElementById('copy-code');
const copyMessage = document.getElementById('copy-message');
const codeDisplay = document.getElementById('code-display');
let score = 0;
let timeLeft = 60;
let timer;
let selectedCard = null;
let isProcessing = false;
let matchedPairs = 0;
let totalPairs = 8;
let lines = [];
// 動物資料
const animals = [
{ name: "貓", svg: createCatSVG() },
{ name: "狗", svg: createDogSVG() },
{ name: "兔子", svg: createRabbitSVG() },
{ name: "大象", svg: createElephantSVG() },
{ name: "獅子", svg: createLionSVG() },
{ name: "長頸鹿", svg: createGiraffeSVG() },
{ name: "熊貓", svg: createPandaSVG() },
{ name: "猴子", svg: createMonkeySVG() }
];
function startGame() {
// 重置遊戲狀態
score = 0;
timeLeft = 60;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
selectedCard = null;
isProcessing = false;
matchedPairs = 0;
gameContainer.innerHTML = '';
removeAllLines();
// 顯示遊戲區域
gameContainer.classList.remove('opacity-0');
gameContainer.classList.add('opacity-100');
// 隱藏開始按鈕，顯示重新開始按鈕
startBtn.classList.add('hidden');
restartBtn.classList.remove('hidden');
// 創建卡片
createCards();
// 開始計時器
timer = setInterval(() =&gt; {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft &lt;= 0) {
endGame();
}
}, 1000);
}
function createCards() {
// 創建動物名稱卡片
const nameCards = animals.map(animal =&gt; ({
id: `name-${animal.name}`,
type: 'name',
content: animal.name,
match: animal.name
}));
// 創建動物圖片卡片
const imageCards = animals.map(animal =&gt; ({
id: `image-${animal.name}`,
type: 'image',
content: animal.svg,
match: animal.name
}));
// 合併並洗牌
const allCards = [...nameCards, ...imageCards];
shuffleArray(allCards);
// 創建卡片元素
allCards.forEach(card =&gt; {
const cardElement = document.createElement('div');
cardElement.className = 'card relative h-32 md:h-36';
cardElement.dataset.id = card.id;
cardElement.dataset.type = card.type;
cardElement.dataset.match = card.match;
cardElement.innerHTML = `
&lt;div class="card-inner w-full h-full"&gt;
&lt;div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300"&gt;
&lt;span class="text-2xl"&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500"&gt;
${card.type === 'name' ?
`&lt;span class="text-2xl font-bold text-teal-800"&gt;${card.content}&lt;/span&gt;` :
`&lt;div class="animal-svg"&gt;${card.content}&lt;/div&gt;`}
&lt;/div&gt;
&lt;/div&gt;
`;
cardElement.addEventListener('click', () =&gt; handleCardClick(cardElement));
gameContainer.appendChild(cardElement);
});
}
function handleCardClick(card) {
// 如果正在處理中或點擊已匹配的卡片，則不做任何事
if (isProcessing || card.classList.contains('matched') || card.classList.contains('flipped')) {
return;
}
// 翻轉卡片
card.classList.add('flipped');
// 如果沒有選中的卡片，則設置為選中
if (!selectedCard) {
selectedCard = card;
return;
}
// 檢查是否匹配
isProcessing = true;
const isMatch =
selectedCard.dataset.match === card.dataset.match &amp;&amp;
selectedCard.dataset.type !== card.dataset.type;
if (isMatch) {
// 匹配成功
setTimeout(() =&gt; {
selectedCard.classList.add('matched');
card.classList.add('matched');
// 繪製連線
drawLine(selectedCard, card);
// 更新分數
score += 10;
scoreElement.textContent = score;
// 慶祝動畫
selectedCard.classList.add('celebrate');
card.classList.add('celebrate');
setTimeout(() =&gt; {
selectedCard.classList.remove('celebrate');
card.classList.remove('celebrate');
}, 500);
selectedCard = null;
isProcessing = false;
// 檢查是否所有卡片都匹配了
matchedPairs++;
if (matchedPairs === totalPairs) {
endGame(true);
}
}, 500);
} else {
// 匹配失敗
setTimeout(() =&gt; {
selectedCard.classList.remove('flipped');
card.classList.remove('flipped');
selectedCard = null;
isProcessing = false;
}, 1000);
}
}
function drawLine(card1, card2) {
const rect1 = card1.getBoundingClientRect();
const rect2 = card2.getBoundingClientRect();
const x1 = rect1.left + rect1.width / 2;
const y1 = rect1.top + rect1.height / 2;
const x2 = rect2.left + rect2.width / 2;
const y2 = rect2.top + rect2.height / 2;
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
const line = document.createElement('div');
line.className = 'line';
line.style.width = `${length}px`;
line.style.height = '3px';
line.style.position = 'absolute';
line.style.top = `${y1 - 1.5 + window.scrollY}px`;
line.style.left = `${x1}px`;
line.style.transformOrigin = '0 0';
line.style.transform = `rotate(${angle}deg)`;
document.body.appendChild(line);
lines.push(line);
}
function removeAllLines() {
lines.forEach(line =&gt; line.remove());
lines = [];
}
function endGame(isWin = false) {
clearInterval(timer);
// 顯示結果
if (isWin) {
const bonusPoints = timeLeft * 2;
score += bonusPoints;
scoreElement.textContent = score;
resultTitle.textContent = '恭喜你贏了！';
resultMessage.innerHTML = `你的分數是：&lt;span class="font-bold text-teal-600"&gt;${score}&lt;/span&gt;&lt;br&gt;剩餘時間獎勵：&lt;span class="font-bold text-green-600"&gt;+${bonusPoints}&lt;/span&gt;`;
} else {
resultTitle.textContent = '時間到！';
resultMessage.textContent = `你的分數是：${score}`;
}
finalScoreElement.textContent = score;
gameOverScreen.classList.remove('hidden');
}
function shuffleArray(array) {
for (let i = array.length - 1; i &gt; 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// 開發人員模式
devBtn.addEventListener('click', () =&gt; {
codeModal.style.display = 'block';
const fullCode = document.documentElement.outerHTML;
codeDisplay.textContent = fullCode;
});
closeModal.addEventListener('click', () =&gt; {
codeModal.style.display = 'none';
});
copyCodeBtn.addEventListener('click', () =&gt; {
const fullCode = document.documentElement.outerHTML;
navigator.clipboard.writeText(fullCode).then(() =&gt; {
copyMessage.classList.remove('hidden');
setTimeout(() =&gt; {
copyMessage.classList.add('hidden');
}, 2000);
});
});
window.addEventListener('click', (e) =&gt; {
if (e.target === codeModal) {
codeModal.style.display = 'none';
}
});
// 事件監聽器
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
playAgainBtn.addEventListener('click', () =&gt; {
gameOverScreen.classList.add('hidden');
startGame();
});
// 動物 SVG 創建函數
function createCatSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="35" fill="#f4a261"/&gt;
&lt;circle cx="35" cy="40" r="5" fill="#333"/&gt;
&lt;circle cx="65" cy="40" r="5" fill="#333"/&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/&gt;
&lt;path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"/&gt;
&lt;path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"/&gt;
&lt;/svg&gt;`;
}
function createDogSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="35" fill="#e9c46a"/&gt;
&lt;circle cx="35" cy="40" r="5" fill="#333"/&gt;
&lt;circle cx="65" cy="40" r="5" fill="#333"/&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/&gt;
&lt;path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"/&gt;
&lt;path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"/&gt;
&lt;path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"/&gt;
&lt;/svg&gt;`;
}
function createRabbitSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="60" r="25" fill="#f8edeb"/&gt;
&lt;circle cx="40" cy="55" r="4" fill="#333"/&gt;
&lt;circle cx="60" cy="55" r="4" fill="#333"/&gt;
&lt;ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"/&gt;
&lt;path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"/&gt;
&lt;path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"/&gt;
&lt;path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;/svg&gt;`;
}
function createElephantSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#a8dadc"/&gt;
&lt;path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"/&gt;
&lt;circle cx="40" cy="45" r="4" fill="#333"/&gt;
&lt;circle cx="60" cy="45" r="4" fill="#333"/&gt;
&lt;path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"/&gt;
&lt;path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"/&gt;
&lt;path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;/svg&gt;`;
}
function createLionSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#e9c46a"/&gt;
&lt;circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"/&gt;
&lt;circle cx="40" cy="45" r="4" fill="#333"/&gt;
&lt;circle cx="60" cy="45" r="4" fill="#333"/&gt;
&lt;path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/&gt;
&lt;path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;/svg&gt;`;
}
function createGiraffeSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"/&gt;
&lt;circle cx="50" cy="30" r="15" fill="#e9c46a"/&gt;
&lt;path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"/&gt;
&lt;circle cx="45" cy="25" r="3" fill="#333"/&gt;
&lt;circle cx="55" cy="25" r="3" fill="#333"/&gt;
&lt;path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"/&gt;
&lt;path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"/&gt;
&lt;path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"/&gt;
&lt;/svg&gt;`;
}
function createPandaSVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#f8f9fa"/&gt;
&lt;circle cx="35" cy="35" r="10" fill="#212529"/&gt;
&lt;circle cx="65" cy="35" r="10" fill="#212529"/&gt;
&lt;circle cx="35" cy="35" r="5" fill="#f8f9fa"/&gt;
&lt;circle cx="65" cy="35" r="5" fill="#f8f9fa"/&gt;
&lt;circle cx="35" cy="35" r="2" fill="#212529"/&gt;
&lt;circle cx="65" cy="35" r="2" fill="#212529"/&gt;
&lt;ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"/&gt;
&lt;path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"/&gt;
&lt;/svg&gt;`;
}
function createMonkeySVG() {
return `&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80"&gt;
&lt;circle cx="50" cy="50" r="30" fill="#a47148"/&gt;
&lt;circle cx="50" cy="40" r="20" fill="#d4a276"/&gt;
&lt;circle cx="40" cy="35" r="4" fill="#333"/&gt;
&lt;circle cx="60" cy="35" r="4" fill="#333"/&gt;
&lt;path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"/&gt;
&lt;path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"/&gt;
&lt;path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"/&gt;
&lt;ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"/&gt;
&lt;/svg&gt;`;
}
});
&lt;/script&gt;
&lt;script&gt;(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'943b02d800faf1c0',t:'MTc0NzkwMzI1MS4wMDAwMDA='};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&amp;&amp;(document.onreadystatechange=e,c())}}}})();&lt;/script&gt;&lt;iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"&gt;&lt;/iframe&gt;
&lt;/body&gt;&lt;/html&gt;</pre>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gameContainer = document.getElementById('game-container');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
const restartBtn = document.getElementById('restart-btn');
const gameOverScreen = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const playAgainBtn = document.getElementById('play-again');
const resultTitle = document.getElementById('result-title');
const resultMessage = document.getElementById('result-message');
const devBtn = document.getElementById('dev-btn');
const codeModal = document.getElementById('code-modal');
const closeModal = document.getElementById('close-modal');
const copyCodeBtn = document.getElementById('copy-code');
const copyMessage = document.getElementById('copy-message');
const codeDisplay = document.getElementById('code-display');
let score = 0;
let timeLeft = 60;
let timer;
let selectedCard = null;
let isProcessing = false;
let matchedPairs = 0;
let totalPairs = 8;
let lines = [];
// 動物資料
const animals = [
{ name: "貓", svg: createCatSVG() },
{ name: "狗", svg: createDogSVG() },
{ name: "兔子", svg: createRabbitSVG() },
{ name: "大象", svg: createElephantSVG() },
{ name: "獅子", svg: createLionSVG() },
{ name: "長頸鹿", svg: createGiraffeSVG() },
{ name: "熊貓", svg: createPandaSVG() },
{ name: "猴子", svg: createMonkeySVG() }
];
function startGame() {
// 重置遊戲狀態
score = 0;
timeLeft = 60;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
selectedCard = null;
isProcessing = false;
matchedPairs = 0;
gameContainer.innerHTML = '';
removeAllLines();
// 顯示遊戲區域
gameContainer.classList.remove('opacity-0');
gameContainer.classList.add('opacity-100');
// 隱藏開始按鈕，顯示重新開始按鈕
startBtn.classList.add('hidden');
restartBtn.classList.remove('hidden');
// 創建卡片
createCards();
// 開始計時器
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function createCards() {
// 創建動物名稱卡片
const nameCards = animals.map(animal => ({
id: `name-${animal.name}`,
type: 'name',
content: animal.name,
match: animal.name
}));
// 創建動物圖片卡片
const imageCards = animals.map(animal => ({
id: `image-${animal.name}`,
type: 'image',
content: animal.svg,
match: animal.name
}));
// 合併並洗牌
const allCards = [...nameCards, ...imageCards];
shuffleArray(allCards);
// 創建卡片元素
allCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.className = 'card relative h-32 md:h-36';
cardElement.dataset.id = card.id;
cardElement.dataset.type = card.type;
cardElement.dataset.match = card.match;
cardElement.innerHTML = `
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
${card.type === 'name' ?
`<span class="text-2xl font-bold text-teal-800">${card.content}</span>` :
`<div class="animal-svg">${card.content}</div>`}
</div>
</div>
`;
cardElement.addEventListener('click', () => handleCardClick(cardElement));
gameContainer.appendChild(cardElement);
});
}
function handleCardClick(card) {
// 如果正在處理中或點擊已匹配的卡片，則不做任何事
if (isProcessing || card.classList.contains('matched') || card.classList.contains('flipped')) {
return;
}
// 翻轉卡片
card.classList.add('flipped');
// 如果沒有選中的卡片，則設置為選中
if (!selectedCard) {
selectedCard = card;
return;
}
// 檢查是否匹配
isProcessing = true;
const isMatch =
selectedCard.dataset.match === card.dataset.match &&
selectedCard.dataset.type !== card.dataset.type;
if (isMatch) {
// 匹配成功
setTimeout(() => {
selectedCard.classList.add('matched');
card.classList.add('matched');
// 繪製連線
drawLine(selectedCard, card);
// 更新分數
score += 10;
scoreElement.textContent = score;
// 慶祝動畫
selectedCard.classList.add('celebrate');
card.classList.add('celebrate');
setTimeout(() => {
selectedCard.classList.remove('celebrate');
card.classList.remove('celebrate');
}, 500);
selectedCard = null;
isProcessing = false;
// 檢查是否所有卡片都匹配了
matchedPairs++;
if (matchedPairs === totalPairs) {
endGame(true);
}
}, 500);
} else {
// 匹配失敗
setTimeout(() => {
selectedCard.classList.remove('flipped');
card.classList.remove('flipped');
selectedCard = null;
isProcessing = false;
}, 1000);
}
}
function drawLine(card1, card2) {
const rect1 = card1.getBoundingClientRect();
const rect2 = card2.getBoundingClientRect();
const x1 = rect1.left + rect1.width / 2;
const y1 = rect1.top + rect1.height / 2;
const x2 = rect2.left + rect2.width / 2;
const y2 = rect2.top + rect2.height / 2;
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
const line = document.createElement('div');
line.className = 'line';
line.style.width = `${length}px`;
line.style.height = '3px';
line.style.position = 'absolute';
line.style.top = `${y1 - 1.5 + window.scrollY}px`;
line.style.left = `${x1}px`;
line.style.transformOrigin = '0 0';
line.style.transform = `rotate(${angle}deg)`;
document.body.appendChild(line);
lines.push(line);
}
function removeAllLines() {
lines.forEach(line => line.remove());
lines = [];
}
function endGame(isWin = false) {
clearInterval(timer);
// 顯示結果
if (isWin) {
const bonusPoints = timeLeft * 2;
score += bonusPoints;
scoreElement.textContent = score;
resultTitle.textContent = '恭喜你贏了！';
resultMessage.innerHTML = `你的分數是：<span class="font-bold text-teal-600">${score}</span><br>剩餘時間獎勵：<span class="font-bold text-green-600">+${bonusPoints}</span>`;
} else {
resultTitle.textContent = '時間到！';
resultMessage.textContent = `你的分數是：${score}`;
}
finalScoreElement.textContent = score;
gameOverScreen.classList.remove('hidden');
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// 開發人員模式
devBtn.addEventListener('click', () => {
codeModal.style.display = 'block';
const fullCode = document.documentElement.outerHTML;
codeDisplay.textContent = fullCode;
});
closeModal.addEventListener('click', () => {
codeModal.style.display = 'none';
});
copyCodeBtn.addEventListener('click', () => {
const fullCode = document.documentElement.outerHTML;
navigator.clipboard.writeText(fullCode).then(() => {
copyMessage.classList.remove('hidden');
setTimeout(() => {
copyMessage.classList.add('hidden');
}, 2000);
});
});
window.addEventListener('click', (e) => {
if (e.target === codeModal) {
codeModal.style.display = 'none';
}
});
// 事件監聽器
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
playAgainBtn.addEventListener('click', () => {
gameOverScreen.classList.add('hidden');
startGame();
});
// 動物 SVG 創建函數
function createCatSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#f4a261"/>
<circle cx="35" cy="40" r="5" fill="#333"/>
<circle cx="65" cy="40" r="5" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"/>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"/>
</svg>`;
}
function createDogSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#e9c46a"/>
<circle cx="35" cy="40" r="5" fill="#333"/>
<circle cx="65" cy="40" r="5" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/>
<ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"/>
</svg>`;
}
function createRabbitSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="60" r="25" fill="#f8edeb"/>
<circle cx="40" cy="55" r="4" fill="#333"/>
<circle cx="60" cy="55" r="4" fill="#333"/>
<ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"/>
<path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"/>
<path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"/>
<path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createElephantSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a8dadc"/>
<path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"/>
<circle cx="40" cy="45" r="4" fill="#333"/>
<circle cx="60" cy="45" r="4" fill="#333"/>
<path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"/>
<path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"/>
<path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createLionSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#e9c46a"/>
<circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"/>
<circle cx="40" cy="45" r="4" fill="#333"/>
<circle cx="60" cy="45" r="4" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createGiraffeSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"/>
<circle cx="50" cy="30" r="15" fill="#e9c46a"/>
<path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"/>
<circle cx="45" cy="25" r="3" fill="#333"/>
<circle cx="55" cy="25" r="3" fill="#333"/>
<path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"/>
</svg>`;
}
function createPandaSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#f8f9fa"/>
<circle cx="35" cy="35" r="10" fill="#212529"/>
<circle cx="65" cy="35" r="10" fill="#212529"/>
<circle cx="35" cy="35" r="5" fill="#f8f9fa"/>
<circle cx="65" cy="35" r="5" fill="#f8f9fa"/>
<circle cx="35" cy="35" r="2" fill="#212529"/>
<circle cx="65" cy="35" r="2" fill="#212529"/>
<ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"/>
<path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"/>
</svg>`;
}
function createMonkeySVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a47148"/>
<circle cx="50" cy="40" r="20" fill="#d4a276"/>
<circle cx="40" cy="35" r="4" fill="#333"/>
<circle cx="60" cy="35" r="4" fill="#333"/>
<path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"/>
<path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"/>
<ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"/>
</svg>`;
}
});
</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:'943b02d800faf1c0',t:'MTc0NzkwMzI1MS4wMDAwMDA='};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></pre>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gameContainer = document.getElementById('game-container');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
const restartBtn = document.getElementById('restart-btn');
const gameOverScreen = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const playAgainBtn = document.getElementById('play-again');
const resultTitle = document.getElementById('result-title');
const resultMessage = document.getElementById('result-message');
const devBtn = document.getElementById('dev-btn');
const codeModal = document.getElementById('code-modal');
const closeModal = document.getElementById('close-modal');
const copyCodeBtn = document.getElementById('copy-code');
const copyMessage = document.getElementById('copy-message');
const codeDisplay = document.getElementById('code-display');
let score = 0;
let timeLeft = 60;
let timer;
let selectedCard = null;
let isProcessing = false;
let matchedPairs = 0;
let totalPairs = 8;
let lines = [];
// 動物資料
const animals = [
{ name: "貓", svg: createCatSVG() },
{ name: "狗", svg: createDogSVG() },
{ name: "兔子", svg: createRabbitSVG() },
{ name: "大象", svg: createElephantSVG() },
{ name: "獅子", svg: createLionSVG() },
{ name: "長頸鹿", svg: createGiraffeSVG() },
{ name: "熊貓", svg: createPandaSVG() },
{ name: "猴子", svg: createMonkeySVG() }
];
function startGame() {
// 重置遊戲狀態
score = 0;
timeLeft = 60;
scoreElement.textContent = score;
timerElement.textContent = timeLeft;
selectedCard = null;
isProcessing = false;
matchedPairs = 0;
gameContainer.innerHTML = '';
removeAllLines();
// 顯示遊戲區域
gameContainer.classList.remove('opacity-0');
gameContainer.classList.add('opacity-100');
// 隱藏開始按鈕，顯示重新開始按鈕
startBtn.classList.add('hidden');
restartBtn.classList.remove('hidden');
// 創建卡片
createCards();
// 開始計時器
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function createCards() {
// 創建動物名稱卡片
const nameCards = animals.map(animal => ({
id: `name-${animal.name}`,
type: 'name',
content: animal.name,
match: animal.name
}));
// 創建動物圖片卡片
const imageCards = animals.map(animal => ({
id: `image-${animal.name}`,
type: 'image',
content: animal.svg,
match: animal.name
}));
// 合併並洗牌
const allCards = [...nameCards, ...imageCards];
shuffleArray(allCards);
// 創建卡片元素
allCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.className = 'card relative h-32 md:h-36';
cardElement.dataset.id = card.id;
cardElement.dataset.type = card.type;
cardElement.dataset.match = card.match;
cardElement.innerHTML = `
<div class="card-inner w-full h-full">
<div class="card-front flex items-center justify-center w-full h-full bg-teal-100 rounded-lg shadow-md border-2 border-teal-300">
<span class="text-2xl">?</span>
</div>
<div class="card-back flex items-center justify-center w-full h-full bg-white rounded-lg shadow-md border-2 border-teal-500">
${card.type === 'name' ?
`<span class="text-2xl font-bold text-teal-800">${card.content}</span>` :
`<div class="animal-svg">${card.content}</div>`}
</div>
</div>
`;
cardElement.addEventListener('click', () => handleCardClick(cardElement));
gameContainer.appendChild(cardElement);
});
}
function handleCardClick(card) {
// 如果正在處理中或點擊已匹配的卡片，則不做任何事
if (isProcessing || card.classList.contains('matched') || card.classList.contains('flipped')) {
return;
}
// 翻轉卡片
card.classList.add('flipped');
// 如果沒有選中的卡片，則設置為選中
if (!selectedCard) {
selectedCard = card;
return;
}
// 檢查是否匹配
isProcessing = true;
const isMatch =
selectedCard.dataset.match === card.dataset.match &&
selectedCard.dataset.type !== card.dataset.type;
if (isMatch) {
// 匹配成功
setTimeout(() => {
selectedCard.classList.add('matched');
card.classList.add('matched');
// 繪製連線
drawLine(selectedCard, card);
// 更新分數
score += 10;
scoreElement.textContent = score;
// 慶祝動畫
selectedCard.classList.add('celebrate');
card.classList.add('celebrate');
setTimeout(() => {
selectedCard.classList.remove('celebrate');
card.classList.remove('celebrate');
}, 500);
selectedCard = null;
isProcessing = false;
// 檢查是否所有卡片都匹配了
matchedPairs++;
if (matchedPairs === totalPairs) {
endGame(true);
}
}, 500);
} else {
// 匹配失敗
setTimeout(() => {
selectedCard.classList.remove('flipped');
card.classList.remove('flipped');
selectedCard = null;
isProcessing = false;
}, 1000);
}
}
function drawLine(card1, card2) {
const rect1 = card1.getBoundingClientRect();
const rect2 = card2.getBoundingClientRect();
const x1 = rect1.left + rect1.width / 2;
const y1 = rect1.top + rect1.height / 2;
const x2 = rect2.left + rect2.width / 2;
const y2 = rect2.top + rect2.height / 2;
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
const line = document.createElement('div');
line.className = 'line';
line.style.width = `${length}px`;
line.style.height = '3px';
line.style.position = 'absolute';
line.style.top = `${y1 - 1.5 + window.scrollY}px`;
line.style.left = `${x1}px`;
line.style.transformOrigin = '0 0';
line.style.transform = `rotate(${angle}deg)`;
document.body.appendChild(line);
lines.push(line);
}
function removeAllLines() {
lines.forEach(line => line.remove());
lines = [];
}
function endGame(isWin = false) {
clearInterval(timer);
// 顯示結果
if (isWin) {
const bonusPoints = timeLeft * 2;
score += bonusPoints;
scoreElement.textContent = score;
resultTitle.textContent = '恭喜你贏了！';
resultMessage.innerHTML = `你的分數是：<span class="font-bold text-teal-600">${score}</span><br>剩餘時間獎勵：<span class="font-bold text-green-600">+${bonusPoints}</span>`;
} else {
resultTitle.textContent = '時間到！';
resultMessage.textContent = `你的分數是：${score}`;
}
finalScoreElement.textContent = score;
gameOverScreen.classList.remove('hidden');
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// 開發人員模式
devBtn.addEventListener('click', () => {
codeModal.style.display = 'block';
const fullCode = document.documentElement.outerHTML;
codeDisplay.textContent = fullCode;
});
closeModal.addEventListener('click', () => {
codeModal.style.display = 'none';
});
copyCodeBtn.addEventListener('click', () => {
const fullCode = document.documentElement.outerHTML;
navigator.clipboard.writeText(fullCode).then(() => {
copyMessage.classList.remove('hidden');
setTimeout(() => {
copyMessage.classList.add('hidden');
}, 2000);
});
});
window.addEventListener('click', (e) => {
if (e.target === codeModal) {
codeModal.style.display = 'none';
}
});
// 事件監聽器
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
playAgainBtn.addEventListener('click', () => {
gameOverScreen.classList.add('hidden');
startGame();
});
// 動物 SVG 創建函數
function createCatSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#f4a261"/>
<circle cx="35" cy="40" r="5" fill="#333"/>
<circle cx="65" cy="40" r="5" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 30 30 L 20 15 M 70 30 L 80 15" stroke="#f4a261" stroke-width="3" fill="none"/>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 35 20 Q 50 10 65 20" stroke="#f4a261" stroke-width="3" fill="none"/>
</svg>`;
}
function createDogSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="35" fill="#e9c46a"/>
<circle cx="35" cy="40" r="5" fill="#333"/>
<circle cx="65" cy="40" r="5" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 20 35 Q 10 20 25 25" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 80 35 Q 90 20 75 25" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 50 55 L 50 65" stroke="#333" stroke-width="1" fill="none"/>
<ellipse cx="50" cy="75" rx="15" ry="5" fill="#e9c46a"/>
</svg>`;
}
function createRabbitSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="60" r="25" fill="#f8edeb"/>
<circle cx="40" cy="55" r="4" fill="#333"/>
<circle cx="60" cy="55" r="4" fill="#333"/>
<ellipse cx="50" cy="65" rx="5" ry="3" fill="#ffb4a2"/>
<path d="M 35 30 Q 30 5 45 20" stroke="#f8edeb" stroke-width="8" fill="none"/>
<path d="M 65 30 Q 70 5 55 20" stroke="#f8edeb" stroke-width="8" fill="none"/>
<path d="M 45 70 L 55 70" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createElephantSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a8dadc"/>
<path d="M 30 50 Q 15 40 20 25" stroke="#a8dadc" stroke-width="10" fill="none"/>
<circle cx="40" cy="45" r="4" fill="#333"/>
<circle cx="60" cy="45" r="4" fill="#333"/>
<path d="M 50 55 Q 50 65 60 60" stroke="#a8dadc" stroke-width="8" fill="none"/>
<path d="M 35 70 L 35 85 M 65 70 L 65 85" stroke="#a8dadc" stroke-width="8" fill="none"/>
<path d="M 40 60 L 60 60" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createLionSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#e9c46a"/>
<circle cx="50" cy="50" r="40" stroke="#e9c46a" stroke-width="5" fill="none" stroke-dasharray="5,10"/>
<circle cx="40" cy="45" r="4" fill="#333"/>
<circle cx="60" cy="45" r="4" fill="#333"/>
<path d="M 40 60 Q 50 70 60 60" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 50 55 L 50 60" stroke="#333" stroke-width="1" fill="none"/>
</svg>`;
}
function createGiraffeSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<path d="M 50 80 L 50 40" stroke="#e9c46a" stroke-width="10" fill="none"/>
<circle cx="50" cy="30" r="15" fill="#e9c46a"/>
<path d="M 45 20 L 40 10 M 55 20 L 60 10" stroke="#e9c46a" stroke-width="5" fill="none"/>
<circle cx="45" cy="25" r="3" fill="#333"/>
<circle cx="55" cy="25" r="3" fill="#333"/>
<path d="M 45 35 Q 50 40 55 35" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 40 80 L 40 90 M 60 80 L 60 90" stroke="#e9c46a" stroke-width="5" fill="none"/>
<path d="M 45 30 L 55 30" stroke="#333" stroke-width="1" fill="none"/>
<path d="M 40 50 Q 30 60 40 70 M 60 50 Q 70 60 60 70" fill="#e9c46a" stroke="#e9c46a" stroke-width="1"/>
</svg>`;
}
function createPandaSVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#f8f9fa"/>
<circle cx="35" cy="35" r="10" fill="#212529"/>
<circle cx="65" cy="35" r="10" fill="#212529"/>
<circle cx="35" cy="35" r="5" fill="#f8f9fa"/>
<circle cx="65" cy="35" r="5" fill="#f8f9fa"/>
<circle cx="35" cy="35" r="2" fill="#212529"/>
<circle cx="65" cy="35" r="2" fill="#212529"/>
<ellipse cx="50" cy="60" rx="10" ry="8" fill="#212529"/>
<path d="M 40 50 Q 50 60 60 50" stroke="#212529" stroke-width="2" fill="none"/>
</svg>`;
}
function createMonkeySVG() {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
<circle cx="50" cy="50" r="30" fill="#a47148"/>
<circle cx="50" cy="40" r="20" fill="#d4a276"/>
<circle cx="40" cy="35" r="4" fill="#333"/>
<circle cx="60" cy="35" r="4" fill="#333"/>
<path d="M 40 50 Q 50 60 60 50" stroke="#333" stroke-width="2" fill="none"/>
<path d="M 30 20 Q 20 10 15 20" stroke="#a47148" stroke-width="5" fill="none"/>
<path d="M 70 20 Q 80 10 85 20" stroke="#a47148" stroke-width="5" fill="none"/>
<ellipse cx="50" cy="45" rx="10" ry="5" fill="#d4a276"/>
</svg>`;
}
});
</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:'943b02d800faf1c0',t:'MTc0NzkwMzI1MS4wMDAwMDA='};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>