<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国地名与地图猜谜游戏</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #f0f9ff;
}
.map-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.map-highlight {
fill: #3b82f6;
fill-opacity: 0.7;
stroke: #1d4ed8;
stroke-width: 1;
transition: all 0.3s ease;
}
.map-highlight:hover {
fill: #60a5fa;
cursor: pointer;
}
.map-highlight.correct {
fill: #10b981;
fill-opacity: 0.7;
}
.map-highlight.wrong {
fill: #ef4444;
fill-opacity: 0.7;
}
.btn {
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.modal {
transition: opacity 0.3s ease;
}
.code-block {
max-height: 70vh;
overflow-y: auto;
}
</style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.inset-0{inset:0px}.z-50{z-index:50}.mx-4{margin-left:1rem;margin-right:1rem}.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}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.min-h-screen{min-height:100vh}.w-4{width:1rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.flex-grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:0.5rem}.rounded-sm{border-radius:0.125rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208 / var(--tw-border-opacity, 1))}.border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.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-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.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)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255 / 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\:w-1\/2{width:50%}.md\:flex-row{flex-direction:row}}</style></head>
<body>
<div class="min-h-screen flex flex-col">
<header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-4 px-6 shadow-md">
<div class="container mx-auto">
<h1 class="text-3xl font-bold text-center">中国地名与地图猜谜游戏</h1>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
<div class="flex flex-col md:flex-row gap-6">
<div class="w-full md:w-1/2">
<div id="game-container" class="mb-6">
<div id="question-container" class="mb-6">
<h2 class="text-xl font-bold mb-2">谜题 <span id="current-question">1</span>/3</h2>
<div id="question" class="text-lg p-4 bg-blue-50 rounded-lg border border-blue-200">我是中国最北端的省份，拥有中国最大的森林资源和最长的边境线，被称为'北大仓'。我是哪个省？</div>
</div>
<div id="options-container" class="grid grid-cols-1 gap-3 mb-6"><button class="btn bg-white border border-blue-300 text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50">黑龙江</button><button class="btn bg-white border border-blue-300 text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50">吉林</button><button class="btn bg-white border border-blue-300 text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50">辽宁</button><button class="btn bg-white border border-blue-300 text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50">内蒙古</button></div>
<div id="result" class="p-4 rounded-lg mb-4 bg-green-100 text-green-800 border border-green-200 hidden">✅ 恭喜！回答正确！</div>
<div class="flex justify-between">
<button id="next-btn" class="btn bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hidden">
下一题
</button>
<button id="restart-btn" class="btn bg-green-600 text-white px-6 py-2 rounded-lg font-medium hidden">
重新开始
</button>
</div>
<div class="mt-4">
<div class="flex items-center gap-2 mb-2">
<div class="w-4 h-4 bg-blue-500 rounded-sm"></div>
<span class="text-sm">未选择</span>
</div>
<div class="flex items-center gap-2 mb-2">
<div class="w-4 h-4 bg-green-500 rounded-sm"></div>
<span class="text-sm">正确答案</span>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 bg-red-500 rounded-sm"></div>
<span class="text-sm">错误答案</span>
</div>
</div>
</div>
<div id="score-container" class="mt-4">
<p class="font-medium">得分: <span id="score">0</span>/3</p>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="map-container">
<svg id="china-map" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<!-- 简化的中国地图 -->
<path d="M650,200 L750,180 L800,250 L780,350 L700,400 L650,350 L600,380 L550,350 L580,300 L620,250 Z" class="map-highlight" data-region="黑龙江"></path>
<path d="M600,380 L650,350 L700,400 L680,450 L620,470 L580,430 Z" class="map-highlight" data-region="吉林"></path>
<path d="M580,430 L620,470 L680,450 L650,500 L600,520 L550,500 L540,450 Z" class="map-highlight" data-region="辽宁"></path>
<path d="M500,350 L550,350 L580,300 L620,250 L600,200 L550,180 L500,200 L480,250 L450,300 Z" class="map-highlight" data-region="内蒙古"></path>
<path d="M500,350 L450,300 L400,320 L380,380 L420,420 L470,400 L500,380 Z" class="map-highlight" data-region="山西"></path>
<path d="M500,380 L470,400 L420,420 L450,450 L500,470 L540,450 L550,500 L520,520 L500,550 L450,520 L420,550 L400,520 L380,550 L350,520 L380,480 L350,450 L380,420 Z" class="map-highlight" data-region="河北"></path>
<path d="M500,550 L520,520 L550,500 L600,520 L580,570 L550,600 L500,580 Z" class="map-highlight" data-region="山东"></path>
<path d="M450,520 L500,550 L500,580 L550,600 L520,650 L480,680 L450,650 L420,680 L380,650 L400,600 L380,550 L400,520 Z" class="map-highlight" data-region="江苏"></path>
<path d="M480,680 L520,650 L550,600 L580,570 L620,600 L600,650 L620,700 L580,720 L550,680 L520,700 Z" class="map-highlight" data-region="浙江"></path>
<path d="M450,650 L480,680 L520,700 L500,750 L450,780 L400,750 L380,700 L420,680 Z" class="map-highlight" data-region="福建"></path>
<path d="M380,650 L420,680 L380,700 L350,750 L300,780 L250,750 L280,700 L320,650 L350,620 L380,600 Z" class="map-highlight" data-region="广东"></path>
<path d="M250,750 L300,780 L350,750 L320,800 L250,820 L200,800 Z" class="map-highlight" data-region="广西"></path>
<path d="M350,520 L380,480 L350,450 L300,420 L250,450 L200,420 L180,450 L150,420 L180,380 L150,350 L180,300 L220,280 L250,300 L280,350 L320,380 L350,420 Z" class="map-highlight" data-region="四川"></path>
<path d="M180,450 L200,420 L250,450 L300,420 L320,450 L300,500 L320,550 L300,600 L250,620 L200,600 L180,550 L150,520 Z" class="map-highlight" data-region="云南"></path>
<path d="M320,450 L350,420 L380,420 L350,450 L380,480 L350,520 L320,550 L300,500 Z" class="map-highlight" data-region="重庆"></path>
<path d="M350,620 L320,650 L280,700 L250,750 L200,800 L150,750 L180,700 L150,650 L180,600 L200,600 L250,620 L300,600 L320,550 L350,520 L380,550 L380,600 Z" class="map-highlight" data-region="贵州"></path>
<path d="M350,450 L380,420 L420,420 L380,380 L400,320 L380,280 L350,300 L320,280 L300,300 L280,350 L320,380 L350,420 Z" class="map-highlight" data-region="陕西"></path>
<path d="M380,280 L400,320 L450,300 L480,250 L450,200 L400,180 L350,200 L320,250 L350,300 Z" class="map-highlight" data-region="宁夏"></path>
<path d="M320,250 L350,200 L400,180 L380,150 L350,100 L300,120 L250,100 L220,150 L250,200 L280,250 L320,280 Z" class="map-highlight" data-region="甘肃"></path>
<path d="M250,200 L220,150 L180,180 L150,150 L100,180 L150,220 L180,250 L220,280 L280,250 Z" class="map-highlight" data-region="青海"></path>
<path d="M180,250 L150,220 L100,180 L50,200 L80,250 L50,300 L80,350 L120,380 L150,350 L180,300 L220,280 Z" class="map-highlight" data-region="西藏"></path>
<path d="M350,100 L380,150 L400,180 L450,200 L480,250 L500,200 L550,180 L500,150 L450,100 L400,80 Z" class="map-highlight" data-region="新疆"></path>
<path d="M450,650 L420,680 L450,780 L500,750 L520,700 L550,680 L580,720 L550,750 L580,780 L620,750 L650,780 L680,750 L650,700 L620,700 L600,650 L620,600 L650,620 L680,600 L650,550 L600,520 L550,500 L500,520 L450,520 L420,550 L400,520 L420,500 L450,520 Z" class="map-highlight" data-region="安徽"></path>
<path d="M400,520 L420,500 L450,520 L500,520 L550,500 L540,450 L500,470 L450,450 L420,420 L380,420 L350,450 L320,450 L300,500 L320,550 L350,520 L380,550 L400,520 Z" class="map-highlight" data-region="河南"></path>
<path d="M580,720 L620,700 L650,700 L680,750 L650,780 L620,800 L580,780 L550,750 Z" class="map-highlight" data-region="台湾"></path>
<path d="M320,650 L350,620 L380,600 L400,600 L380,650 L350,680 L320,650 Z" class="map-highlight" data-region="香港"></path>
<path d="M350,680 L380,650 L400,600 L420,620 L400,650 L380,680 L350,680 Z" class="map-highlight" data-region="澳门"></path>
<path d="M180,600 L150,650 L180,700 L150,750 L120,720 L100,750 L80,720 L100,680 L80,650 L100,600 L150,580 L180,600 Z" class="map-highlight" data-region="海南"></path>
</svg>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-100 py-4 px-6">
<div class="container mx-auto flex justify-between items-center">
<p class="text-gray-600">© 2023 中国地名与地图猜谜游戏</p>
<button id="dev-btn" class="btn bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium">
开发人员
</button>
</div>
</footer>
</div>
<!-- 开发人员模态框 -->
<div id="dev-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
<div class="bg-white rounded-xl shadow-xl max-w-4xl w-full mx-4 p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">源代码</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="code-block bg-gray-100 p-4 rounded-lg">
<pre id="source-code" class="text-sm overflow-x-auto"></pre>
</div>
<div class="mt-4 flex justify-end">
<button id="copy-code" class="btn bg-blue-600 text-white px-6 py-2 rounded-lg font-medium">
复制代码
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 游戏数据
const gameData = [
{
question: "我是中国最北端的省份，拥有中国最大的森林资源和最长的边境线，被称为'北大仓'。我是哪个省？",
answer: "黑龙江",
options: ["黑龙江", "吉林", "辽宁", "内蒙古"]
},
{
question: "我是中国最大的淡水湖，被称为'鄱阳湖'，位于哪个省份？",
answer: "江西",
options: ["湖南", "湖北", "安徽", "江西"]
},
{
question: "我是中国最南端的省份，拥有热带气候和美丽的海滩，被称为'椰岛'。我是哪个省？",
answer: "海南",
options: ["广东", "广西", "海南", "福建"]
}
];
// 游戏状态
let currentQuestionIndex = 0;
let score = 0;
let answered = false;
// DOM 元素
const questionElement = document.getElementById('question');
const optionsContainer = document.getElementById('options-container');
const resultElement = document.getElementById('result');
const nextButton = document.getElementById('next-btn');
const restartButton = document.getElementById('restart-btn');
const scoreElement = document.getElementById('score');
const currentQuestionElement = document.getElementById('current-question');
const mapRegions = document.querySelectorAll('.map-highlight');
// 开发人员模态框
const devButton = document.getElementById('dev-btn');
const devModal = document.getElementById('dev-modal');
const closeModal = document.getElementById('close-modal');
const sourceCode = document.getElementById('source-code');
const copyCodeButton = document.getElementById('copy-code');
// 加载问题
function loadQuestion() {
const currentQuestion = gameData[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
optionsContainer.innerHTML = '';
currentQuestionElement.textContent = currentQuestionIndex + 1;
// 重置地图高亮
mapRegions.forEach(region => {
region.classList.remove('correct', 'wrong');
});
// 创建选项按钮
currentQuestion.options.forEach(option => {
const button = document.createElement('button');
button.textContent = option;
button.className = 'btn bg-white border border-blue-300 text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50';
button.addEventListener('click', () => selectAnswer(option));
optionsContainer.appendChild(button);
});
// 重置状态
resultElement.classList.add('hidden');
nextButton.classList.add('hidden');
restartButton.classList.add('hidden');
answered = false;
}
// 选择答案
function selectAnswer(selectedOption) {
if (answered) return;
const currentQuestion = gameData[currentQuestionIndex];
const correct = selectedOption === currentQuestion.answer;
answered = true;
// 显示结果
resultElement.classList.remove('hidden');
if (correct) {
resultElement.textContent = "✅ 恭喜！回答正确！";
resultElement.className = "p-4 rounded-lg mb-4 bg-green-100 text-green-800 border border-green-200";
score++;
scoreElement.textContent = score;
// 高亮正确的地图区域
mapRegions.forEach(region => {
if (region.dataset.region === currentQuestion.answer) {
region.classList.add('correct');
}
});
} else {
resultElement.textContent = `❌ 回答错误！正确答案是：${currentQuestion.answer}`;
resultElement.className = "p-4 rounded-lg mb-4 bg-red-100 text-red-800 border border-red-200";
// 高亮错误的地图区域
mapRegions.forEach(region => {
if (region.dataset.region === selectedOption) {
region.classList.add('wrong');
} else if (region.dataset.region === currentQuestion.answer) {
region.classList.add('correct');
}
});
}
// 禁用所有选项按钮
const optionButtons = optionsContainer.querySelectorAll('button');
optionButtons.forEach(button => {
button.disabled = true;
if (button.textContent === currentQuestion.answer) {
button.className = 'btn bg-green-100 border border-green-300 text-green-700 px-6 py-3 rounded-lg font-medium';
} else if (button.textContent === selectedOption && !correct) {
button.className = 'btn bg-red-100 border border-red-300 text-red-700 px-6 py-3 rounded-lg font-medium';
} else {
button.className = 'btn bg-gray-100 border border-gray-300 text-gray-500 px-6 py-3 rounded-lg font-medium';
}
});
// 显示下一题或重新开始按钮
if (currentQuestionIndex < gameData.length - 1) {
nextButton.classList.remove('hidden');
} else {
restartButton.classList.remove('hidden');
}
}
// 下一题
nextButton.addEventListener('click', () => {
currentQuestionIndex++;
loadQuestion();
});
// 重新开始
restartButton.addEventListener('click', () => {
currentQuestionIndex = 0;
score = 0;
scoreElement.textContent = score;
loadQuestion();
});
// 地图区域点击事件
mapRegions.forEach(region => {
region.addEventListener('click', () => {
if (answered) return;
const selectedRegion = region.dataset.region;
const optionButtons = optionsContainer.querySelectorAll('button');
// 查找对应的选项按钮并触发点击
optionButtons.forEach(button => {
if (button.textContent === selectedRegion) {
button.click();
}
});
});
});
// 开发人员模态框
devButton.addEventListener('click', () => {
// 获取当前页面的源代码
sourceCode.textContent = document.documentElement.outerHTML;
devModal.classList.remove('hidden');
});
closeModal.addEventListener('click', () => {
devModal.classList.add('hidden');
});
copyCodeButton.addEventListener('click', () => {
const code = sourceCode.textContent;
navigator.clipboard.writeText(code).then(() => {
copyCodeButton.textContent = '已复制！';
setTimeout(() => {
copyCodeButton.textContent = '复制代码';
}, 2000);
}).catch(err => {
console.error('复制失败:', err);
copyCodeButton.textContent = '复制失败';
setTimeout(() => {
copyCodeButton.textContent = '复制代码';
}, 2000);
});
});
// 点击模态框外部关闭
devModal.addEventListener('click', (e) => {
if (e.target === devModal) {
devModal.classList.add('hidden');
}
});
// 初始化游戏
loadQuestion();
});
</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:'943b0caf250df20d',t:'MTc0NzkwMzY1NC4wMDAwMDA='};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>