\u690d\u6811\u5c0f\u6e38\u620f<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n font-family: Arial, sans-serif;\n background: linear-gradient(to bottom, #87CEEB, #98FB98);\n min-height: 100vh;\n overflow: hidden;\n }\n \n #gameContainer {\n position: relative;\n width: 100vw;\n height: 100vh;\n cursor: crosshair;\n }\n \n .tree {\n position: absolute;\n font-size: 30px;\n cursor: pointer;\n transition: all 0.3s ease;\n user-select: none;\n transform-origin: bottom center;\n }\n \n .tree:hover {\n filter: brightness(1.2);\n }\n \n .tree.selected {\n animation: bounce 0.5s ease;\n }\n \n @keyframes bounce {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n \n #instructions {\n position: fixed;\n top: 10px;\n left: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n max-width: 300px;\n }\n \n #treeCount {\n position: fixed;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n font-weight: bold;\n color: #2E8B57;\n }\n \n .water-effect {\n position: absolute;\n width: 40px;\n height: 40px;\n background: radial-gradient(circle, rgba(135, 206, 235, 0.8), transparent);\n border-radius: 50%;\n pointer-events: none;\n animation: waterSplash 0.6s ease-out;\n }\n \n @keyframes waterSplash {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"gameContainer\">\n <div id=\"instructions\">\n <h3>\ud83c\udf33 \u690d\u6811\u5c0f\u6e38\u620f<\/h3>\n <p><strong>\ud83d\udccc \u70b9\u51fb\u7a7a\u767d\u5904\uff1a<\/strong>\u79cd\u4e00\u68f5\u5c0f\u6811\u82d7<\/p>\n <p><strong>\ud83d\udccc \u70b9\u51fb\u6811\uff1a<\/strong>\u8ba9\u6811\u957f\u5927\uff08\u518d\u6b21\u70b9\u51fb\u7ee7\u7eed\u957f\u5927\uff09<\/p>\n <p><strong>\ud83d\udca1 \u5c0f\u8d34\u58eb\uff1a<\/strong>\u79cd\u8d8a\u591a\u6811\uff0c\u73af\u5883\u8d8a\u7f8e\u4e3d\uff01<\/p>\n <\/div>\n \n <div id=\"treeCount\">\n \ud83c\udf33 \u6811\u7684\u6570\u91cf: <span id=\"count\">0<\/span>\n <\/div>\n <\/div>\n\n <script>\n class TreeGame {\n constructor() {\n this.treeCount = 0;\n this.trees = [];\n this.gameContainer = document.getElementById('gameContainer');\n this.countDisplay = document.getElementById('count');\n this.init();\n }\n \n init() {\n this.gameContainer.addEventListener('click', (e) => this.handleClick(e));\n this.updateTreeCount();\n }\n \n handleClick(event) {\n \/\/ \u9632\u6b62\u5728\u6309\u94ae\u4e0a\u70b9\u51fb\u65f6\u89e6\u53d1\n if (event.target.id === 'count' || event.target.id === 'treeCount') {\n return;\n }\n \n const rect = this.gameContainer.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n \n \/\/ \u68c0\u67e5\u662f\u5426\u70b9\u51fb\u4e86\u73b0\u6709\u7684\u6811\n const clickedTree = this.getTreeAtPosition(x, y);\n \n if (clickedTree) {\n this.waterTree(clickedTree, x, y);\n } else {\n this.plantTree(x, y);\n }\n }\n \n getTreeAtPosition(x, y) {\n return this.trees.find(tree => {\n const treeRect = tree.element.getBoundingClientRect();\n const containerRect = this.gameContainer.getBoundingClientRect();\n \n const treeX = treeRect.left - containerRect.left + treeRect.width \/ 2;\n const treeY = treeRect.top - containerRect.top + treeRect.height \/ 2;\n \n const distance = Math.sqrt(Math.pow(x - treeX, 2) + Math.pow(y - treeY, 2));\n return distance < 40; \/\/ \u6811\u7684\u70b9\u51fb\u8303\u56f4\n });\n }\n \n plantTree(x, y) {\n const tree = document.createElement('div');\n tree.className = 'tree';\n tree.innerHTML = '\ud83c\udf31'; \/\/ \u521d\u59cb\u4e3a\u6811\u82d7\n \n \/\/ \u8bbe\u7f6e\u6811\u7684\u521d\u59cb\u4f4d\u7f6e\u548c\u5927\u5c0f\n tree.style.left = (x - 15) + 'px';\n tree.style.top = (y - 30) + 'px';\n tree.style.fontSize = '30px';\n \n this.gameContainer.appendChild(tree);\n \n const treeData = {\n element: tree,\n size: 1,\n stage: 0, \/\/ 0: \u6811\u82d7, 1: \u5c0f\u6811, 2: \u5927\u6811, 3: \u8302\u76db\u5927\u6811\n x: x,\n y: y\n };\n \n this.trees.push(treeData);\n this.treeCount++;\n this.updateTreeCount();\n \n \/\/ \u6dfb\u52a0\u79cd\u690d\u52a8\u753b\u6548\u679c\n tree.style.transform = 'scale(0)';\n setTimeout(() => {\n tree.style.transform = 'scale(1)';\n }, 100);\n \n \/\/ \u6811\u7684\u70b9\u51fb\u4e8b\u4ef6\n tree.addEventListener('click', (e) => {\n e.stopPropagation();\n this.growTree(treeData);\n });\n }\n \n growTree(treeData) {\n treeData.size++;\n \n \/\/ \u6839\u636e\u5927\u5c0f\u9636\u6bb5\u6539\u53d8\u6811\u7684\u6837\u5f0f\n if (treeData.size === 1) {\n treeData.element.innerHTML = '\ud83c\udf3f'; \/\/ \u5c0f\u690d\u7269\n treeData.stage = 0;\n } else if (treeData.size === 2) {\n treeData.element.innerHTML = '\ud83c\udf31'; \/\/ \u6811\u82d7\n treeData.stage = 1;\n } else if (treeData.size === 3) {\n treeData.element.innerHTML = '\ud83c\udf33'; \/\/ \u5c0f\u6811\n treeData.stage = 2;\n } else if (treeData.size === 4) {\n treeData.element.innerHTML = '\ud83c\udf32'; \/\/ \u5927\u6811\n treeData.stage = 3;\n } else {\n treeData.element.innerHTML = '\ud83c\udf84'; \/\/ \u8302\u76db\u5927\u6811\n treeData.stage = 4;\n }\n \n \/\/ \u653e\u5927\u6548\u679c\n const scale = 1 + (treeData.size - 1) * 0.3;\n treeData.element.style.transform = `scale(${scale})`;\n \n \/\/ \u6dfb\u52a0\u9009\u4e2d\u52a8\u753b\n treeData.element.classList.add('selected');\n setTimeout(() => {\n treeData.element.classList.remove('selected');\n }, 500);\n }\n \n waterTree(treeData, x, y) {\n \/\/ \u521b\u5efa\u6d47\u6c34\u6548\u679c\n const waterEffect = document.createElement('div');\n waterEffect.className = 'water-effect';\n waterEffect.style.left = (x - 20) + 'px';\n waterEffect.style.top = (y - 20) + 'px';\n \n this.gameContainer.appendChild(waterEffect);\n \n \/\/ \u79fb\u9664\u6d47\u6c34\u6548\u679c\n setTimeout(() => {\n if (waterEffect.parentNode) {\n waterEffect.parentNode.removeChild(waterEffect);\n }\n }, 600);\n \n \/\/ \u8ba9\u6811\u957f\u5927\n this.growTree(treeData);\n }\n \n updateTreeCount() {\n this.countDisplay.textContent = this.treeCount;\n }\n }\n \n \/\/ \u542f\u52a8\u6e38\u620f\n window.addEventListener('DOMContentLoaded', () => {\n new TreeGame();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u690d\u6811\u5c0f\u6e38\u620f \ud83c\udf33 \u690d\u6811\u5c0f\u6e38\u620f \ud83d\udccc \u70b9\u51fb\u7a7a\u767d\u5904\uff1a\u79cd\u4e00\u68f5\u5c0f\u6811\u82d7 \ud83d\udccc \u70b9\u51fb\u6811\uff1a\u8ba9\u6811\u957f\u5927\uff08\u518d\u6b21\u70b9\u51fb\u7ee7\u7eed\u957f\u5927\uff09 \ud83d\udca1 \u5c0f\u8d34\u58eb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-230","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":1,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/media?parent=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":230,"date":"2025-09-24T15:24:20","date_gmt":"2025-09-24T07:24:20","guid":{"rendered":"https:\/\/www.hopestudio.top\/?page_id=230"},"modified":"2025-09-24T15:24:20","modified_gmt":"2025-09-24T07:24:20","slug":"%e6%a4%8d%e6%a0%91%e5%b0%8f%e6%b8%b8%e6%88%8f","status":"publish","type":"page","link":"https:\/\/www.hopestudio.top\/index.php\/%e6%a4%8d%e6%a0%91%e5%b0%8f%e6%b8%b8%e6%88%8f\/","title":{"rendered":"\u690d\u6811\u5c0f\u6e38\u620f"},"content":{"rendered":"\n\n\n\n \n \n \u690d\u6811\u5c0f\u6e38\u620f<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n font-family: Arial, sans-serif;\n background: linear-gradient(to bottom, #87CEEB, #98FB98);\n min-height: 100vh;\n overflow: hidden;\n }\n \n #gameContainer {\n position: relative;\n width: 100vw;\n height: 100vh;\n cursor: crosshair;\n }\n \n .tree {\n position: absolute;\n font-size: 30px;\n cursor: pointer;\n transition: all 0.3s ease;\n user-select: none;\n transform-origin: bottom center;\n }\n \n .tree:hover {\n filter: brightness(1.2);\n }\n \n .tree.selected {\n animation: bounce 0.5s ease;\n }\n \n @keyframes bounce {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n \n #instructions {\n position: fixed;\n top: 10px;\n left: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n max-width: 300px;\n }\n \n #treeCount {\n position: fixed;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n font-weight: bold;\n color: #2E8B57;\n }\n \n .water-effect {\n position: absolute;\n width: 40px;\n height: 40px;\n background: radial-gradient(circle, rgba(135, 206, 235, 0.8), transparent);\n border-radius: 50%;\n pointer-events: none;\n animation: waterSplash 0.6s ease-out;\n }\n \n @keyframes waterSplash {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"gameContainer\">\n <div id=\"instructions\">\n <h3>\ud83c\udf33 \u690d\u6811\u5c0f\u6e38\u620f<\/h3>\n <p><strong>\ud83d\udccc \u70b9\u51fb\u7a7a\u767d\u5904\uff1a<\/strong>\u79cd\u4e00\u68f5\u5c0f\u6811\u82d7<\/p>\n <p><strong>\ud83d\udccc \u70b9\u51fb\u6811\uff1a<\/strong>\u8ba9\u6811\u957f\u5927\uff08\u518d\u6b21\u70b9\u51fb\u7ee7\u7eed\u957f\u5927\uff09<\/p>\n <p><strong>\ud83d\udca1 \u5c0f\u8d34\u58eb\uff1a<\/strong>\u79cd\u8d8a\u591a\u6811\uff0c\u73af\u5883\u8d8a\u7f8e\u4e3d\uff01<\/p>\n <\/div>\n \n <div id=\"treeCount\">\n \ud83c\udf33 \u6811\u7684\u6570\u91cf: <span id=\"count\">0<\/span>\n <\/div>\n <\/div>\n\n <script>\n class TreeGame {\n constructor() {\n this.treeCount = 0;\n this.trees = [];\n this.gameContainer = document.getElementById('gameContainer');\n this.countDisplay = document.getElementById('count');\n this.init();\n }\n \n init() {\n this.gameContainer.addEventListener('click', (e) => this.handleClick(e));\n this.updateTreeCount();\n }\n \n handleClick(event) {\n \/\/ \u9632\u6b62\u5728\u6309\u94ae\u4e0a\u70b9\u51fb\u65f6\u89e6\u53d1\n if (event.target.id === 'count' || event.target.id === 'treeCount') {\n return;\n }\n \n const rect = this.gameContainer.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n \n \/\/ \u68c0\u67e5\u662f\u5426\u70b9\u51fb\u4e86\u73b0\u6709\u7684\u6811\n const clickedTree = this.getTreeAtPosition(x, y);\n \n if (clickedTree) {\n this.waterTree(clickedTree, x, y);\n } else {\n this.plantTree(x, y);\n }\n }\n \n getTreeAtPosition(x, y) {\n return this.trees.find(tree => {\n const treeRect = tree.element.getBoundingClientRect();\n const containerRect = this.gameContainer.getBoundingClientRect();\n \n const treeX = treeRect.left - containerRect.left + treeRect.width \/ 2;\n const treeY = treeRect.top - containerRect.top + treeRect.height \/ 2;\n \n const distance = Math.sqrt(Math.pow(x - treeX, 2) + Math.pow(y - treeY, 2));\n return distance < 40; \/\/ \u6811\u7684\u70b9\u51fb\u8303\u56f4\n });\n }\n \n plantTree(x, y) {\n const tree = document.createElement('div');\n tree.className = 'tree';\n tree.innerHTML = '\ud83c\udf31'; \/\/ \u521d\u59cb\u4e3a\u6811\u82d7\n \n \/\/ \u8bbe\u7f6e\u6811\u7684\u521d\u59cb\u4f4d\u7f6e\u548c\u5927\u5c0f\n tree.style.left = (x - 15) + 'px';\n tree.style.top = (y - 30) + 'px';\n tree.style.fontSize = '30px';\n \n this.gameContainer.appendChild(tree);\n \n const treeData = {\n element: tree,\n size: 1,\n stage: 0, \/\/ 0: \u6811\u82d7, 1: \u5c0f\u6811, 2: \u5927\u6811, 3: \u8302\u76db\u5927\u6811\n x: x,\n y: y\n };\n \n this.trees.push(treeData);\n this.treeCount++;\n this.updateTreeCount();\n \n \/\/ \u6dfb\u52a0\u79cd\u690d\u52a8\u753b\u6548\u679c\n tree.style.transform = 'scale(0)';\n setTimeout(() => {\n tree.style.transform = 'scale(1)';\n }, 100);\n \n \/\/ \u6811\u7684\u70b9\u51fb\u4e8b\u4ef6\n tree.addEventListener('click', (e) => {\n e.stopPropagation();\n this.growTree(treeData);\n });\n }\n \n growTree(treeData) {\n treeData.size++;\n \n \/\/ \u6839\u636e\u5927\u5c0f\u9636\u6bb5\u6539\u53d8\u6811\u7684\u6837\u5f0f\n if (treeData.size === 1) {\n treeData.element.innerHTML = '\ud83c\udf3f'; \/\/ \u5c0f\u690d\u7269\n treeData.stage = 0;\n } else if (treeData.size === 2) {\n treeData.element.innerHTML = '\ud83c\udf31'; \/\/ \u6811\u82d7\n treeData.stage = 1;\n } else if (treeData.size === 3) {\n treeData.element.innerHTML = '\ud83c\udf33'; \/\/ \u5c0f\u6811\n treeData.stage = 2;\n } else if (treeData.size === 4) {\n treeData.element.innerHTML = '\ud83c\udf32'; \/\/ \u5927\u6811\n treeData.stage = 3;\n } else {\n treeData.element.innerHTML = '\ud83c\udf84'; \/\/ \u8302\u76db\u5927\u6811\n treeData.stage = 4;\n }\n \n \/\/ \u653e\u5927\u6548\u679c\n const scale = 1 + (treeData.size - 1) * 0.3;\n treeData.element.style.transform = `scale(${scale})`;\n \n \/\/ \u6dfb\u52a0\u9009\u4e2d\u52a8\u753b\n treeData.element.classList.add('selected');\n setTimeout(() => {\n treeData.element.classList.remove('selected');\n }, 500);\n }\n \n waterTree(treeData, x, y) {\n \/\/ \u521b\u5efa\u6d47\u6c34\u6548\u679c\n const waterEffect = document.createElement('div');\n waterEffect.className = 'water-effect';\n waterEffect.style.left = (x - 20) + 'px';\n waterEffect.style.top = (y - 20) + 'px';\n \n this.gameContainer.appendChild(waterEffect);\n \n \/\/ \u79fb\u9664\u6d47\u6c34\u6548\u679c\n setTimeout(() => {\n if (waterEffect.parentNode) {\n waterEffect.parentNode.removeChild(waterEffect);\n }\n }, 600);\n \n \/\/ \u8ba9\u6811\u957f\u5927\n this.growTree(treeData);\n }\n \n updateTreeCount() {\n this.countDisplay.textContent = this.treeCount;\n }\n }\n \n \/\/ \u542f\u52a8\u6e38\u620f\n window.addEventListener('DOMContentLoaded', () => {\n new TreeGame();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u690d\u6811\u5c0f\u6e38\u620f \ud83c\udf33 \u690d\u6811\u5c0f\u6e38\u620f \ud83d\udccc \u70b9\u51fb\u7a7a\u767d\u5904\uff1a\u79cd\u4e00\u68f5\u5c0f\u6811\u82d7 \ud83d\udccc \u70b9\u51fb\u6811\uff1a\u8ba9\u6811\u957f\u5927\uff08\u518d\u6b21\u70b9\u51fb\u7ee7\u7eed\u957f\u5927\uff09 \ud83d\udca1 \u5c0f\u8d34\u58eb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-230","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":1,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/pages\/230\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/www.hopestudio.top\/index.php\/wp-json\/wp\/v2\/media?parent=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}