\u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;700&display=swap');\n body { font-family: 'Noto+Sans+TC', sans-serif; background-color: #f7fee7; color: #064e3b; overflow-x: hidden; }\n .hidden { display: none; }\n .active-nav { background-color: #166534 !important; color: white !important; }\n \n \/* \u62fc\u5716\u6838\u5fc3 *\/\n .puzzle-container {\n width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 2px; border: 4px solid #166534; background-color: #166534; border-radius: 8px; margin: 0 auto;\n }\n .puzzle-piece {\n width: 98px; height: 98px; background-repeat: no-repeat; background-size: 300px 300px;\n cursor: pointer; transition: all 0.2s ease;\n }\n .puzzle-selected { box-shadow: inset 0 0 0 4px #facc15; transform: scale(0.92); z-index: 10; }\n \n \/* \u914d\u5c0d\u6838\u5fc3 *\/\n .match-grid { \n display: grid; \n grid-template-columns: repeat(4, 1fr); \n gap: 10px; \n width: 100%;\n max-width: 340px; \n margin: 0 auto; \n }\n .match-card { \n width: 100%;\n aspect-ratio: 1 \/ 1;\n background-color: #16a34a; border-radius: 12px; \n display: flex; align-items: center; justify-content: center; \n font-size: 1.8rem;\n cursor: pointer; transition: transform 0.4s, background-color 0.2s;\n transform-style: preserve-3d; position: relative;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n }\n .match-card .front, .match-card .back {\n position: absolute; width: 100%; height: 100%;\n backface-visibility: hidden; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n }\n .match-card .front { background-color: #16a34a; }\n .match-card .back { background-color: white; border: 2px solid #16a34a; transform: rotateY(180deg); }\n \n .match-card.flipped { transform: rotateY(180deg); }\n .match-card.matched { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s; }\n\n \/* \u52d5\u756b *\/\n @keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } }\n .tree-anim { animation: grow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n <header class=\"bg-green-800 text-white py-6 shadow-xl text-center\">\n <h1 class=\"text-2xl md:text-3xl font-bold mb-1 px-4\">\u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232<\/h1>\n <p class=\"text-green-200 px-4 text-sm opacity-80\">\u900f\u904e\u904a\u6232\u9ad4\u9a57\u4f4e\u78b3\u751f\u6d3b\uff0c\u5be6\u8e10\u6c38\u7e8c\u50f9\u503c<\/p>\n <\/header>\n\n <nav class=\"bg-green-100 p-2 flex flex-wrap justify-center gap-2 sticky top-0 z-40 shadow-sm\">\n <button onclick=\"showGame('menu')\" id=\"nav-menu\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold active-nav\">\u4e3b\u9078\u55ae<\/button>\n <button onclick=\"showGame('tree')\" id=\"nav-tree\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">1.\u68ee\u6797\u5fa9\u80b2<\/button>\n <button onclick=\"showGame('milk')\" id=\"nav-milk\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">2.\u690d\u7269\u5976<\/button>\n <button onclick=\"showGame('carbon')\" id=\"nav-carbon\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">3.\u78b3\u6311\u6230<\/button>\n <button onclick=\"showGame('match')\" id=\"nav-match\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">4.\u6c38\u7e8c\u914d\u5c0d<\/button>\n <button onclick=\"showGame('puzzle')\" id=\"nav-puzzle\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">5.\u62fc\u5716<\/button>\n <\/nav>\n\n <main class=\"container mx-auto px-4 py-8 max-w-2xl\">\n <div id=\"game-stage\" class=\"bg-white rounded-3xl shadow-2xl p-6 min-h-[520px] flex flex-col items-center justify-center border border-green-100\">\n \n \n <div id=\"view-menu\" class=\"w-full text-center space-y-6\">\n <h2 class=\"text-2xl font-bold text-green-800 italic\">“\u6bcf\u4e00\u5206\u52aa\u529b\uff0c\u5730\u7403\u90fd\u8a18\u5f97”<\/h2>\n <div class=\"grid grid-cols-2 gap-4 text-center\">\n <div onclick=\"showGame('tree')\" class=\"p-6 bg-green-50 rounded-2xl border-2 border-green-100 cursor-pointer hover:bg-green-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf33<\/span> \n <strong class=\"block text-green-800 mt-2 text-lg\">\u68ee\u6797\u5fa9\u80b2<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u8a08\u7b97\u5e74\u6e1b\u78b3\u91cf<\/p>\n <\/div>\n <div onclick=\"showGame('milk')\" class=\"p-6 bg-orange-50 rounded-2xl border-2 border-orange-100 cursor-pointer hover:bg-orange-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83e\udd5b<\/span> \n <strong class=\"block text-orange-800 mt-2 text-lg\">\u690d\u7269\u5976\u5206\u985e<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u4f4e\u78b3\u539f\u6599\u6b78\u4f4d<\/p>\n <\/div>\n <div onclick=\"showGame('carbon')\" class=\"p-6 bg-blue-50 rounded-2xl border-2 border-blue-100 cursor-pointer hover:bg-blue-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf0d<\/span> \n <strong class=\"block text-blue-800 mt-2 text-lg\">\u78b3\u8db3\u8de1\u6311\u6230<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u7da0\u8272\u751f\u6d3b\u6c7a\u7b56<\/p>\n <\/div>\n <div onclick=\"showGame('match')\" class=\"p-6 bg-purple-50 rounded-2xl border-2 border-purple-100 cursor-pointer hover:bg-purple-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83e\udde9<\/span> \n <strong class=\"block text-purple-800 mt-2 text-lg\">\u6c38\u7e8c\u914d\u5c0d<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u8a18\u61b6\u74b0\u4fdd\u5716\u9a30<\/p>\n <\/div>\n <div onclick=\"showGame('puzzle')\" class=\"p-6 bg-yellow-50 rounded-2xl border-2 border-yellow-100 cursor-pointer hover:bg-yellow-100 col-span-2 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf3b<\/span> \n <strong class=\"block text-yellow-800 mt-2 text-lg\">\u5411\u65e5\u8475\u62fc\u5716<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u4fee\u5fa9\u8c61\u5fb5\u5e0c\u671b\u7684\u5f71\u50cf<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tree\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold\">\ud83c\udf33 \u68ee\u6797\u5fa9\u80b2\uff1a\u5e74\u6e1b\u78b3\u8a08\u7b97<\/h2>\n <div class=\"flex justify-between bg-green-900 text-white p-4 rounded-2xl shadow-lg\">\n <div class=\"flex-1\"><p class=\"text-xs opacity-70\">\u6a39\u6728<\/p><p id=\"tree-cnt\" class=\"text-xl font-bold\">0<\/p><\/div>\n <div class=\"flex-1 border-x border-green-700\"><p class=\"text-xs opacity-70\">\u5e74\u6e1b\u78b3(kg)<\/p><p id=\"tree-co2\" class=\"text-xl font-bold text-yellow-400\">0<\/p><\/div>\n <div class=\"flex-1\"><p class=\"text-xs opacity-70\">\u6642\u9593<\/p><p id=\"tree-time\" class=\"text-xl font-bold text-orange-400\">15<\/p><\/div>\n <\/div>\n <div id=\"tree-box\" class=\"relative w-full h-80 bg-emerald-100 rounded-3xl border-4 border-emerald-300 cursor-pointer overflow-hidden shadow-inner\"><\/div>\n <button id=\"tree-start\" onclick=\"treeGameInit()\" class=\"bg-green-700 text-white px-10 py-3 rounded-full font-bold shadow-lg hover:bg-green-800 active:scale-95 transition-all\">\u958b\u59cb\u9020\u6797<\/button>\n <\/div>\n\n \n <div id=\"view-milk\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-orange-800\">\ud83e\udd5b \u690d\u7269\u5976\u539f\u6599\u5927\u8003\u9a57<\/h2>\n <div id=\"milk-items\" class=\"flex flex-wrap justify-center gap-2 min-h-[100px] p-4 bg-gray-50 rounded-2xl border border-gray-100\"><\/div>\n <div class=\"grid grid-cols-3 gap-2\">\n <div ondrop=\"milkDrop(event, '\u71d5\u9ea5')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-orange-100 border-2 border-dashed border-orange-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u71d5\u9ea5\u5976<\/div>\n <div ondrop=\"milkDrop(event, '\u9ec3\u8c46')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-yellow-100 border-2 border-dashed border-yellow-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u9ec3\u8c46\u5976<\/div>\n <div ondrop=\"milkDrop(event, '\u5805\u679c')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-red-100 border-2 border-dashed border-red-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u5805\u679c\u5976<\/div>\n <\/div>\n <p id=\"milk-info\" class=\"text-sm font-bold text-red-600 h-5\"><\/p>\n <\/div>\n\n \n <div id=\"view-carbon\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-blue-800\">\ud83c\udf0d \u78b3\u8db3\u8de1\u751f\u6d3b\u6311\u6230<\/h2>\n <div class=\"bg-blue-50 p-6 rounded-3xl text-left border border-blue-100 shadow-sm min-h-[220px]\">\n <div class=\"flex justify-between items-center mb-4\">\n <p id=\"carb-progress\" class=\"text-xs text-blue-400 font-bold uppercase tracking-wider\"><\/p>\n <p class=\"text-xs font-bold text-blue-600\">\u5f97\u5206\uff1a<span id=\"carb-score\">0<\/span><\/p>\n <\/div>\n <p id=\"carb-question\" class=\"text-lg font-bold mb-6 text-blue-900 leading-tight\"><\/p>\n <div id=\"carb-options\" class=\"flex flex-col gap-3\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-match\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-purple-800\">\ud83e\udde9 \u6c38\u7e8c\u5716\u6848\u914d\u5c0d<\/h2>\n <div id=\"match-box\" class=\"match-grid\"><\/div>\n <button onclick=\"matchInit()\" class=\"text-xs text-purple-700 font-bold underline mt-4\">\u91cd\u65b0\u6d17\u724c<\/button>\n <\/div>\n\n \n <div id=\"view-puzzle\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-yellow-700\">\ud83c\udf3b \u5411\u65e5\u8475\u62fc\u5716\u4fee\u5fa9<\/h2>\n <div class=\"flex justify-center gap-4 mb-2\">\n <img id=\"p-ref\" class=\"w-20 h-20 border-2 border-green-800 rounded shadow-md\">\n <p class=\"text-xs text-left max-w-[150px] self-center text-gray-600 italic\">\u9ede\u64ca\u4efb\u5169\u5f35\u5716\u584a\u4ea4\u63db\uff0c\u9084\u539f\u5411\u65e5\u8475\u539f\u5716\u3002<\/p>\n <\/div>\n <div id=\"puzzle-board\" class=\"puzzle-container\"><\/div>\n <div class=\"flex gap-4 justify-center pt-2\">\n <button onclick=\"puzzleShuffle()\" class=\"bg-green-700 text-white px-6 py-2 rounded-full text-sm font-bold shadow hover:bg-green-800 active:scale-95 transition-all\">\u96a8\u6a5f\u6d17\u724c<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n \n <div id=\"modal\" class=\"hidden fixed inset-0 bg-black\/80 flex items-center justify-center z-50 p-4 backdrop-blur-sm\">\n <div class=\"bg-white rounded-3xl p-8 max-w-sm w-full text-center shadow-2xl border-4 border-green-100\">\n <div id=\"modal-icon\" class=\"text-6xl mb-4\"><\/div>\n <h3 id=\"modal-title\" class=\"text-xl font-bold text-green-900\"><\/h3>\n <p id=\"modal-msg\" class=\"text-gray-500 mt-2 mb-6 text-sm leading-relaxed whitespace-pre-wrap\"><\/p>\n <button onclick=\"closeModal()\" class=\"w-full py-3 bg-green-700 text-white rounded-xl font-bold shadow-lg hover:bg-green-800 active:scale-95 transition-all\">\u78ba\u8a8d<\/button>\n <\/div>\n <\/div>\n\n <script>\n const SUNFLOWER_URL = \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/a9\/A_sunflower.jpg\/300px-A_sunflower.jpg\";\n\n function showGame(id) {\n ['menu', 'tree', 'milk', 'carbon', 'match', 'puzzle'].forEach(v => {\n const el = document.getElementById(`view-${v}`);\n const nav = document.getElementById(`nav-${v}`);\n if(el) el.classList.add('hidden');\n if(nav) nav.classList.remove('active-nav');\n });\n const target = document.getElementById(`view-${id}`);\n const targetNav = document.getElementById(`nav-${id}`);\n if(target) target.classList.remove('hidden');\n if(targetNav) targetNav.classList.add('active-nav');\n \n if(id === 'tree') treeGameReset();\n if(id === 'milk') milkInit();\n if(id === 'carbon') carbInit();\n if(id === 'match') matchInit();\n if(id === 'puzzle') puzzleInit();\n }\n\n \/\/ --- 1. \u68ee\u6797\u5fa9\u80b2 (\u66f4\u65b0\u70ba\u81ea\u7136\u68ee\u6797\u7d44\u5408) ---\n let tCount=0, tTime=15, tActive=false, tTimer;\n function treeGameReset() {\n tCount=0; tTime=15; tActive=false; clearInterval(tTimer);\n document.getElementById('tree-cnt').innerText=\"0\";\n document.getElementById('tree-co2').innerText=\"0\";\n document.getElementById('tree-time').innerText=\"15\";\n document.getElementById('tree-box').innerHTML = '<div class=\"absolute inset-0 flex items-center justify-center text-emerald-400\/50 font-bold pointer-events-none text-center px-4 leading-relaxed\">\u9ede\u64ca\u8349\u5730\u958b\u59cb\u9020\u6797<br><span class=\"text-xs\">\u7a2e\u4e0b\u5438\u78b3\u6548\u7387\u9ad8\u7684\u81ea\u7136\u68ee\u6797\u6a39\u7a2e<\/span><\/div>';\n document.getElementById('tree-start').style.display = 'inline-block';\n }\n function treeGameInit() {\n treeGameReset(); tActive=true; \n document.getElementById('tree-start').style.display='none';\n document.getElementById('tree-box').innerHTML = '';\n tTimer = setInterval(() => {\n tTime--; document.getElementById('tree-time').innerText=tTime;\n if(tTime<=0) { \n tActive=false; clearInterval(tTimer); \n popup(\"\ud83c\udf32 \u5fa9\u80b2\u82f1\u96c4\", `15\u79d2\u5167\u4f60\u7a2e\u4e86 ${tCount} \u68f5\u81ea\u7136\u6797\u6728\uff01\\n\u9019\u7247\u68ee\u6797\u6bcf\u5e74\u5c07\u70ba\u5730\u7403\u5438\u6536\u7d04 ${(tCount*22).toFixed(1)}kg \u7684\u4e8c\u6c27\u5316\u78b3\u3002`, \"\ud83c\udf1f\"); \n }\n }, 1000);\n document.getElementById('tree-box').onclick = (e) => {\n if(!tActive) return;\n tCount++; document.getElementById('tree-cnt').innerText=tCount;\n document.getElementById('tree-co2').innerText=(tCount*22).toFixed(1);\n const rect=e.currentTarget.getBoundingClientRect();\n const t = document.createElement('div');\n \/\/ \u4f7f\u7528\u81ea\u7136\u68ee\u6797\u6a39\u7a2e\uff1a\ud83c\udf32(\u91dd\u8449)\u3001\ud83c\udf33(\u95ca\u8449)\u3001\u2618\ufe0f(\u5730\u88ab)\u3001\ud83c\udf3f(\u704c\u6728)\n t.innerText = ['\ud83c\udf32','\ud83c\udf33','\u2618\ufe0f','\ud83c\udf3f'][Math.floor(Math.random()*4)];\n t.className = 'absolute text-5xl pointer-events-none tree-anim';\n t.style.left=(e.clientX-rect.left-24)+'px'; t.style.top=(e.clientY-rect.top-48)+'px';\n document.getElementById('tree-box').appendChild(t);\n };\n }\n\n \/\/ --- 2. \u690d\u7269\u5976\u5206\u985e ---\n const milks = [\n {id:'m1',name:'\u5927\u71d5\u9ea5\u7247',type:'\u71d5\u9ea5'},{id:'m2',name:'\u6709\u6a5f\u9ec3\u8c46',type:'\u9ec3\u8c46'},\n {id:'m3',name:'\u8170\u679c',type:'\u5805\u679c'},{id:'m4',name:'\u9ed1\u8c46',type:'\u9ec3\u8c46'},\n {id:'m5',name:'\u5373\u98df\u71d5\u9ea5',type:'\u71d5\u9ea5'},{id:'m6',name:'\u6838\u6843',type:'\u5805\u679c'}\n ];\n function milkInit() {\n const container=document.getElementById('milk-items');\n container.innerHTML=''; \n document.getElementById('milk-info').innerText='';\n milks.sort(()=>Math.random()-0.5).forEach(m => {\n const d=document.createElement('div');\n d.innerText=m.name; d.id=m.id; d.draggable=true;\n d.className='px-3 py-2 bg-white border-2 border-green-700 rounded-xl shadow-sm cursor-move text-xs font-bold hover:bg-green-50';\n d.ondragstart=(e)=>e.dataTransfer.setData(\"txt\", e.target.id);\n d.ontouchstart = (e) => { e.target.classList.add('opacity-50'); };\n container.appendChild(d);\n });\n }\n function milkOver(e){e.preventDefault();}\n function milkDrop(e,t) {\n e.preventDefault(); const id=e.dataTransfer.getData(\"txt\");\n const item=milks.find(m=>m.id===id);\n if(item && item.type===t) {\n const el = document.getElementById(id);\n if(el) el.remove();\n if(document.getElementById('milk-items').children.length === 0) {\n popup(\"\ud83e\udd5b \u5206\u985e\u9054\u4eba\", \"\u690d\u7269\u5976\u7684\u74b0\u5883\u6210\u672c\u9060\u4f4e\u65bc\u50b3\u7d71\u4e73\u88fd\u54c1\uff0c\u4f60\u505a\u5f97\u5f88\u597d\uff01\", \"\u2705\");\n }\n } else { document.getElementById('milk-info').innerText=\"\u5206\u985e\u932f\u8aa4\u56c9\uff01\"; }\n }\n\n \/\/ --- 3. \u78b3\u8db3\u8de1\u6311\u6230 ---\n const carbs=[\n {q:\"\u5403\u54ea\u7a2e\u86cb\u767d\u8cea\u4f86\u6e90\u5c0d\u5730\u7403\u74b0\u5883\u66f4\u53cb\u5584\uff1f\",o:[{t:\"\u5728\u5730\u751f\u7522\u8c46\u8150\",s:1},{t:\"\u9032\u53e3\u51b7\u85cf\u725b\u8089\",s:0}]},\n {q:\"\u77ed\u8ddd\u79fb\u52d5\u6642\uff08\u5982 2 \u516c\u91cc\u5167\uff09\uff0c\u6700\u63a8\u85a6\u7684\u6c38\u7e8c\u4ea4\u901a\u5de5\u5177\uff1f\",o:[{t:\"\u8d70\u8def\u6216\u9a0e\u55ae\u8eca\",s:1},{t:\"\u7368\u81ea\u99d5\u99db\u71c3\u6cb9\u8eca\",s:0}]},\n {q:\"\u5728\u5916\u9762\u7528\u9910\u6642\uff0c\u54ea\u7a2e\u884c\u70ba\u6700\u7b26\u5408\u6e1b\u5ee2\u539f\u5247\uff1f\",o:[{t:\"\u7d22\u53d6\u62cb\u68c4\u5f0f\u74b0\u4fdd\u9910\u5177\",s:0},{t:\"\u81ea\u5099\u4e0d\u93fd\u92fc\u6216\u7af9\u88fd\u9910\u5177\",s:1}]},\n {q:\"\u8cfc\u7269\u6642\u61c9\u512a\u5148\u8003\u616e\u4ec0\u9ebc\u6a23\u7684\u5546\u54c1\uff1f\",o:[{t:\"\u7cbe\u7f8e\u7e41\u8907\u7684\u591a\u5c64\u5305\u88dd\",s:0},{t:\"\u88f8\u88dd\u98df\u6750\u6216\u5728\u5730\u8fb2\u7522\",s:1}]},\n {q:\"\u95dc\u65bc\u51b7\u6c23\u7684\u4f7f\u7528\uff0c\u54ea\u9805\u884c\u70ba\u8f03\u7bc0\u80fd\u6e1b\u78b3\uff1f\",o:[{t:\"\u6eab\u5ea6\u8a2d\u5b9a\u5728 26-28 \u5ea6\u4e26\u642d\u914d\u96fb\u6247\",s:1},{t:\"\u5c07\u6eab\u5ea6\u8a2d\u70ba 16 \u5ea6\u4ee5\u6c42\u5feb\u901f\u964d\u6eab\",s:0}]},\n {q:\"\u70ba\u4e86\u6e1b\u5c11\u6c34\u8cc7\u6e90\u6d6a\u8cbb\uff0c\u5237\u7259\u6642\u61c9\u8a72\uff1f\",o:[{t:\"\u6301\u7e8c\u958b\u8457\u6c34\u9f8d\u982d\",s:0},{t:\"\u4f7f\u7528\u6f31\u53e3\u676f\u76db\u6c34\",s:1}]},\n {q:\"\u9078\u64c7\u98df\u7269\u6642\uff0c\u54ea\u7a2e\u884c\u70ba\u66f4\u6709\u52a9\u65bc\u964d\u4f4e\u904b\u8f38\u6392\u78b3\uff1f\",o:[{t:\"\u8cfc\u8cb7\u9032\u53e3\u7576\u5b63\u6c34\u679c\",s:0},{t:\"\u8cfc\u8cb7\u5728\u5730\u751f\u7522\u98df\u6750\",s:1}]},\n {q:\"\u54ea\u4e00\u7a2e\u98f2\u98df\u65b9\u5f0f\u7684\u6574\u9ad4\u78b3\u6392\u653e\u91cf\u6700\u4f4e\uff1f\",o:[{t:\"\u7d14\u690d\u7269\u6027\u98f2\u98df (Vegan)\",s:1},{t:\"\u6bcf\u65e5\u542b\u6709\u5927\u91cf\u7d05\u8089\u7684\u98f2\u98df\",s:0}]},\n {q:\"\u95dc\u65bc\u5bb6\u4e2d\u7684\u5783\u573e\u8655\u7406\uff0c\u54ea\u4e00\u9805\u662f\u6b63\u78ba\u7684\u6c38\u7e8c\u89c0\u5ff5\uff1f\",o:[{t:\"\u4ed4\u7d30\u5206\u985e\u4e26\u56de\u6536\u8cc7\u6e90\",s:1},{t:\"\u6240\u6709\u5783\u573e\u5168\u90e8\u6df7\u5728\u4e00\u8d77\u71d2\u6389\",s:0}]},\n {q:\"\u51fa\u9580\u524d\u5fd8\u8a18\u62d4\u6389\u4e0d\u5e38\u7528\u7684\u96fb\u5668\u63d2\u982d\uff0c\u6703\u9020\u6210\uff1f\",o:[{t:\"\u5f85\u6a5f\u96fb\u529b\u6d6a\u8cbb\",s:1},{t:\"\u96fb\u5668\u58fd\u547d\u5ef6\u9577\",s:0}]}\n ];\n let cIdx=0, cScore=0;\n function carbInit() { \n cIdx=0; cScore=0; \n document.getElementById('carb-score').innerText='0'; \n carbRender(); \n }\n function carbRender() {\n const qEl=document.getElementById('carb-question');\n const oEl=document.getElementById('carb-options');\n const pEl=document.getElementById('carb-progress');\n if(cIdx >= carbs.length) {\n let rank = \"\u7da0\u8272\u7a2e\u5b50\";\n if(cScore >= 8) rank = \"\u4f4e\u78b3\u5b88\u8b77\u8005\";\n if(cScore === 10) rank = \"\u6c38\u7e8c\u5c0e\u5e2b\";\n popup(\"\ud83c\udf0d \u6311\u6230\u5b8c\u6210\", `\u60a8\u7684\u7da0\u8272\u5f97\u5206\uff1a${cScore} \/ 10\\n\u7a31\u865f\uff1a${rank}`, \"\ud83c\udfc6\");\n return;\n }\n const data=carbs[cIdx];\n pEl.innerText = `Question ${cIdx + 1} of 10`;\n qEl.innerText = data.q;\n oEl.innerHTML = '';\n data.o.forEach(o => {\n const btn=document.createElement('button');\n btn.innerText=o.t;\n btn.className=\"p-4 bg-white border-2 border-blue-200 rounded-2xl hover:bg-blue-100 transition-all text-left font-bold text-blue-900 shadow-sm active:scale-95\";\n btn.onclick=()=>{ if(o.s) cScore++; cIdx++; document.getElementById('carb-score').innerText=cScore; carbRender(); };\n oEl.appendChild(btn);\n });\n }\n\n \/\/ --- 4. \u6c38\u7e8c\u914d\u5c0d ---\n let mFlipped=[], mLock=false;\n function matchInit() {\n const box=document.getElementById('match-box'); box.innerHTML='';\n const symbols = ['\ud83c\udf31', '\ud83c\udf3f', '\u2600\ufe0f', '\ud83d\udca7', '\ud83d\udeb2', '\ud83e\udd51', '\ud83e\udd57', '\ud83c\udf3d'];\n const deck = [...symbols, ...symbols].sort(() => Math.random() - 0.5);\n mFlipped = []; mLock = false;\n deck.forEach((val) => {\n const card = document.createElement('div');\n card.className = 'match-card';\n card.dataset.value = val;\n card.innerHTML = `<div class=\"front\"><\/div><div class=\"back\">${val}<\/div>`;\n card.onclick = () => {\n if (mLock || card.classList.contains('flipped') || card.classList.contains('matched')) return;\n card.classList.add('flipped');\n mFlipped.push(card);\n if (mFlipped.length === 2) {\n mLock = true;\n const [c1, c2] = mFlipped;\n if (c1.dataset.value === c2.dataset.value) {\n setTimeout(() => { c1.classList.add('matched'); c2.classList.add('matched'); mFlipped = []; mLock = false; checkMatchWin(); }, 500);\n } else {\n setTimeout(() => { c1.classList.remove('flipped'); c2.classList.remove('flipped'); mFlipped = []; mLock = false; }, 800);\n }\n }\n };\n box.appendChild(card);\n });\n }\n function checkMatchWin(){ if(document.querySelectorAll('.match-card.matched').length === 16) popup(\"\ud83e\udde9 \u914d\u5c0d\u6210\u529f\", \"\u606d\u559c\u5b8c\u6210\uff01\", \"\ud83c\udfc5\"); }\n\n \/\/ --- 5. \u62fc\u5716 ---\n let pState=[0,1,2,3,4,5,6,7,8], pSel=null;\n function puzzleInit() {\n const refImg = document.getElementById('p-ref');\n if(refImg) refImg.src = SUNFLOWER_URL;\n pState=[0,1,2,3,4,5,6,7,8]; pSel=null; puzzleRender();\n }\n function puzzleRender() {\n const b=document.getElementById('puzzle-board'); b.innerHTML='';\n pState.forEach((pos, idx) => {\n const d = document.createElement('div');\n d.className = 'puzzle-piece' + (pSel===idx ? ' puzzle-selected' : '');\n d.style.backgroundImage = `url('${SUNFLOWER_URL}')`;\n d.style.backgroundPosition = `-${(pos%3)*100}px -${Math.floor(pos\/3)*100}px`;\n d.onclick = () => {\n if(pSel===null){ pSel=idx; puzzleRender(); }\n else {\n const tmp=pState[pSel]; pState[pSel]=pState[idx]; pState[idx]=tmp;\n pSel=null; puzzleRender(); \n if(pState.every((v,i)=>v===i)) popup(\"\ud83c\udf3b \u4fee\u5fa9\u6210\u529f\", \"\u5411\u65e5\u8475\u6062\u5fa9\u751f\u6a5f\u4e86\uff01\", \"\u2728\");\n }\n };\n b.appendChild(d);\n });\n }\n function puzzleShuffle() { pState.sort(()=>Math.random()-0.5); pSel=null; puzzleRender(); }\n\n function popup(t,m,i) {\n document.getElementById('modal-title').innerText=t; document.getElementById('modal-msg').innerText=m;\n document.getElementById('modal-icon').innerText=i; document.getElementById('modal').classList.remove('hidden');\n }\n function closeModal(){ document.getElementById('modal').classList.add('hidden'); }\n\n window.onload = () => showGame('menu');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7d14\u690d\u6c38\u7e8c\u4e94\u5408\u4e00\u4e92\u52d5\u5b78\u7fd2\u5c0f\u904a\u6232 \u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232 \u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d…<\/p>\n","protected":false},"author":2,"featured_media":43,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vegan-game"],"_links":{"self":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":4,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions\/62"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":40,"date":"2026-01-17T14:07:03","date_gmt":"2026-01-17T06:07:03","guid":{"rendered":"https:\/\/www.teachervegan.org\/?p=40"},"modified":"2026-01-17T19:31:01","modified_gmt":"2026-01-17T11:31:01","slug":"%e7%b4%94%e6%a4%8d%e6%b0%b8%e7%ba%8c%e7%94%9f%e6%b4%bb%e5%b0%8f%e9%81%8a%e6%88%b2","status":"publish","type":"post","link":"https:\/\/www.teachervegan.org\/?p=40","title":{"rendered":"\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5b78\u7fd2\u5c0f\u904a\u6232"},"content":{"rendered":"\n

\u7d14\u690d\u6c38\u7e8c\u4e94\u5408\u4e00\u4e92\u52d5\u5b78\u7fd2\u5c0f\u904a\u6232<\/p>\n\n\n\n

<\/p>\n\n\n\n\n\n\n \n \n \u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;700&display=swap');\n body { font-family: 'Noto+Sans+TC', sans-serif; background-color: #f7fee7; color: #064e3b; overflow-x: hidden; }\n .hidden { display: none; }\n .active-nav { background-color: #166534 !important; color: white !important; }\n \n \/* \u62fc\u5716\u6838\u5fc3 *\/\n .puzzle-container {\n width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 2px; border: 4px solid #166534; background-color: #166534; border-radius: 8px; margin: 0 auto;\n }\n .puzzle-piece {\n width: 98px; height: 98px; background-repeat: no-repeat; background-size: 300px 300px;\n cursor: pointer; transition: all 0.2s ease;\n }\n .puzzle-selected { box-shadow: inset 0 0 0 4px #facc15; transform: scale(0.92); z-index: 10; }\n \n \/* \u914d\u5c0d\u6838\u5fc3 *\/\n .match-grid { \n display: grid; \n grid-template-columns: repeat(4, 1fr); \n gap: 10px; \n width: 100%;\n max-width: 340px; \n margin: 0 auto; \n }\n .match-card { \n width: 100%;\n aspect-ratio: 1 \/ 1;\n background-color: #16a34a; border-radius: 12px; \n display: flex; align-items: center; justify-content: center; \n font-size: 1.8rem;\n cursor: pointer; transition: transform 0.4s, background-color 0.2s;\n transform-style: preserve-3d; position: relative;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n }\n .match-card .front, .match-card .back {\n position: absolute; width: 100%; height: 100%;\n backface-visibility: hidden; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n }\n .match-card .front { background-color: #16a34a; }\n .match-card .back { background-color: white; border: 2px solid #16a34a; transform: rotateY(180deg); }\n \n .match-card.flipped { transform: rotateY(180deg); }\n .match-card.matched { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s; }\n\n \/* \u52d5\u756b *\/\n @keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } }\n .tree-anim { animation: grow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n <header class=\"bg-green-800 text-white py-6 shadow-xl text-center\">\n <h1 class=\"text-2xl md:text-3xl font-bold mb-1 px-4\">\u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232<\/h1>\n <p class=\"text-green-200 px-4 text-sm opacity-80\">\u900f\u904e\u904a\u6232\u9ad4\u9a57\u4f4e\u78b3\u751f\u6d3b\uff0c\u5be6\u8e10\u6c38\u7e8c\u50f9\u503c<\/p>\n <\/header>\n\n <nav class=\"bg-green-100 p-2 flex flex-wrap justify-center gap-2 sticky top-0 z-40 shadow-sm\">\n <button onclick=\"showGame('menu')\" id=\"nav-menu\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold active-nav\">\u4e3b\u9078\u55ae<\/button>\n <button onclick=\"showGame('tree')\" id=\"nav-tree\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">1.\u68ee\u6797\u5fa9\u80b2<\/button>\n <button onclick=\"showGame('milk')\" id=\"nav-milk\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">2.\u690d\u7269\u5976<\/button>\n <button onclick=\"showGame('carbon')\" id=\"nav-carbon\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">3.\u78b3\u6311\u6230<\/button>\n <button onclick=\"showGame('match')\" id=\"nav-match\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">4.\u6c38\u7e8c\u914d\u5c0d<\/button>\n <button onclick=\"showGame('puzzle')\" id=\"nav-puzzle\" class=\"px-3 py-1.5 rounded-full border border-green-800 text-sm font-bold\">5.\u62fc\u5716<\/button>\n <\/nav>\n\n <main class=\"container mx-auto px-4 py-8 max-w-2xl\">\n <div id=\"game-stage\" class=\"bg-white rounded-3xl shadow-2xl p-6 min-h-[520px] flex flex-col items-center justify-center border border-green-100\">\n \n \n <div id=\"view-menu\" class=\"w-full text-center space-y-6\">\n <h2 class=\"text-2xl font-bold text-green-800 italic\">“\u6bcf\u4e00\u5206\u52aa\u529b\uff0c\u5730\u7403\u90fd\u8a18\u5f97”<\/h2>\n <div class=\"grid grid-cols-2 gap-4 text-center\">\n <div onclick=\"showGame('tree')\" class=\"p-6 bg-green-50 rounded-2xl border-2 border-green-100 cursor-pointer hover:bg-green-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf33<\/span> \n <strong class=\"block text-green-800 mt-2 text-lg\">\u68ee\u6797\u5fa9\u80b2<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u8a08\u7b97\u5e74\u6e1b\u78b3\u91cf<\/p>\n <\/div>\n <div onclick=\"showGame('milk')\" class=\"p-6 bg-orange-50 rounded-2xl border-2 border-orange-100 cursor-pointer hover:bg-orange-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83e\udd5b<\/span> \n <strong class=\"block text-orange-800 mt-2 text-lg\">\u690d\u7269\u5976\u5206\u985e<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u4f4e\u78b3\u539f\u6599\u6b78\u4f4d<\/p>\n <\/div>\n <div onclick=\"showGame('carbon')\" class=\"p-6 bg-blue-50 rounded-2xl border-2 border-blue-100 cursor-pointer hover:bg-blue-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf0d<\/span> \n <strong class=\"block text-blue-800 mt-2 text-lg\">\u78b3\u8db3\u8de1\u6311\u6230<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u7da0\u8272\u751f\u6d3b\u6c7a\u7b56<\/p>\n <\/div>\n <div onclick=\"showGame('match')\" class=\"p-6 bg-purple-50 rounded-2xl border-2 border-purple-100 cursor-pointer hover:bg-purple-100 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83e\udde9<\/span> \n <strong class=\"block text-purple-800 mt-2 text-lg\">\u6c38\u7e8c\u914d\u5c0d<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u8a18\u61b6\u74b0\u4fdd\u5716\u9a30<\/p>\n <\/div>\n <div onclick=\"showGame('puzzle')\" class=\"p-6 bg-yellow-50 rounded-2xl border-2 border-yellow-100 cursor-pointer hover:bg-yellow-100 col-span-2 transition-colors flex flex-col items-center justify-center\">\n <span class=\"text-4xl\">\ud83c\udf3b<\/span> \n <strong class=\"block text-yellow-800 mt-2 text-lg\">\u5411\u65e5\u8475\u62fc\u5716<\/strong>\n <p class=\"text-[10px] text-gray-500\">\u4fee\u5fa9\u8c61\u5fb5\u5e0c\u671b\u7684\u5f71\u50cf<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tree\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold\">\ud83c\udf33 \u68ee\u6797\u5fa9\u80b2\uff1a\u5e74\u6e1b\u78b3\u8a08\u7b97<\/h2>\n <div class=\"flex justify-between bg-green-900 text-white p-4 rounded-2xl shadow-lg\">\n <div class=\"flex-1\"><p class=\"text-xs opacity-70\">\u6a39\u6728<\/p><p id=\"tree-cnt\" class=\"text-xl font-bold\">0<\/p><\/div>\n <div class=\"flex-1 border-x border-green-700\"><p class=\"text-xs opacity-70\">\u5e74\u6e1b\u78b3(kg)<\/p><p id=\"tree-co2\" class=\"text-xl font-bold text-yellow-400\">0<\/p><\/div>\n <div class=\"flex-1\"><p class=\"text-xs opacity-70\">\u6642\u9593<\/p><p id=\"tree-time\" class=\"text-xl font-bold text-orange-400\">15<\/p><\/div>\n <\/div>\n <div id=\"tree-box\" class=\"relative w-full h-80 bg-emerald-100 rounded-3xl border-4 border-emerald-300 cursor-pointer overflow-hidden shadow-inner\"><\/div>\n <button id=\"tree-start\" onclick=\"treeGameInit()\" class=\"bg-green-700 text-white px-10 py-3 rounded-full font-bold shadow-lg hover:bg-green-800 active:scale-95 transition-all\">\u958b\u59cb\u9020\u6797<\/button>\n <\/div>\n\n \n <div id=\"view-milk\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-orange-800\">\ud83e\udd5b \u690d\u7269\u5976\u539f\u6599\u5927\u8003\u9a57<\/h2>\n <div id=\"milk-items\" class=\"flex flex-wrap justify-center gap-2 min-h-[100px] p-4 bg-gray-50 rounded-2xl border border-gray-100\"><\/div>\n <div class=\"grid grid-cols-3 gap-2\">\n <div ondrop=\"milkDrop(event, '\u71d5\u9ea5')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-orange-100 border-2 border-dashed border-orange-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u71d5\u9ea5\u5976<\/div>\n <div ondrop=\"milkDrop(event, '\u9ec3\u8c46')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-yellow-100 border-2 border-dashed border-yellow-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u9ec3\u8c46\u5976<\/div>\n <div ondrop=\"milkDrop(event, '\u5805\u679c')\" ondragover=\"milkOver(event)\" class=\"p-3 bg-red-100 border-2 border-dashed border-red-400 rounded-xl text-[10px] font-bold min-h-[70px] flex items-center justify-center\">\u5805\u679c\u5976<\/div>\n <\/div>\n <p id=\"milk-info\" class=\"text-sm font-bold text-red-600 h-5\"><\/p>\n <\/div>\n\n \n <div id=\"view-carbon\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-blue-800\">\ud83c\udf0d \u78b3\u8db3\u8de1\u751f\u6d3b\u6311\u6230<\/h2>\n <div class=\"bg-blue-50 p-6 rounded-3xl text-left border border-blue-100 shadow-sm min-h-[220px]\">\n <div class=\"flex justify-between items-center mb-4\">\n <p id=\"carb-progress\" class=\"text-xs text-blue-400 font-bold uppercase tracking-wider\"><\/p>\n <p class=\"text-xs font-bold text-blue-600\">\u5f97\u5206\uff1a<span id=\"carb-score\">0<\/span><\/p>\n <\/div>\n <p id=\"carb-question\" class=\"text-lg font-bold mb-6 text-blue-900 leading-tight\"><\/p>\n <div id=\"carb-options\" class=\"flex flex-col gap-3\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-match\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-purple-800\">\ud83e\udde9 \u6c38\u7e8c\u5716\u6848\u914d\u5c0d<\/h2>\n <div id=\"match-box\" class=\"match-grid\"><\/div>\n <button onclick=\"matchInit()\" class=\"text-xs text-purple-700 font-bold underline mt-4\">\u91cd\u65b0\u6d17\u724c<\/button>\n <\/div>\n\n \n <div id=\"view-puzzle\" class=\"hidden w-full text-center space-y-4\">\n <h2 class=\"text-2xl font-bold text-yellow-700\">\ud83c\udf3b \u5411\u65e5\u8475\u62fc\u5716\u4fee\u5fa9<\/h2>\n <div class=\"flex justify-center gap-4 mb-2\">\n <img id=\"p-ref\" class=\"w-20 h-20 border-2 border-green-800 rounded shadow-md\">\n <p class=\"text-xs text-left max-w-[150px] self-center text-gray-600 italic\">\u9ede\u64ca\u4efb\u5169\u5f35\u5716\u584a\u4ea4\u63db\uff0c\u9084\u539f\u5411\u65e5\u8475\u539f\u5716\u3002<\/p>\n <\/div>\n <div id=\"puzzle-board\" class=\"puzzle-container\"><\/div>\n <div class=\"flex gap-4 justify-center pt-2\">\n <button onclick=\"puzzleShuffle()\" class=\"bg-green-700 text-white px-6 py-2 rounded-full text-sm font-bold shadow hover:bg-green-800 active:scale-95 transition-all\">\u96a8\u6a5f\u6d17\u724c<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/main>\n\n \n <div id=\"modal\" class=\"hidden fixed inset-0 bg-black\/80 flex items-center justify-center z-50 p-4 backdrop-blur-sm\">\n <div class=\"bg-white rounded-3xl p-8 max-w-sm w-full text-center shadow-2xl border-4 border-green-100\">\n <div id=\"modal-icon\" class=\"text-6xl mb-4\"><\/div>\n <h3 id=\"modal-title\" class=\"text-xl font-bold text-green-900\"><\/h3>\n <p id=\"modal-msg\" class=\"text-gray-500 mt-2 mb-6 text-sm leading-relaxed whitespace-pre-wrap\"><\/p>\n <button onclick=\"closeModal()\" class=\"w-full py-3 bg-green-700 text-white rounded-xl font-bold shadow-lg hover:bg-green-800 active:scale-95 transition-all\">\u78ba\u8a8d<\/button>\n <\/div>\n <\/div>\n\n <script>\n const SUNFLOWER_URL = \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/a9\/A_sunflower.jpg\/300px-A_sunflower.jpg\";\n\n function showGame(id) {\n ['menu', 'tree', 'milk', 'carbon', 'match', 'puzzle'].forEach(v => {\n const el = document.getElementById(`view-${v}`);\n const nav = document.getElementById(`nav-${v}`);\n if(el) el.classList.add('hidden');\n if(nav) nav.classList.remove('active-nav');\n });\n const target = document.getElementById(`view-${id}`);\n const targetNav = document.getElementById(`nav-${id}`);\n if(target) target.classList.remove('hidden');\n if(targetNav) targetNav.classList.add('active-nav');\n \n if(id === 'tree') treeGameReset();\n if(id === 'milk') milkInit();\n if(id === 'carbon') carbInit();\n if(id === 'match') matchInit();\n if(id === 'puzzle') puzzleInit();\n }\n\n \/\/ --- 1. \u68ee\u6797\u5fa9\u80b2 (\u66f4\u65b0\u70ba\u81ea\u7136\u68ee\u6797\u7d44\u5408) ---\n let tCount=0, tTime=15, tActive=false, tTimer;\n function treeGameReset() {\n tCount=0; tTime=15; tActive=false; clearInterval(tTimer);\n document.getElementById('tree-cnt').innerText=\"0\";\n document.getElementById('tree-co2').innerText=\"0\";\n document.getElementById('tree-time').innerText=\"15\";\n document.getElementById('tree-box').innerHTML = '<div class=\"absolute inset-0 flex items-center justify-center text-emerald-400\/50 font-bold pointer-events-none text-center px-4 leading-relaxed\">\u9ede\u64ca\u8349\u5730\u958b\u59cb\u9020\u6797<br><span class=\"text-xs\">\u7a2e\u4e0b\u5438\u78b3\u6548\u7387\u9ad8\u7684\u81ea\u7136\u68ee\u6797\u6a39\u7a2e<\/span><\/div>';\n document.getElementById('tree-start').style.display = 'inline-block';\n }\n function treeGameInit() {\n treeGameReset(); tActive=true; \n document.getElementById('tree-start').style.display='none';\n document.getElementById('tree-box').innerHTML = '';\n tTimer = setInterval(() => {\n tTime--; document.getElementById('tree-time').innerText=tTime;\n if(tTime<=0) { \n tActive=false; clearInterval(tTimer); \n popup(\"\ud83c\udf32 \u5fa9\u80b2\u82f1\u96c4\", `15\u79d2\u5167\u4f60\u7a2e\u4e86 ${tCount} \u68f5\u81ea\u7136\u6797\u6728\uff01\\n\u9019\u7247\u68ee\u6797\u6bcf\u5e74\u5c07\u70ba\u5730\u7403\u5438\u6536\u7d04 ${(tCount*22).toFixed(1)}kg \u7684\u4e8c\u6c27\u5316\u78b3\u3002`, \"\ud83c\udf1f\"); \n }\n }, 1000);\n document.getElementById('tree-box').onclick = (e) => {\n if(!tActive) return;\n tCount++; document.getElementById('tree-cnt').innerText=tCount;\n document.getElementById('tree-co2').innerText=(tCount*22).toFixed(1);\n const rect=e.currentTarget.getBoundingClientRect();\n const t = document.createElement('div');\n \/\/ \u4f7f\u7528\u81ea\u7136\u68ee\u6797\u6a39\u7a2e\uff1a\ud83c\udf32(\u91dd\u8449)\u3001\ud83c\udf33(\u95ca\u8449)\u3001\u2618\ufe0f(\u5730\u88ab)\u3001\ud83c\udf3f(\u704c\u6728)\n t.innerText = ['\ud83c\udf32','\ud83c\udf33','\u2618\ufe0f','\ud83c\udf3f'][Math.floor(Math.random()*4)];\n t.className = 'absolute text-5xl pointer-events-none tree-anim';\n t.style.left=(e.clientX-rect.left-24)+'px'; t.style.top=(e.clientY-rect.top-48)+'px';\n document.getElementById('tree-box').appendChild(t);\n };\n }\n\n \/\/ --- 2. \u690d\u7269\u5976\u5206\u985e ---\n const milks = [\n {id:'m1',name:'\u5927\u71d5\u9ea5\u7247',type:'\u71d5\u9ea5'},{id:'m2',name:'\u6709\u6a5f\u9ec3\u8c46',type:'\u9ec3\u8c46'},\n {id:'m3',name:'\u8170\u679c',type:'\u5805\u679c'},{id:'m4',name:'\u9ed1\u8c46',type:'\u9ec3\u8c46'},\n {id:'m5',name:'\u5373\u98df\u71d5\u9ea5',type:'\u71d5\u9ea5'},{id:'m6',name:'\u6838\u6843',type:'\u5805\u679c'}\n ];\n function milkInit() {\n const container=document.getElementById('milk-items');\n container.innerHTML=''; \n document.getElementById('milk-info').innerText='';\n milks.sort(()=>Math.random()-0.5).forEach(m => {\n const d=document.createElement('div');\n d.innerText=m.name; d.id=m.id; d.draggable=true;\n d.className='px-3 py-2 bg-white border-2 border-green-700 rounded-xl shadow-sm cursor-move text-xs font-bold hover:bg-green-50';\n d.ondragstart=(e)=>e.dataTransfer.setData(\"txt\", e.target.id);\n d.ontouchstart = (e) => { e.target.classList.add('opacity-50'); };\n container.appendChild(d);\n });\n }\n function milkOver(e){e.preventDefault();}\n function milkDrop(e,t) {\n e.preventDefault(); const id=e.dataTransfer.getData(\"txt\");\n const item=milks.find(m=>m.id===id);\n if(item && item.type===t) {\n const el = document.getElementById(id);\n if(el) el.remove();\n if(document.getElementById('milk-items').children.length === 0) {\n popup(\"\ud83e\udd5b \u5206\u985e\u9054\u4eba\", \"\u690d\u7269\u5976\u7684\u74b0\u5883\u6210\u672c\u9060\u4f4e\u65bc\u50b3\u7d71\u4e73\u88fd\u54c1\uff0c\u4f60\u505a\u5f97\u5f88\u597d\uff01\", \"\u2705\");\n }\n } else { document.getElementById('milk-info').innerText=\"\u5206\u985e\u932f\u8aa4\u56c9\uff01\"; }\n }\n\n \/\/ --- 3. \u78b3\u8db3\u8de1\u6311\u6230 ---\n const carbs=[\n {q:\"\u5403\u54ea\u7a2e\u86cb\u767d\u8cea\u4f86\u6e90\u5c0d\u5730\u7403\u74b0\u5883\u66f4\u53cb\u5584\uff1f\",o:[{t:\"\u5728\u5730\u751f\u7522\u8c46\u8150\",s:1},{t:\"\u9032\u53e3\u51b7\u85cf\u725b\u8089\",s:0}]},\n {q:\"\u77ed\u8ddd\u79fb\u52d5\u6642\uff08\u5982 2 \u516c\u91cc\u5167\uff09\uff0c\u6700\u63a8\u85a6\u7684\u6c38\u7e8c\u4ea4\u901a\u5de5\u5177\uff1f\",o:[{t:\"\u8d70\u8def\u6216\u9a0e\u55ae\u8eca\",s:1},{t:\"\u7368\u81ea\u99d5\u99db\u71c3\u6cb9\u8eca\",s:0}]},\n {q:\"\u5728\u5916\u9762\u7528\u9910\u6642\uff0c\u54ea\u7a2e\u884c\u70ba\u6700\u7b26\u5408\u6e1b\u5ee2\u539f\u5247\uff1f\",o:[{t:\"\u7d22\u53d6\u62cb\u68c4\u5f0f\u74b0\u4fdd\u9910\u5177\",s:0},{t:\"\u81ea\u5099\u4e0d\u93fd\u92fc\u6216\u7af9\u88fd\u9910\u5177\",s:1}]},\n {q:\"\u8cfc\u7269\u6642\u61c9\u512a\u5148\u8003\u616e\u4ec0\u9ebc\u6a23\u7684\u5546\u54c1\uff1f\",o:[{t:\"\u7cbe\u7f8e\u7e41\u8907\u7684\u591a\u5c64\u5305\u88dd\",s:0},{t:\"\u88f8\u88dd\u98df\u6750\u6216\u5728\u5730\u8fb2\u7522\",s:1}]},\n {q:\"\u95dc\u65bc\u51b7\u6c23\u7684\u4f7f\u7528\uff0c\u54ea\u9805\u884c\u70ba\u8f03\u7bc0\u80fd\u6e1b\u78b3\uff1f\",o:[{t:\"\u6eab\u5ea6\u8a2d\u5b9a\u5728 26-28 \u5ea6\u4e26\u642d\u914d\u96fb\u6247\",s:1},{t:\"\u5c07\u6eab\u5ea6\u8a2d\u70ba 16 \u5ea6\u4ee5\u6c42\u5feb\u901f\u964d\u6eab\",s:0}]},\n {q:\"\u70ba\u4e86\u6e1b\u5c11\u6c34\u8cc7\u6e90\u6d6a\u8cbb\uff0c\u5237\u7259\u6642\u61c9\u8a72\uff1f\",o:[{t:\"\u6301\u7e8c\u958b\u8457\u6c34\u9f8d\u982d\",s:0},{t:\"\u4f7f\u7528\u6f31\u53e3\u676f\u76db\u6c34\",s:1}]},\n {q:\"\u9078\u64c7\u98df\u7269\u6642\uff0c\u54ea\u7a2e\u884c\u70ba\u66f4\u6709\u52a9\u65bc\u964d\u4f4e\u904b\u8f38\u6392\u78b3\uff1f\",o:[{t:\"\u8cfc\u8cb7\u9032\u53e3\u7576\u5b63\u6c34\u679c\",s:0},{t:\"\u8cfc\u8cb7\u5728\u5730\u751f\u7522\u98df\u6750\",s:1}]},\n {q:\"\u54ea\u4e00\u7a2e\u98f2\u98df\u65b9\u5f0f\u7684\u6574\u9ad4\u78b3\u6392\u653e\u91cf\u6700\u4f4e\uff1f\",o:[{t:\"\u7d14\u690d\u7269\u6027\u98f2\u98df (Vegan)\",s:1},{t:\"\u6bcf\u65e5\u542b\u6709\u5927\u91cf\u7d05\u8089\u7684\u98f2\u98df\",s:0}]},\n {q:\"\u95dc\u65bc\u5bb6\u4e2d\u7684\u5783\u573e\u8655\u7406\uff0c\u54ea\u4e00\u9805\u662f\u6b63\u78ba\u7684\u6c38\u7e8c\u89c0\u5ff5\uff1f\",o:[{t:\"\u4ed4\u7d30\u5206\u985e\u4e26\u56de\u6536\u8cc7\u6e90\",s:1},{t:\"\u6240\u6709\u5783\u573e\u5168\u90e8\u6df7\u5728\u4e00\u8d77\u71d2\u6389\",s:0}]},\n {q:\"\u51fa\u9580\u524d\u5fd8\u8a18\u62d4\u6389\u4e0d\u5e38\u7528\u7684\u96fb\u5668\u63d2\u982d\uff0c\u6703\u9020\u6210\uff1f\",o:[{t:\"\u5f85\u6a5f\u96fb\u529b\u6d6a\u8cbb\",s:1},{t:\"\u96fb\u5668\u58fd\u547d\u5ef6\u9577\",s:0}]}\n ];\n let cIdx=0, cScore=0;\n function carbInit() { \n cIdx=0; cScore=0; \n document.getElementById('carb-score').innerText='0'; \n carbRender(); \n }\n function carbRender() {\n const qEl=document.getElementById('carb-question');\n const oEl=document.getElementById('carb-options');\n const pEl=document.getElementById('carb-progress');\n if(cIdx >= carbs.length) {\n let rank = \"\u7da0\u8272\u7a2e\u5b50\";\n if(cScore >= 8) rank = \"\u4f4e\u78b3\u5b88\u8b77\u8005\";\n if(cScore === 10) rank = \"\u6c38\u7e8c\u5c0e\u5e2b\";\n popup(\"\ud83c\udf0d \u6311\u6230\u5b8c\u6210\", `\u60a8\u7684\u7da0\u8272\u5f97\u5206\uff1a${cScore} \/ 10\\n\u7a31\u865f\uff1a${rank}`, \"\ud83c\udfc6\");\n return;\n }\n const data=carbs[cIdx];\n pEl.innerText = `Question ${cIdx + 1} of 10`;\n qEl.innerText = data.q;\n oEl.innerHTML = '';\n data.o.forEach(o => {\n const btn=document.createElement('button');\n btn.innerText=o.t;\n btn.className=\"p-4 bg-white border-2 border-blue-200 rounded-2xl hover:bg-blue-100 transition-all text-left font-bold text-blue-900 shadow-sm active:scale-95\";\n btn.onclick=()=>{ if(o.s) cScore++; cIdx++; document.getElementById('carb-score').innerText=cScore; carbRender(); };\n oEl.appendChild(btn);\n });\n }\n\n \/\/ --- 4. \u6c38\u7e8c\u914d\u5c0d ---\n let mFlipped=[], mLock=false;\n function matchInit() {\n const box=document.getElementById('match-box'); box.innerHTML='';\n const symbols = ['\ud83c\udf31', '\ud83c\udf3f', '\u2600\ufe0f', '\ud83d\udca7', '\ud83d\udeb2', '\ud83e\udd51', '\ud83e\udd57', '\ud83c\udf3d'];\n const deck = [...symbols, ...symbols].sort(() => Math.random() - 0.5);\n mFlipped = []; mLock = false;\n deck.forEach((val) => {\n const card = document.createElement('div');\n card.className = 'match-card';\n card.dataset.value = val;\n card.innerHTML = `<div class=\"front\"><\/div><div class=\"back\">${val}<\/div>`;\n card.onclick = () => {\n if (mLock || card.classList.contains('flipped') || card.classList.contains('matched')) return;\n card.classList.add('flipped');\n mFlipped.push(card);\n if (mFlipped.length === 2) {\n mLock = true;\n const [c1, c2] = mFlipped;\n if (c1.dataset.value === c2.dataset.value) {\n setTimeout(() => { c1.classList.add('matched'); c2.classList.add('matched'); mFlipped = []; mLock = false; checkMatchWin(); }, 500);\n } else {\n setTimeout(() => { c1.classList.remove('flipped'); c2.classList.remove('flipped'); mFlipped = []; mLock = false; }, 800);\n }\n }\n };\n box.appendChild(card);\n });\n }\n function checkMatchWin(){ if(document.querySelectorAll('.match-card.matched').length === 16) popup(\"\ud83e\udde9 \u914d\u5c0d\u6210\u529f\", \"\u606d\u559c\u5b8c\u6210\uff01\", \"\ud83c\udfc5\"); }\n\n \/\/ --- 5. \u62fc\u5716 ---\n let pState=[0,1,2,3,4,5,6,7,8], pSel=null;\n function puzzleInit() {\n const refImg = document.getElementById('p-ref');\n if(refImg) refImg.src = SUNFLOWER_URL;\n pState=[0,1,2,3,4,5,6,7,8]; pSel=null; puzzleRender();\n }\n function puzzleRender() {\n const b=document.getElementById('puzzle-board'); b.innerHTML='';\n pState.forEach((pos, idx) => {\n const d = document.createElement('div');\n d.className = 'puzzle-piece' + (pSel===idx ? ' puzzle-selected' : '');\n d.style.backgroundImage = `url('${SUNFLOWER_URL}')`;\n d.style.backgroundPosition = `-${(pos%3)*100}px -${Math.floor(pos\/3)*100}px`;\n d.onclick = () => {\n if(pSel===null){ pSel=idx; puzzleRender(); }\n else {\n const tmp=pState[pSel]; pState[pSel]=pState[idx]; pState[idx]=tmp;\n pSel=null; puzzleRender(); \n if(pState.every((v,i)=>v===i)) popup(\"\ud83c\udf3b \u4fee\u5fa9\u6210\u529f\", \"\u5411\u65e5\u8475\u6062\u5fa9\u751f\u6a5f\u4e86\uff01\", \"\u2728\");\n }\n };\n b.appendChild(d);\n });\n }\n function puzzleShuffle() { pState.sort(()=>Math.random()-0.5); pSel=null; puzzleRender(); }\n\n function popup(t,m,i) {\n document.getElementById('modal-title').innerText=t; document.getElementById('modal-msg').innerText=m;\n document.getElementById('modal-icon').innerText=i; document.getElementById('modal').classList.remove('hidden');\n }\n function closeModal(){ document.getElementById('modal').classList.add('hidden'); }\n\n window.onload = () => showGame('menu');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7d14\u690d\u6c38\u7e8c\u4e94\u5408\u4e00\u4e92\u52d5\u5b78\u7fd2\u5c0f\u904a\u6232 \u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d\u6c38\u7e8c\u751f\u6d3b\u4e92\u52d5\u5c0f\u904a\u6232 \u5168\u570b\u6559\u5e2b\u7d14\u690d\u6c38\u7e8c\u63a8\u5ee3\u5354\u6703\uff5c\u7d14\u690d…<\/p>\n","protected":false},"author":2,"featured_media":43,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vegan-game"],"_links":{"self":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":4,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions\/62"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teachervegan.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}