<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bloons Tower Defense 3 Clone</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow: hidden;
        }
        
        .game-container {
            width: 900px;
            background: rgba(15, 25, 45, 0.9);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            border: 3px solid #4a86e8;
        }
        
        .game-header {
            background: linear-gradient(to right, #e52d27, #b31217);
            color: white;
            padding: 15px;
            text-align: center;
            border-bottom: 4px solid #ffcc00;
        }
        
        .game-header h1 {
            font-size: 2.5rem;
            text-shadow: 3px 3px 0 #000;
            letter-spacing: 2px;
        }
        
        .game-body {
            display: flex;
        }
        
        .game-ui {
            width: 200px;
            background: rgba(30, 40, 60, 0.8);
            padding: 15px;
            border-right: 3px solid #4a86e8;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .stats {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 15px;
            color: white;
            border: 2px solid #ffcc00;
        }
        
        .stats h2 {
            text-align: center;
            margin-bottom: 15px;
            color: #ffcc00;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .towers {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 15px;
            color: white;
            border: 2px solid #ffcc00;
        }
        
        .towers h2 {
            text-align: center;
            margin-bottom: 15px;
            color: #ffcc00;
        }
        
        .tower-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .tower {
            background: linear-gradient(to bottom, #4a86e8, #1c4587);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            border: 2px solid #ffcc00;
            transition: all 0.2s;
        }
        
        .tower:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
        }
        
        .tower img {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
        }
        
        .tower h3 {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        
        .tower .cost {
            font-weight: bold;
            color: #ffcc00;
        }
        
        .game-board {
            flex: 1;
            position: relative;
            background: #0a1929;
            height: 600px;
            overflow: hidden;
        }
        
        #game-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .path {
            position: absolute;
            background: rgba(139, 69, 19, 0.7);
            border: 3px solid #5d4037;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-top: 3px solid #4a86e8;
        }
        
        button {
            padding: 12px 25px;
            font-size: 1.1rem;
            background: linear-gradient(to bottom, #ffcc00, #ff9800);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            color: #1a2a6c;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 204, 0, 0.6);
        }
        
        .message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            border: 3px solid #ffcc00;
            z-index: 100;
            display: none;
        }
        
        .message h2 {
            color: #ffcc00;
            margin-bottom: 20px;
            font-size: 2rem;
        }
        
        .bloon {
            position: absolute;
            border-radius: 50%;
        }
        
        .tower-base {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .tower-img {
            width: 30px;
            height: 30px;
        }
        
        .projectile {
            position: absolute;
            border-radius: 50%;
        }
        
        .instructions {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 15px;
            color: white;
            margin-top: 15px;
            border: 2px solid #ffcc00;
        }
        
        .instructions h3 {
            color: #ffcc00;
            margin-bottom: 10px;
        }
        
        .instructions p {
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <h1>BLOONS TOWER DEFENSE 3</h1>
        </div>
        <div class="game-body">
            <div class="game-ui">
                <div class="stats">
                    <h2>GAME STATS</h2>
                    <div class="stat-item">
                        <span>Round:</span>
                        <span id="round">1</span>
                    </div>
                    <div class="stat-item">
                        <span>Lives:</span>
                        <span id="lives">100</span>
                    </div>
                    <div class="stat-item">
                        <span>Money:</span>
                        <span id="money">$650</span>
                    </div>
                    <div class="stat-item">
                        <span>Bloons Popped:</span>
                        <span id="popped">0</span>
                    </div>
                </div>
                
                <div class="towers">
                    <h2>TOWERS</h2>
                    <div class="tower-list">
                        <div class="tower" data-type="dart" data-cost="200">
                            <div class="tower-img" style="background: #ff6b6b; border-radius: 50%;"></div>
                            <h3>Dart Monkey</h3>
                            <div class="cost">$200</div>
                        </div>
                        <div class="tower" data-type="tack" data-cost="350">
                            <div class="tower-img" style="background: #4ecdc4; border-radius: 50%;"></div>
                            <h3>Tack Shooter</h3>
                            <div class="cost">$350</div>
                        </div>
                        <div class="tower" data-type="ice" data-cost="500">
                            <div class="tower-img" style="background: #a7c5ff; border-radius: 50%;"></div>
                            <h3>Ice Tower</h3>
                            <div class="cost">$500</div>
                        </div>
                        <div class="tower" data-type="bomb" data-cost="600">
                            <div class="tower-img" style="background: #ff9a76; border-radius: 50%;"></div>
                            <h3>Bomb Tower</h3>
                            <div class="cost">$600</div>
                        </div>
                    </div>
                </div>
                
                <div class="instructions">
                    <h3>HOW TO PLAY</h3>
                    <p>1. Click on a tower to select it</p>
                    <p>2. Click on the map to place it</p>
                    <p>3. Towers automatically attack bloons</p>
                    <p>4. Stop bloons from reaching the end!</p>
                </div>
            </div>
            
            <div class="game-board">
                <canvas id="game-canvas" width="700" height="600"></canvas>
                
                <div class="message" id="message">
                    <h2 id="message-title">GAME OVER</h2>
                    <p id="message-text">All bloons have reached the end!</p>
                    <button id="restart-btn">Play Again</button>
                </div>
            </div>
        </div>
        
        <div class="controls">
            <button id="start-btn">Start Round</button>
            <button id="fast-btn">Fast Forward (2x)</button>
            <button id="upgrade-btn">Upgrade Tower ($500)</button>
        </div>
    </div>

    <script>
        // Game constants
        const BLOON_TYPES = [
            { color: '#ff5252', health: 1, speed: 1.5, value: 1 }, // Red
            { color: '#42a5f5', health: 2, speed: 1.7, value: 2 }, // Blue
            { color: '#66bb6a', health: 3, speed: 1.9, value: 3 }, // Green
            { color: '#ffca28', health: 4, speed: 2.0, value: 4 }, // Yellow
            { color: '#ef5350', health: 5, speed: 2.2, value: 5 }  // Pink
        ];
        
        const TOWER_TYPES = {
            dart: { color: '#ff6b6b', range: 120, damage: 1, fireRate: 1000, cost: 200 },
            tack: { color: '#4ecdc4', range: 80, damage: 1, fireRate: 800, cost: 350 },
            ice: { color: '#a7c5ff', range: 100, damage: 1, fireRate: 1500, cost: 500 },
            bomb: { color: '#ff9a76', range: 90, damage: 3, fireRate: 2000, cost: 600 }
        };
        
        // Game state
        const gameState = {
            round: 1,
            lives: 100,
            money: 650,
            bloonsPopped: 0,
            gameStarted: false,
            gameOver: false,
            selectedTower: null,
            towers: [],
            bloons: [],
            projectiles: [],
            path: [],
            spawnInterval: null,
            fastMode: false,
            bloonsSpawned: 0,
            bloonsThisRound: 10
        };
        
        // Canvas setup
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        
        // Generate a winding path
        function generatePath() {
            const path = [];
            path.push({x: -40, y: 300});
            path.push({x: 100, y: 300});
            path.push({x: 200, y: 200});
            path.push({x: 350, y: 200});
            path.push({x: 450, y: 300});
            path.push({x: 450, y: 450});
            path.push({x: 350, y: 500});
            path.push({x: 200, y: 500});
            path.push({x: 100, y: 400});
            path.push({x: 100, y: 300});
            path.push({x: 150, y: 250});
            path.push({x: 250, y: 250});
            path.push({x: 350, y: 350});
            path.push({x: 600, y: 350});
            path.push({x: 750, y: 350});
            return path;
        }
        
        // Initialize game
        function initGame() {
            gameState.path = generatePath();
            gameState.round = 1;
            gameState.lives = 100;
            gameState.money = 650;
            gameState.bloonsPopped = 0;
            gameState.gameStarted = false;
            gameState.gameOver = false;
            gameState.towers = [];
            gameState.bloons = [];
            gameState.projectiles = [];
            gameState.bloonsSpawned = 0;
            gameState.bloonsThisRound = 10 + gameState.round * 2;
            
            document.getElementById('round').textContent = gameState.round;
            document.getElementById('lives').textContent = gameState.lives;
            document.getElementById('money').textContent = '$' + gameState.money;
            document.getElementById('popped').textContent = gameState.bloonsPopped;
            document.getElementById('message').style.display = 'none';
            
            draw();
        }
        
        // Draw the game
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw background grid
            ctx.strokeStyle = 'rgba(100, 150, 255, 0.1)';
            ctx.lineWidth = 1;
            
            for (let x = 0; x < canvas.width; x += 40) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }
            
            for (let y = 0; y < canvas.height; y += 40) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
            
            // Draw path
            ctx.strokeStyle = '#8b4511';
            ctx.lineWidth = 40;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            ctx.beginPath();
            
            gameState.path.forEach((point, index) => {
                if (index === 0) {
                    ctx.moveTo(point.x, point.y);
                } else {
                    ctx.lineTo(point.x, point.y);
                }
            });
            
            ctx.stroke();
            
            // Draw end point
            const endPoint = gameState.path[gameState.path.length - 1];
            ctx.fillStyle = '#ff5252';
            ctx.beginPath();
            ctx.arc(endPoint.x, endPoint.y, 20, 0, Math.PI * 2);
            ctx.fill();
            
            // Draw towers
            gameState.towers.forEach(tower => {
                ctx.fillStyle = TOWER_TYPES[tower.type].color;
                ctx.beginPath();
                ctx.arc(tower.x, tower.y, 20, 0, Math.PI * 2);
                ctx.fill();
                
                // Draw range circle (if selected)
                if (tower.selected) {
                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(tower.x, tower.y, TOWER_TYPES[tower.type].range, 0, Math.PI * 2);
                    ctx.stroke();
                }
                
                // Draw tower details
                ctx.fillStyle = 'white';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(tower.type.charAt(0).toUpperCase(), tower.x, tower.y + 5);
            });
            
            // Draw projectiles
            gameState.projectiles.forEach(projectile => {
                ctx.fillStyle = '#ffffff';
                ctx.beginPath();
                ctx.arc(projectile.x, projectile.y, 4, 0, Math.PI * 2);
                ctx.fill();
            });
            
            // Draw bloons
            gameState.bloons.forEach(bloon => {
                ctx.fillStyle = bloon.color;
                ctx.beginPath();
                ctx.arc(bloon.x, bloon.y, bloon.radius, 0, Math.PI * 2);
                ctx.fill();
                
                // Draw bloon health
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(bloon.health, bloon.x, bloon.y + 3);
            });
            
            // Draw selected tower placement
            if (gameState.selectedTower) {
                ctx.fillStyle = TOWER_TYPES[gameState.selectedTower].color;
                ctx.globalAlpha = 0.7;
                ctx.beginPath();
                ctx.arc(mousePos.x, mousePos.y, 20, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1.0;
            }
            
            requestAnimationFrame(draw);
        }
        
        // Spawn a new bloon
        function spawnBloon() {
            if (gameState.bloonsSpawned < gameState.bloonsThisRound) {
                const bloonType = BLOON_TYPES[Math.min(gameState.round - 1, BLOON_TYPES.length - 1)];
                gameState.bloons.push({
                    x: gameState.path[0].x,
                    y: gameState.path[0].y,
                    color: bloonType.color,
                    health: bloonType.health,
                    maxHealth: bloonType.health,
                    speed: bloonType.speed,
                    value: bloonType.value,
                    radius: 15,
                    pathIndex: 0
                });
                gameState.bloonsSpawned++;
            } else {
                clearInterval(gameState.spawnInterval);
            }
        }
        
        // Update bloons
        function updateBloons() {
            for (let i = gameState.bloons.length - 1; i >= 0; i--) {
                const bloon = gameState.bloons[i];
                
                // Move bloon along path
                const nextPoint = gameState.path[bloon.pathIndex + 1];
                if (nextPoint) {
                    const dx = nextPoint.x - bloon.x;
                    const dy = nextPoint.y - bloon.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < bloon.speed) {
                        bloon.pathIndex++;
                    } else {
                        bloon.x += (dx / distance) * bloon.speed;
                        bloon.y += (dy / distance) * bloon.speed;
                    }
                } else {
                    // Bloon reached the end
                    gameState.lives -= bloon.value;
                    document.getElementById('lives').textContent = gameState.lives;
                    gameState.bloons.splice(i, 1);
                    
                    if (gameState.lives <= 0) {
                        gameState.lives = 0;
                        endGame(false);
                    }
                    
                    continue;
                }
                
                // Check if bloon is dead
                if (bloon.health <= 0) {
                    gameState.money += bloon.value * 10;
                    gameState.bloonsPopped++;
                    document.getElementById('money').textContent = '$' + gameState.money;
                    document.getElementById('popped').textContent = gameState.bloonsPopped;
                    gameState.bloons.splice(i, 1);
                }
            }
        }
        
        // Update towers
        function updateTowers() {
            const now = Date.now();
            
            gameState.towers.forEach(tower => {
                // Find target bloon
                let closest = null;
                let minDist = Infinity;
                
                gameState.bloons.forEach(bloon => {
                    const dx = bloon.x - tower.x;
                    const dy = bloon.y - tower.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    
                    if (dist < TOWER_TYPES[tower.type].range && dist < minDist) {
                        minDist = dist;
                        closest = bloon;
                    }
                });
                
                // Shoot at target
                if (closest && now - tower.lastShot > TOWER_TYPES[tower.type].fireRate) {
                    tower.lastShot = now;
                    
                    gameState.projectiles.push({
                        x: tower.x,
                        y: tower.y,
                        target: closest,
                        damage: TOWER_TYPES[tower.type].damage,
                        speed: 5
                    });
                }
            });
        }
        
        // Update projectiles
        function updateProjectiles() {
            for (let i = gameState.projectiles.length - 1; i >= 0; i--) {
                const projectile = gameState.projectiles[i];
                
                if (!projectile.target) {
                    gameState.projectiles.splice(i, 1);
                    continue;
                }
                
                // Move projectile
                const dx = projectile.target.x - projectile.x;
                const dy = projectile.target.y - projectile.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < projectile.speed) {
                    // Hit target
                    projectile.target.health -= projectile.damage;
                    gameState.projectiles.splice(i, 1);
                } else {
                    projectile.x += (dx / distance) * projectile.speed;
                    projectile.y += (dy / distance) * projectile.speed;
                }
            }
        }
        
        // Game loop
        function gameLoop() {
            if (!gameState.gameStarted || gameState.gameOver) return;
            
            updateBloons();
            updateTowers();
            updateProjectiles();
            
            // Check if round is over
            if (gameState.bloons.length === 0 && gameState.bloonsSpawned >= gameState.bloonsThisRound) {
                if (gameState.lives > 0) {
                    nextRound();
                }
            }
        }
        
        // Start next round
        function nextRound() {
            gameState.round++;
            gameState.bloonsSpawned = 0;
            gameState.bloonsThisRound = 10 + gameState.round * 2;
            document.getElementById('round').textContent = gameState.round;
            
            gameState.spawnInterval = setInterval(spawnBloon, 1000);
        }
        
        // End game
        function endGame(win) {
            gameState.gameOver = true;
            gameState.gameStarted = false;
            
            const message = document.getElementById('message');
            const title = document.getElementById('message-title');
            const text = document.getElementById('message-text');
            
            message.style.display = 'block';
            
            if (win) {
                title.textContent = 'VICTORY!';
                text.textContent = `You defended against ${gameState.round} rounds!`;
            } else {
                title.textContent = 'GAME OVER';
                text.textContent = 'Bloons reached the end of the path!';
            }
        }
        
        // Place tower
        function placeTower(x, y) {
            if (!gameState.selectedTower) return;
            if (gameState.money < TOWER_TYPES[gameState.selectedTower].cost) return;
            
            // Check if position is valid (not on path)
            const onPath = gameState.path.some(point => {
                const dx = point.x - x;
                const dy = point.y - y;
                return Math.sqrt(dx * dx + dy * dy) < 40;
            });
            
            if (onPath) return;
            
            // Check if too close to another tower
            const tooClose = gameState.towers.some(tower => {
                const dx = tower.x - x;
                const dy = tower.y - y;
                return Math.sqrt(dx * dx + dy * dy) < 50;
            });
            
            if (tooClose) return;
            
            // Place tower
            gameState.towers.push({
                x: x,
                y: y,
                type: gameState.selectedTower,
                lastShot: 0,
                selected: false
            });
            
            gameState.money -= TOWER_TYPES[gameState.selectedTower].cost;
            document.getElementById('money').textContent = '$' + gameState.money;
            
            gameState.selectedTower = null;
        }
        
        // Upgrade selected tower
        function upgradeSelectedTower() {
            if (gameState.money < 500) return;
            
            const selectedTower = gameState.towers.find(t => t.selected);
            if (selectedTower) {
                selectedTower.damage = (selectedTower.damage || 1) + 1;
                selectedTower.range += 20;
                gameState.money -= 500;
                document.getElementById('money').textContent = '$' + gameState.money;
            }
        }
        
        // Mouse position tracking
        const mousePos = {x: 0, y: 0};
        
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            mousePos.x = e.clientX - rect.left;
            mousePos.y = e.clientY - rect.top;
        });
        
        canvas.addEventListener('click', (e) => {
            if (gameState.gameOver) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            if (gameState.selectedTower) {
                placeTower(x, y);
            } else {
                // Check if clicked on a tower
                let clickedTower = false;
                gameState.towers.forEach(tower => {
                    const dx = tower.x - x;
                    const dy = tower.y - y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    
                    if (dist < 20) {
                        tower.selected = !tower.selected;
                        clickedTower = true;
                    } else {
                        tower.selected = false;
                    }
                });
                
                if (!clickedTower) {
                    gameState.towers.forEach(t => t.selected = false);
                }
            }
        });
        
        // Tower selection
        document.querySelectorAll('.tower').forEach(tower => {
            tower.addEventListener('click', () => {
                gameState.selectedTower = tower.dataset.type;
                gameState.towers.forEach(t => t.selected = false);
            });
        });
        
        // Button event listeners
        document.getElementById('start-btn').addEventListener('click', () => {
            if (!gameState.gameStarted) {
                gameState.gameStarted = true;
                gameState.spawnInterval = setInterval(spawnBloon, 1000);
            }
        });
        
        document.getElementById('fast-btn').addEventListener('click', () => {
            gameState.fastMode = !gameState.fastMode;
            document.getElementById('fast-btn').textContent = 
                gameState.fastMode ? 'Normal Speed' : 'Fast Forward (2x)';
        });
        
        document.getElementById('upgrade-btn').addEventListener('click', upgradeSelectedTower);
        document.getElementById('restart-btn').addEventListener('click', initGame);
        
        // Initialize game
        initGame();
        
        // Start game loop
        setInterval(gameLoop, 1000 / 60);
        setInterval(gameLoop, gameState.fastMode ? 1000 / 120 : 1000 / 60);
    </script>
</body>
</html>

Fix this do it works