<head>

<title>昆蟲捕捉遊戲</title>

</script>

<style>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

body {

font-family: 'Noto Sans TC', sans-serif;

overflow: hidden;

touch-action: manipulation;

}

.garden {

background: linear-gradient(to bottom, #a8e063, #56ab2f);

position: relative;

overflow: hidden;

}

.fence {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'%3E%3Cpath d='M10,0 L10,40 L15,40 L15,0 M30,0 L30,40 L35,40 L35,0 M50,0 L50,40 L55,40 L55,0 M70,0 L70,40 L75,40 L75,0 M90,0 L90,40 L95,40 L95,0' stroke='%23855E42' stroke-width='5'/%3E%3Cpath d='M0,40 L100,40' stroke='%23855E42' stroke-width='5'/%3E%3C/svg%3E");

background-repeat: repeat-x;

background-size: 100px 60px;

height: 60px;

width: 100%;

position: absolute;

bottom: 0;

z-index: 10;

}

.insect {

position: absolute;

cursor: pointer;

transition: transform 0.3s ease;

z-index: 5;

}

.insect:hover {

transform: scale(1.1);

}

.flower {

position: absolute;

z-index: 1;

opacity: 0.8;

}

.flying-animation {

animation: fly-away 1.5s forwards;

}

@keyframes fly-away {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: translateY(-200px) scale(0.2);

opacity: 0;

}

.prompt-box {

background: rgba(255, 255, 255, 0.9);

border: 3px solid #56ab2f;

border-radius: 15px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}

.win-screen {

background: rgba(0, 0, 0, 0.8);

z-index: 50;

}

.dev-button {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 100;

background: #3b82f6;

color: white;

border-radius: 50%;

width: 50px;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

cursor: pointer;

transition: all 0.3s ease;

}

.dev-button:hover {

transform: scale(1.1);

background: #2563eb;

}

.code-modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.8);

z-index: 200;

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

pointer-events: none;

transition: opacity 0.3s ease;

}

.code-modal.active {

opacity: 1;

pointer-events: auto;

}

.code-container {

background: white;

width: 90%;

max-width: 1000px;

height: 80%;

border-radius: 10px;

display: flex;

flex-direction: column;

overflow: hidden;

}

.code-header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 20px;

background: #f3f4f6;

border-bottom: 1px solid #e5e7eb;

}

.code-content {

flex: 1;

overflow-y: auto;

padding: 20px;

background: #1e293b;

color: #e2e8f0;

font-family: monospace;

white-space: pre;

line-height: 1.5;

font-size: 14px;

}

.copy-success {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

background: #10b981;

color: white;

padding: 10px 20px;

border-radius: 5px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

opacity: 0;

transition: opacity 0.3s ease;

z-index: 300;

}

.copy-success.active {

opacity: 1;

}

</style>

</head>

</h2>

</p>

</div>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</circle>

</circle>

</path>

</path>

</path>

</path>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</circle>

</circle>

</circle>

</circle>

</circle>

</circle>

</svg>

</div>

</path>

</path>

</circle>

</path>

</path>

</svg>

</div>

</ellipse>

</path>

</path>

</path>

</path>

</path>

</circle>

</path>

</path>

</svg>

</div>

</path>

</ellipse>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</svg>

</div>

</ellipse>

</path>

</circle>

</circle>

</circle>

</circle>

</circle>

</path>

</path>

</svg>

</div>

</path>

</ellipse>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</svg>

</div>

</ellipse>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</circle>

</circle>

</svg>

</div>

</ellipse>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</path>

</circle>

</circle>

</svg>

</div>

<p class="text-xl mb-6">你成功捕捉了所有的昆蟲！</p>

</div>

</polyline>

</polyline>

</svg>

</div>

<h3 class="font-bold text-lg">完整程式碼</h3>

<button id="copy-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors">複製程式碼</button>

</div>

</div>

<div id="copy-success" class="copy-success">已成功複製程式碼！</div>

document.addEventListener('DOMContentLoaded', () => {

const garden = document.querySelector('.garden');

const targetInsectElement = document.getElementById('target-insect');

const caughtCountElement = document.getElementById('caught-count');

const totalCountElement = document.getElementById('total-count');

const winScreen = document.getElementById('win-screen');

const restartBtn = document.getElementById('restart-btn');

// 開發人員功能相關元素

const devButton = document.getElementById('dev-button');

const codeModal = document.getElementById('code-modal');

const codeContent = document.getElementById('code-content');

const copyBtn = document.getElementById('copy-btn');

const closeModalBtn = document.getElementById('close-modal-btn');

const copySuccess = document.getElementById('copy-success');

// 昆蟲資料

const insects = [

{ name: '蝴蝶', color: '#FFCC00', wingSpan: 30, speed: 2 },

{ name: '蜜蜂', color: '#FFA500', wingSpan: 20, speed: 3 },

{ name: '蜻蜓', color: '#87CEEB', wingSpan: 35, speed: 4 },

{ name: '瓢蟲', color: '#FF6347', wingSpan: 15, speed: 1.5 },

{ name: '螳螂', color: '#90EE90', wingSpan: 25, speed: 1 },

{ name: '蟋蟀', color: '#8B4513', wingSpan: 18, speed: 2.5 },

{ name: '蝗蟲', color: '#BDB76B', wingSpan: 22, speed: 2.2 }

];

let insectElements = [];

let caughtInsects = 0;

let targetInsect = null;

let gameActive = true;

// 初始化遊戲

function initGame() {

// 重置遊戲狀態

garden.innerHTML = '<div class="fence">

</div>';

insectElements = [];

caughtInsects = 0;

gameActive = true;

// 添加花朵

addFlowers();

// 添加昆蟲

insects.forEach(insect => {

const insectElement = createInsect(insect);

insectElements.push({

element: insectElement,

data: insect,

caught: false

});

garden.appendChild(insectElement);

});

// 更新計數

totalCountElement.textContent = insects.length;

caughtCountElement.textContent = caughtInsects;

// 選擇目標昆蟲

selectTargetInsect();

// 開始昆蟲移動

animateInsects();

}

// 創建昆蟲元素

function createInsect(insect) {

const insectElement = document.createElement('div');

insectElement.className = 'insect';

insectElement.dataset.name = insect.name;

// 根據昆蟲類型創建SVG

let svgContent = '';

switch(insect.name) {

case '蝴蝶':

svgContent = `

</svg>

break;

case '蜜蜂':

svgContent = `

</svg>

break;

case '蜻蜓':

svgContent = `

</svg>

break;

case '瓢蟲':

svgContent = `

</svg>

break;

case '螳螂':

svgContent = `

</svg>

break;

case '蟋蟀':

svgContent = `

</svg>

break;

case '蝗蟲':

svgContent = `

</svg>

break;

default:

svgContent = `

</svg>

}

insectElement.innerHTML = svgContent;

// 隨機位置

const gardenWidth = garden.clientWidth - insect.wingSpan * 2;

const gardenHeight = garden.clientHeight - insect.wingSpan * 2 - 60; // 減去圍欄高度

insectElement.style.left = Math.random() * gardenWidth + 'px';

insectElement.style.top = Math.random() * gardenHeight + 'px';

// 添加點擊事件

insectElement.addEventListener('click', () => handleInsectClick(insectElement));

return insectElement;

}

// 添加花朵

function addFlowers() {

const flowerColors = ['#FF6B6B', '#FFCC5C', '#88D8B0', '#FF85A2', '#FFFFFF', '#B5EAD7'];

for (let i = 0; i < 12; i++) {

const flower = document.createElement('div');

flower.className = 'flower';

const size = Math.floor(Math.random() * 20) + 15;

const color = flowerColors[Math.floor(Math.random() * flowerColors.length)];

flower.innerHTML = `

${Math.random() > 0.5 ? `

` : `

</svg>

const gardenWidth = garden.clientWidth - size;

const gardenHeight = garden.clientHeight - size - 60; // 減去圍欄高度

flower.style.left = Math.random() * gardenWidth + 'px';

flower.style.top = Math.random() * gardenHeight + 'px';

garden.appendChild(flower);

}

// 選擇目標昆蟲

function selectTargetInsect() {

const availableInsects = insectElements.filter(insect => !insect.caught);

if (availableInsects.length === 0) {

gameOver();

return;

}

const randomIndex = Math.floor(Math.random() * availableInsects.length);

targetInsect = availableInsects[randomIndex];

targetInsectElement.textContent = targetInsect.data.name;

}

// 處理昆蟲點擊

function handleInsectClick(insectElement) {

if (!gameActive) return;

const insectName = insectElement.dataset.name;

if (insectName === targetInsect.data.name && !targetInsect.caught) {

// 正確點擊

targetInsect.caught = true;

caughtInsects++;

// 更新計數

caughtCountElement.textContent = caughtInsects;

// 飛走動畫

insectElement.classList.add('flying-animation');

// 選擇新的目標

setTimeout(() => {

selectTargetInsect();

}, 500);

}

// 昆蟲移動動畫

function animateInsects() {

if (!gameActive) return;

insectElements.forEach(insect => {

if (insect.caught) return;

const element = insect.element;

const speed = insect.data.speed;

// 獲取當前位置

let x = parseFloat(element.style.left);

let y = parseFloat(element.style.top);

// 隨機移動方向

const dx = (Math.random() - 0.5) * speed;

const dy = (Math.random() - 0.5) * speed;

// 新位置

x += dx;

y += dy;

// 邊界檢查

const maxX = garden.clientWidth - element.offsetWidth;

const maxY = garden.clientHeight - element.offsetHeight - 60; // 減去圍欄高度

x = Math.max(0, Math.min(x, maxX));

y = Math.max(0, Math.min(y, maxY));

// 更新位置

element.style.left = x + 'px';

element.style.top = y + 'px';

});

requestAnimationFrame(animateInsects);

}

// 遊戲結束

function gameOver() {

gameActive = false;

winScreen.classList.remove('hidden');

}

// 重新開始遊戲

restartBtn.addEventListener('click', () => {

winScreen.classList.add('hidden');

initGame();

});

// 開發人員功能 - 顯示程式碼

devButton.addEventListener('click', () => {

// 獲取當前頁面的HTML代碼

const htmlCode = document.documentElement.outerHTML;

// 格式化HTML代碼（簡單的縮進）

const formattedCode = formatHTML(htmlCode);

// 顯示在模態框中

codeContent.textContent = formattedCode;

codeModal.classList.add('active');

});

// 關閉模態框

closeModalBtn.addEventListener('click', () => {

codeModal.classList.remove('active');

});

// 點擊模態框外部關閉

codeModal.addEventListener('click', (e) => {

if (e.target === codeModal) {

codeModal.classList.remove('active');

}

});

// 複製程式碼

copyBtn.addEventListener('click', () => {

const codeText = codeContent.textContent;

// 使用Clipboard API複製文本

navigator.clipboard.writeText(codeText).then(() => {

// 顯示複製成功提示

copySuccess.classList.add('active');

// 3秒後隱藏提示

setTimeout(() => {

copySuccess.classList.remove('active');

}, 3000);

}).catch(err => {

console.error('複製失敗:', err);

alert('複製失敗，請手動選擇並複製代碼。');

});

// 格式化HTML代碼的簡單函數

function formatHTML(html) {

// 這只是一個簡單的格式化，不是完美的HTML格式化

let formatted = '';

let indent = '';

// 將標籤分行並添加縮進

html.split(/>\s*</).forEach(function(node) {

if (node.match(/^\/\w/)) {

// 結束標籤，減少縮進

indent = indent.substring(2);

}

formatted += indent + '<' + node + '>\n';

if (node.match(/^<?\w[^>]*[^\/]$/) && !node.startsWith('input') && !node.startsWith('link') && !node.startsWith('meta')) {

// 開始標籤，增加縮進

indent += ' ';

}

});

return formatted.substring(1, formatted.length - 2);

}

// 初始化遊戲

initGame();

});

</script>

</iframe>

</body>

</html>