carrotprotection

Running

File size: 40,444 Bytes

da78402

<!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>