carrotprotection

Running

App Files Files Community

bozhong commited on Jun 22

Commit

da78402

verified ·

1 Parent(s): bb762dc

请帮我实现一个塔防类小游戏（例如，保卫萝卜） - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +940 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Carrotprotection
-emoji: 🔥
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: carrotprotection
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,940 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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=Ma+Shan+Zheng&display=swap');
+        body {
+            font-family: 'Ma Shan Zheng', cursive;
+            background-color: #f0f8ff;
+            user-select: none;
+        }
+        .game-container {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        #gameCanvas {
+            background-color: #e6f7ff;
+            border: 3px solid #4a90e2;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
+        }
+        .tower-option {
+            transition: all 0.2s ease;
+        }
+        .tower-option:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
+        }
+        .tower-option:active {
+            transform: scale(0.95);
+        }
+        .enemy-health-bar {
+            height: 4px;
+            background: linear-gradient(to right, #ff0000, #ff9900);
+            position: absolute;
+            top: -8px;
+            left: 0;
+        }
+        .wave-button {
+            background: linear-gradient(to bottom, #ff9966, #ff5e62);
+            color: white;
+            border: none;
+            border-radius: 50px;
+            font-weight: bold;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s;
+        }
+        .wave-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+        }
+        .wave-button:active {
+            transform: translateY(1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .tower-range {
+            position: absolute;
+            border-radius: 50%;
+            background-color: rgba(100, 200, 255, 0.2);
+            border: 1px dashed rgba(100, 150, 255, 0.5);
+            pointer-events: none;
+        }
+        .projectile {
+            position: absolute;
+            border-radius: 50%;
+            background-color: gold;
+            box-shadow: 0 0 5px yellow;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 1s infinite;
+        }
+    </style>
+</head>
+<body class="bg-blue-50 min-h-screen py-8">
+    <div class="container mx-auto px-4">
+        <h1 class="text-4xl md:text-5xl font-bold text-center text-blue-800 mb-2">保卫萝卜</h1>
+        <p class="text-center text-blue-600 mb-8">建造防御塔保护你的萝卜免受怪物侵袭！</p>
+        <div class="game-container">
+            <!-- 游戏状态栏 -->
+            <div class="flex justify-between items-center mb-4 bg-blue-100 p-3 rounded-lg shadow">
+                <div class="flex items-center">
+                    <div class="bg-yellow-100 border-2 border-yellow-300 rounded-full p-2 mr-3">
+                        <span class="text-yellow-700 font-bold text-xl" id="money">100</span>
+                    </div>
+                    <div class="bg-red-100 border-2 border-red-300 rounded-full p-2">
+                        <span class="text-red-700 font-bold text-xl" id="lives">10</span>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <div class="text-blue-700 font-bold">波数: <span id="wave">0</span>/10</div>
+                    <div class="text-sm text-gray-600">下一波: <span id="next-wave-timer">5</span>秒</div>
+                </div>
+                <button id="start-wave" class="wave-button px-6 py-2 text-lg">
+                    开始波次
+                </button>
+            </div>
+            <!-- 游戏画布 -->
+            <canvas id="gameCanvas" width="800" height="500" class="w-full"></canvas>
+            <!-- 塔选项 -->
+            <div class="flex justify-between mt-4 bg-blue-100 p-3 rounded-lg shadow">
+                <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="arrow">
+                    <div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mb-1">
+                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+                            <div class="w-4 h-4 bg-blue-800 rounded-full"></div>
+                        </div>
+                    </div>
+                    <span class="font-bold text-blue-800">箭塔</span>
+                    <span class="text-sm text-yellow-700">$50</span>
+                </div>
+                <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="cannon">
+                    <div class="w-12 h-12 bg-red-200 rounded-full flex items-center justify-center mb-1">
+                        <div class="w-8 h-8 bg-red-500 rounded-full"></div>
+                    </div>
+                    <span class="font-bold text-red-800">炮塔</span>
+                    <span class="text-sm text-yellow-700">$80</span>
+                </div>
+                <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="magic">
+                    <div class="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center mb-1">
+                        <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
+                            <div class="w-4 h-4 bg-white rounded-full"></div>
+                        </div>
+                    </div>
+                    <span class="font-bold text-purple-800">魔法塔</span>
+                    <span class="text-sm text-yellow-700">$120</span>
+                </div>
+                <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="slow">
+                    <div class="w-12 h-12 bg-green-200 rounded-full flex items-center justify-center mb-1">
+                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+                            <div class="w-6 h-6 bg-white rounded-full opacity-50"></div>
+                        </div>
+                    </div>
+                    <span class="font-bold text-green-800">减速塔</span>
+                    <span class="text-sm text-yellow-700">$90</span>
+                </div>
+            </div>
+            <!-- 游戏说明 -->
+            <div class="mt-6 bg-white p-4 rounded-lg shadow">
+                <h2 class="text-xl font-bold text-blue-800 mb-2">游戏说明</h2>
+                <ul class="list-disc pl-5 text-gray-700">
+                    <li class="mb-1">点击下方的防御塔，然后在地图上放置</li>
+                    <li class="mb-1">每波敌人来袭前有5秒准备时间</li>
+                    <li class="mb-1">敌人到达终点会减少你的生命值</li>
+                    <li class="mb-1">击败敌人获得金币，用于建造更多防御塔</li>
+                    <li class="mb-1">成功防御10波敌人获胜！</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // 游戏常量
+            const TOWER_TYPES = {
+                arrow: { cost: 50, damage: 10, range: 150, fireRate: 800, color: '#3b82f6', projectileSpeed: 8 },
+                cannon: { cost: 80, damage: 25, range: 120, fireRate: 1500, color: '#ef4444', projectileSpeed: 6 },
+                magic: { cost: 120, damage: 15, range: 180, fireRate: 1000, color: '#8b5cf6', projectileSpeed: 10 },
+                slow: { cost: 90, damage: 5, range: 160, fireRate: 2000, color: '#10b981', projectileSpeed: 5, slowEffect: 0.5 }
+            };
+            const ENEMY_TYPES = [
+                { health: 30, speed: 1.5, color: '#f59e0b', reward: 10 },
+                { health: 60, speed: 1.0, color: '#ef4444', reward: 20 },
+                { health: 100, speed: 0.8, color: '#7c3aed', reward: 35 },
+                { health: 150, speed: 0.6, color: '#1e293b', reward: 50 }
+            ];
+            // 游戏状态
+            let gameState = {
+                money: 100,
+                lives: 10,
+                wave: 0,
+                maxWave: 10,
+                waveInProgress: false,
+                nextWaveTimer: 5,
+                selectedTower: null,
+                towers: [],
+                enemies: [],
+                projectiles: [],
+                path: [],
+                carrotPosition: { x: 750, y: 250 },
+                gameOver: false,
+                gameWon: false
+            };
+            // DOM元素
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            const moneyDisplay = document.getElementById('money');
+            const livesDisplay = document.getElementById('lives');
+            const waveDisplay = document.getElementById('wave');
+            const nextWaveTimerDisplay = document.getElementById('next-wave-timer');
+            const startWaveButton = document.getElementById('start-wave');
+            const towerOptions = document.querySelectorAll('.tower-option');
+            // 初始化游戏路径
+            function initPath() {
+                gameState.path = [
+                    { x: 0, y: 100 },
+                    { x: 200, y: 100 },
+                    { x: 200, y: 400 },
+                    { x: 400, y: 400 },
+                    { x: 400, y: 200 },
+                    { x: 600, y: 200 },
+                    { x: 600, y: 300 },
+                    { x: gameState.carrotPosition.x, y: gameState.carrotPosition.y }
+                ];
+            }
+            // 绘制游戏
+            function draw() {
+                // 清空画布
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // 绘制背景网格
+                drawGrid();
+                // 绘制路径
+                drawPath();
+                // 绘制萝卜
+                drawCarrot();
+                // 绘制防御塔
+                gameState.towers.forEach(tower => {
+                    drawTower(tower);
+                });
+                // 绘制敌人
+                gameState.enemies.forEach(enemy => {
+                    drawEnemy(enemy);
+                });
+                // 绘制投射物
+                gameState.projectiles.forEach(projectile => {
+                    drawProjectile(projectile);
+                });
+                // 如果游戏结束，显示游戏结束画面
+                if (gameState.gameOver) {
+                    drawGameOver();
+                }
+                // 如果游戏胜利，显示胜利画面
+                if (gameState.gameWon) {
+                    drawGameWon();
+                }
+            }
+            // 绘制背景网格
+            function drawGrid() {
+                ctx.strokeStyle = '#dbeafe';
+                ctx.lineWidth = 1;
+                for (let x = 0; x < canvas.width; x += 50) {
+                    ctx.beginPath();
+                    ctx.moveTo(x, 0);
+                    ctx.lineTo(x, canvas.height);
+                    ctx.stroke();
+                }
+                for (let y = 0; y < canvas.height; y += 50) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, y);
+                    ctx.lineTo(canvas.width, y);
+                    ctx.stroke();
+                }
+            }
+            // 绘制路径
+            function drawPath() {
+                ctx.strokeStyle = '#a5b4fc';
+                ctx.lineWidth = 40;
+                ctx.lineCap = 'round';
+                ctx.lineJoin = 'round';
+                ctx.beginPath();
+                ctx.moveTo(gameState.path[0].x, gameState.path[0].y);
+                for (let i = 1; i < gameState.path.length; i++) {
+                    ctx.lineTo(gameState.path[i].x, gameState.path[i].y);
+                }
+                ctx.stroke();
+                // 绘制路径边缘
+                ctx.strokeStyle = '#818cf8';
+                ctx.lineWidth = 4;
+                ctx.beginPath();
+                ctx.moveTo(gameState.path[0].x, gameState.path[0].y);
+                for (let i = 1; i < gameState.path.length; i++) {
+                    ctx.lineTo(gameState.path[i].x, gameState.path[i].y);
+                }
+                ctx.stroke();
+            }
+            // 绘制萝卜
+            function drawCarrot() {
+                // 萝卜身体
+                ctx.fillStyle = '#f97316';
+                ctx.beginPath();
+                ctx.arc(gameState.carrotPosition.x, gameState.carrotPosition.y, 30, 0, Math.PI * 2);
+                ctx.fill();
+                // 萝卜叶子
+                ctx.fillStyle = '#22c55e';
+                ctx.beginPath();
+                ctx.moveTo(gameState.carrotPosition.x - 15, gameState.carrotPosition.y - 30);
+                ctx.lineTo(gameState.carrotPosition.x, gameState.carrotPosition.y - 50);
+                ctx.lineTo(gameState.carrotPosition.x + 15, gameState.carrotPosition.y - 30);
+                ctx.closePath();
+                ctx.fill();
+                // 萝卜眼睛
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(gameState.carrotPosition.x - 10, gameState.carrotPosition.y - 5, 5, 0, Math.PI * 2);
+                ctx.arc(gameState.carrotPosition.x + 10, gameState.carrotPosition.y - 5, 5, 0, Math.PI * 2);
+                ctx.fill();
+                // 萝卜瞳孔
+                ctx.fillStyle = 'black';
+                ctx.beginPath();
+                ctx.arc(gameState.carrotPosition.x - 10, gameState.carrotPosition.y - 5, 2, 0, Math.PI * 2);
+                ctx.arc(gameState.carrotPosition.x + 10, gameState.carrotPosition.y - 5, 2, 0, Math.PI * 2);
+                ctx.fill();
+                // 萝卜嘴巴
+                ctx.strokeStyle = 'black';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(gameState.carrotPosition.x, gameState.carrotPosition.y + 5, 10, 0, Math.PI);
+                ctx.stroke();
+            }
+            // 绘制防御塔
+            function drawTower(tower) {
+                // 塔基
+                ctx.fillStyle = '#d1d5db';
+                ctx.beginPath();
+                ctx.arc(tower.x, tower.y, 20, 0, Math.PI * 2);
+                ctx.fill();
+                // 塔身
+                ctx.fillStyle = tower.color;
+                ctx.beginPath();
+                ctx.arc(tower.x, tower.y, 15, 0, Math.PI * 2);
+                ctx.fill();
+                // 塔顶
+                ctx.fillStyle = '#facc15';
+                ctx.beginPath();
+                ctx.arc(tower.x, tower.y, 8, 0, Math.PI * 2);
+                ctx.fill();
+                // 如果塔正在攻击，绘制攻击方向线
+                if (tower.target) {
+                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+                    ctx.lineWidth = 2;
+                    ctx.beginPath();
+                    ctx.moveTo(tower.x, tower.y);
+                    ctx.lineTo(tower.target.x, tower.target.y);
+                    ctx.stroke();
+                }
+            }
+            // 绘制敌人
+            function drawEnemy(enemy) {
+                // 敌人身体
+                ctx.fillStyle = enemy.color;
+                ctx.beginPath();
+                ctx.arc(enemy.x, enemy.y, 15, 0, Math.PI * 2);
+                ctx.fill();
+                // 敌人眼睛
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(enemy.x - 5, enemy.y - 5, 3, 0, Math.PI * 2);
+                ctx.arc(enemy.x + 5, enemy.y - 5, 3, 0, Math.PI * 2);
+                ctx.fill();
+                // 敌人嘴巴
+                ctx.fillStyle = '#7f1d1d';
+                ctx.beginPath();
+                ctx.arc(enemy.x, enemy.y + 5, 5, 0, Math.PI);
+                ctx.fill();
+                // 绘制血条
+                const healthBarWidth = 30;
+                const healthPercentage = enemy.health / enemy.maxHealth;
+                ctx.fillStyle = '#dc2626';
+                ctx.fillRect(enemy.x - healthBarWidth/2, enemy.y - 25, healthBarWidth, 3);
+                ctx.fillStyle = '#16a34a';
+                ctx.fillRect(enemy.x - healthBarWidth/2, enemy.y - 25, healthBarWidth * healthPercentage, 3);
+            }
+            // 绘制投射物
+            function drawProjectile(projectile) {
+                ctx.fillStyle = projectile.color;
+                ctx.beginPath();
+                ctx.arc(projectile.x, projectile.y, projectile.radius, 0, Math.PI * 2);
+                ctx.fill();
+                // 添加发光效果
+                ctx.shadowColor = projectile.color;
+                ctx.shadowBlur = 10;
+                ctx.fill();
+                ctx.shadowColor = 'transparent';
+                ctx.shadowBlur = 0;
+            }
+            // 绘制游戏结束画面
+            function drawGameOver() {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.fillStyle = 'white';
+                ctx.font = 'bold 48px "Ma Shan Zheng", cursive';
+                ctx.textAlign = 'center';
+                ctx.fillText('游戏结束', canvas.width/2, canvas.height/2 - 30);
+                ctx.font = '24px "Ma Shan Zheng", cursive';
+                ctx.fillText('你的萝卜被吃掉了!', canvas.width/2, canvas.height/2 + 20);
+                ctx.fillStyle = '#f59e0b';
+                ctx.font = 'bold 28px "Ma Shan Zheng", cursive';
+                ctx.fillText('点击重新开始', canvas.width/2, canvas.height/2 + 80);
+            }
+            // 绘制游戏胜利画面
+            function drawGameWon() {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.fillStyle = '#f59e0b';
+                ctx.font = 'bold 48px "Ma Shan Zheng", cursive';
+                ctx.textAlign = 'center';
+                ctx.fillText('胜利!', canvas.width/2, canvas.height/2 - 30);
+                ctx.fillStyle = 'white';
+                ctx.font = '24px "Ma Shan Zheng", cursive';
+                ctx.fillText('你成功保护了萝卜!', canvas.width/2, canvas.height/2 + 20);
+                ctx.fillStyle = '#f59e0b';
+                ctx.font = 'bold 28px "Ma Shan Zheng", cursive';
+                ctx.fillText('点击重新开始', canvas.width/2, canvas.height/2 + 80);
+            }
+            // 更新游戏状态
+            function update() {
+                if (gameState.gameOver || gameState.gameWon) return;
+                // 更新敌人
+                updateEnemies();
+                // 更新投射物
+                updateProjectiles();
+                // 更新防御塔
+                updateTowers();
+                // 更新波次计时器
+                if (!gameState.waveInProgress && gameState.wave < gameState.maxWave) {
+                    updateWaveTimer();
+                }
+                // 检查游戏是否结束
+                if (gameState.lives <= 0) {
+                    gameState.gameOver = true;
+                }
+                // 检查游戏是否胜利
+                if (gameState.wave >= gameState.maxWave && gameState.enemies.length === 0) {
+                    gameState.gameWon = true;
+                }
+                // 更新UI
+                updateUI();
+            }
+            // 更新敌人
+            function updateEnemies() {
+                for (let i = gameState.enemies.length - 1; i >= 0; i--) {
+                    const enemy = gameState.enemies[i];
+                    // 移动敌人
+                    if (enemy.pathIndex < gameState.path.length - 1) {
+                        const target = gameState.path[enemy.pathIndex + 1];
+                        const dx = target.x - enemy.x;
+                        const dy = target.y - enemy.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance < 1) {
+                            enemy.pathIndex++;
+                        } else {
+                            enemy.x += (dx / distance) * enemy.speed * (enemy.slowTimer > 0 ? 0.5 : 1);
+                            enemy.y += (dy / distance) * enemy.speed * (enemy.slowTimer > 0 ? 0.5 : 1);
+                        }
+                    }
+                    // 检查敌人是否到达终点
+                    const dx = gameState.carrotPosition.x - enemy.x;
+                    const dy = gameState.carrotPosition.y - enemy.y;
+                    const distanceToCarrot = Math.sqrt(dx * dx + dy * dy);
+                    if (distanceToCarrot < 30) {
+                        gameState.lives--;
+                        gameState.enemies.splice(i, 1);
+                        continue;
+                    }
+                    // 更新减速计时器
+                    if (enemy.slowTimer > 0) {
+                        enemy.slowTimer--;
+                    }
+                }
+            }
+            // 更新投射物
+            function updateProjectiles() {
+                for (let i = gameState.projectiles.length - 1; i >= 0; i--) {
+                    const projectile = gameState.projectiles[i];
+                    // 移动投射物
+                    const dx = projectile.target.x - projectile.x;
+                    const dy = projectile.target.y - projectile.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < 5) {
+                        // 投射物击中目标
+                        const enemy = gameState.enemies.find(e => e === projectile.target);
+                        if (enemy) {
+                            enemy.health -= projectile.damage;
+                            // 如果是减速塔的投射物，应用减速效果
+                            if (projectile.slowEffect) {
+                                enemy.slowTimer = 120; // 2秒减速效果
+                            }
+                            // 检查敌人是否被击败
+                            if (enemy.health <= 0) {
+                                gameState.money += enemy.reward;
+                                const index = gameState.enemies.indexOf(enemy);
+                                if (index !== -1) {
+                                    gameState.enemies.splice(index, 1);
+                                }
+                            }
+                        }
+                        gameState.projectiles.splice(i, 1);
+                    } else {
+                        projectile.x += (dx / distance) * projectile.speed;
+                        projectile.y += (dy / distance) * projectile.speed;
+                    }
+                }
+            }
+            // 更新防御塔
+            function updateTowers() {
+                gameState.towers.forEach(tower => {
+                    // 重置目标
+                    tower.target = null;
+                    // 查找范围内的敌人
+                    let closestEnemy = null;
+                    let minDistance = Infinity;
+                    gameState.enemies.forEach(enemy => {
+                        const dx = enemy.x - tower.x;
+                        const dy = enemy.y - tower.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance < tower.range && distance < minDistance) {
+                            closestEnemy = enemy;
+                            minDistance = distance;
+                        }
+                    });
+                    // 如果找到敌人且冷却结束，则攻击
+                    if (closestEnemy && Date.now() - tower.lastShot > tower.fireRate) {
+                        tower.target = closestEnemy;
+                        tower.lastShot = Date.now();
+                        // 创建投射物
+                        gameState.projectiles.push({
+                            x: tower.x,
+                            y: tower.y,
+                            target: closestEnemy,
+                            damage: tower.damage,
+                            speed: tower.projectileSpeed,
+                            radius: 5,
+                            color: tower.color,
+                            slowEffect: tower.slowEffect
+                        });
+                    }
+                });
+            }
+            // 更新波次计时器
+            function updateWaveTimer() {
+                if (gameState.nextWaveTimer > 0) {
+                    gameState.nextWaveTimer -= 1/60; // 假设60FPS
+                    if (gameState.nextWaveTimer <= 0) {
+                        startWave();
+                    }
+                }
+            }
+            // 更新UI
+            function updateUI() {
+                moneyDisplay.textContent = gameState.money;
+                livesDisplay.textContent = gameState.lives;
+                waveDisplay.textContent = gameState.wave;
+                if (!gameState.waveInProgress && gameState.wave < gameState.maxWave) {
+                    nextWaveTimerDisplay.textContent = Math.ceil(gameState.nextWaveTimer);
+                } else {
+                    nextWaveTimerDisplay.textContent = '战斗中';
+                }
+                // 更新开始波次按钮状态
+                if (gameState.waveInProgress || gameState.wave >= gameState.maxWave) {
+                    startWaveButton.disabled = true;
+                    startWaveButton.classList.remove('hover:transform', 'hover:-translate-y-2', 'hover:shadow-md');
+                    startWaveButton.classList.add('opacity-50');
+                } else {
+                    startWaveButton.disabled = false;
+                    startWaveButton.classList.add('hover:transform', 'hover:-translate-y-2', 'hover:shadow-md');
+                    startWaveButton.classList.remove('opacity-50');
+                }
+                // 更新塔选项的可购买状态
+                towerOptions.forEach(option => {
+                    const towerType = option.dataset.tower;
+                    const cost = TOWER_TYPES[towerType].cost;
+                    if (gameState.money < cost) {
+                        option.classList.add('opacity-50');
+                        option.classList.remove('cursor-pointer', 'hover:border-yellow-400');
+                        option.classList.add('cursor-not-allowed');
+                    } else {
+                        option.classList.remove('opacity-50');
+                        option.classList.add('cursor-pointer', 'hover:border-yellow-400');
+                        option.classList.remove('cursor-not-allowed');
+                    }
+                });
+            }
+            // 开始一波敌人
+            function startWave() {
+                if (gameState.waveInProgress || gameState.wave >= gameState.maxWave) return;
+                gameState.wave++;
+                gameState.waveInProgress = true;
+                gameState.nextWaveTimer = 5;
+                // 根据波数生成敌人
+                const enemyCount = 5 + gameState.wave * 2;
+                const enemyTypes = [];
+                if (gameState.wave < 3) {
+                    enemyTypes.push(0); // 只生成第一种敌人
+                } else if (gameState.wave < 6) {
+                    enemyTypes.push(0, 1); // 前两种敌人
+                } else if (gameState.wave < 9) {
+                    enemyTypes.push(0, 1, 2); // 前三种敌人
+                } else {
+                    enemyTypes.push(0, 1, 2, 3); // 所有敌人
+                }
+                for (let i = 0; i < enemyCount; i++) {
+                    const typeIndex = enemyTypes[Math.floor(Math.random() * enemyTypes.length)];
+                    const type = ENEMY_TYPES[typeIndex];
+                    // 随着波数增加，敌人变得更强大
+                    const healthMultiplier = 1 + (gameState.wave - 1) * 0.1;
+                    const rewardMultiplier = 1 + (gameState.wave - 1) * 0.05;
+                    setTimeout(() => {
+                        gameState.enemies.push({
+                            x: gameState.path[0].x,
+                            y: gameState.path[0].y,
+                            health: type.health * healthMultiplier,
+                            maxHealth: type.health * healthMultiplier,
+                            speed: type.speed,
+                            color: type.color,
+                            reward: Math.round(type.reward * rewardMultiplier),
+                            pathIndex: 0,
+                            slowTimer: 0
+                        });
+                    }, i * 1000); // 每秒生成一个敌人
+                }
+                // 检查波次是否结束
+                const checkWaveEnd = setInterval(() => {
+                    if (gameState.enemies.length === 0) {
+                        gameState.waveInProgress = false;
+                        clearInterval(checkWaveEnd);
+                    }
+                }, 1000);
+            }
+            // 游戏循环
+            function gameLoop() {
+                update();
+                draw();
+                requestAnimationFrame(gameLoop);
+            }
+            // 初始化游戏
+            function initGame() {
+                gameState = {
+                    money: 100,
+                    lives: 10,
+                    wave: 0,
+                    maxWave: 10,
+                    waveInProgress: false,
+                    nextWaveTimer: 5,
+                    selectedTower: null,
+                    towers: [],
+                    enemies: [],
+                    projectiles: [],
+                    path: [],
+                    carrotPosition: { x: 750, y: 250 },
+                    gameOver: false,
+                    gameWon: false
+                };
+                initPath();
+                startWaveButton.disabled = false;
+                startWaveButton.classList.remove('opacity-50');
+            }
+            // 事件监听器
+            canvas.addEventListener('click', (e) => {
+                if (gameState.gameOver || gameState.gameWon) {
+                    initGame();
+                    return;
+                }
+                const rect = canvas.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                // 检查是否点击了路径
+                const isOnPath = isPointOnPath(x, y);
+                if (gameState.selectedTower && !isOnPath) {
+                    // 检查是否有足够的金钱
+                    const towerType = TOWER_TYPES[gameState.selectedTower];
+                    if (gameState.money >= towerType.cost) {
+                        // 检查是否与其他塔重叠
+                        const overlapping = gameState.towers.some(tower => {
+                            const dx = tower.x - x;
+                            const dy = tower.y - y;
+                            return Math.sqrt(dx * dx + dy * dy) < 40;
+                        });
+                        if (!overlapping) {
+                            // 放置防御塔
+                            gameState.towers.push({
+                                x: x,
+                                y: y,
+                                type: gameState.selectedTower,
+                                damage: towerType.damage,
+                                range: towerType.range,
+                                fireRate: towerType.fireRate,
+                                color: towerType.color,
+                                projectileSpeed: towerType.projectileSpeed,
+                                lastShot: 0,
+                                target: null,
+                                slowEffect: towerType.slowEffect
+                            });
+                            gameState.money -= towerType.cost;
+                            gameState.selectedTower = null;
+                            // 移除所有范围指示器
+                            document.querySelectorAll('.tower-range').forEach(el => el.remove());
+                        }
+                    }
+                }
+            });
+            // 检查点是否在路径上
+            function isPointOnPath(x, y) {
+                // 简化检查：只需检查是否靠近路径点
+                for (let i = 0; i < gameState.path.length; i++) {
+                    const point = gameState.path[i];
+                    const dx = point.x - x;
+                    const dy = point.y - y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < 30) {
+                        return true;
+                    }
+                }
+                // 检查是否在路径线段上
+                for (let i = 0; i < gameState.path.length - 1; i++) {
+                    const p1 = gameState.path[i];
+                    const p2 = gameState.path[i + 1];
+                    // 计算点到线段的距离
+                    const distance = pointToLineDistance(x, y, p1.x, p1.y, p2.x, p2.y);
+                    if (distance < 25) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+            // 计算点到线段的距离
+            function pointToLineDistance(x, y, x1, y1, x2, y2) {
+                const A = x - x1;
+                const B = y - y1;
+                const C = x2 - x1;
+                const D = y2 - y1;
+                const dot = A * C + B * D;
+                const len_sq = C * C + D * D;
+                let param = -1;
+                if (len_sq !== 0) {
+                    param = dot / len_sq;
+                }
+                let xx, yy;
+                if (param < 0) {
+                    xx = x1;
+                    yy = y1;
+                } else if (param > 1) {
+                    xx = x2;
+                    yy = y2;
+                } else {
+                    xx = x1 + param * C;
+                    yy = y1 + param * D;
+                }
+                const dx = x - xx;
+                const dy = y - yy;
+                return Math.sqrt(dx * dx + dy * dy);
+            }
+            // 塔选项点击事件
+            towerOptions.forEach(option => {
+                option.addEventListener('click', () => {
+                    const towerType = option.dataset.tower;
+                    const cost = TOWER_TYPES[towerType].cost;
+                    if (gameState.money >= cost) {
+                        gameState.selectedTower = towerType;
+                        // 移除之前的所有范围指示器
+                        document.querySelectorAll('.tower-range').forEach(el => el.remove());
+                        // 创建新的范围指示器
+                        const rangeIndicator = document.createElement('div');
+                        rangeIndicator.className = 'tower-range';
+                        rangeIndicator.style.width = `${TOWER_TYPES[towerType].range * 2}px`;
+                        rangeIndicator.style.height = `${TOWER_TYPES[towerType].range * 2}px`;
+                        rangeIndicator.style.left = `0px`;
+                        rangeIndicator.style.top = `0px`;
+                        rangeIndicator.style.transform = 'translate(-50%, -50%)';
+                        document.body.appendChild(rangeIndicator);
+                        // 更新范围指示器位置
+                        const updateRangeIndicator = (e) => {
+                            const rect = canvas.getBoundingClientRect();
+                            const x = e.clientX - rect.left;
+                            const y = e.clientY - rect.top;
+                            rangeIndicator.style.left = `${x + rect.left}px`;
+                            rangeIndicator.style.top = `${y + rect.top}px`;
+                        };
+                        canvas.addEventListener('mousemove', updateRangeIndicator);
+                        // 当取消选择或放置塔时移除事件监听器
+                        const cancelSelection = () => {
+                            canvas.removeEventListener('mousemove', updateRangeIndicator);
+                            rangeIndicator.remove();
+                        };
+                        canvas.addEventListener('click', cancelSelection, { once: true });
+                    }
+                });
+            });
+            // 开始波次按钮点击事件
+            startWaveButton.addEventListener('click', startWave);
+            // 初始化并开始游戏
+            initPath();
+            gameLoop();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/carrotprotection" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>