Spaces:

Phoenixoni
/

tower

Running

App Files Files Community

Phoenixoni commited on Apr 17, 2025

Commit

717a85c

verified ·

1 Parent(s): ae71461

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +961 -19
prompts.txt +2 -0

README.md CHANGED Viewed

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

 ---
+title: tower
+emoji: 🐳
+colorFrom: red
+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,961 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fantasy Tower Defense</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes moveEnemy {
+            to {
+                background-position: -512px 0;
+            }
+        }
+        .enemy {
+            width: 32px;
+            height: 32px;
+            background-image: url('https://i.imgur.com/Jj7Zq9G.png');
+            animation: moveEnemy 0.8s steps(16) infinite;
+            position: absolute;
+            z-index: 10;
+            transition: left 0.1s linear, top 0.1s linear;
+        }
+        .tower {
+            width: 48px;
+            height: 48px;
+            background-image: url('https://i.imgur.com/Q9ZvZLQ.png');
+            background-position: 0 0;
+            position: absolute;
+            z-index: 5;
+        }
+        .projectile {
+            width: 16px;
+            height: 16px;
+            background-color: #f00;
+            border-radius: 50%;
+            position: absolute;
+            z-index: 8;
+        }
+        .path {
+            background-color: #8B4513;
+            background-image: url('https://i.imgur.com/5XQ3y9j.png');
+            background-size: cover;
+        }
+        .grass {
+            background-color: #7CFC00;
+            background-image: url('https://i.imgur.com/4ZQ3y9j.png');
+            background-size: cover;
+        }
+        .buildable {
+            background-color: #3a7d44;
+            background-image: url('https://i.imgur.com/6XQ3y9j.png');
+            background-size: cover;
+            cursor: pointer;
+        }
+        .buildable:hover {
+            filter: brightness(1.2);
+            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
+        }
+        .game-grid {
+            display: grid;
+            grid-template-columns: repeat(20, 32px);
+            grid-template-rows: repeat(15, 32px);
+            gap: 1px;
+            background-color: #333;
+        }
+        .tower-range {
+            position: absolute;
+            border-radius: 50%;
+            background-color: rgba(0, 100, 255, 0.2);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: 2;
+        }
+        .health-bar {
+            height: 4px;
+            background-color: red;
+            position: absolute;
+            top: -6px;
+            left: 0;
+            width: 100%;
+        }
+        .upgrade-btn {
+            transition: all 0.2s;
+        }
+        .upgrade-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 10px gold;
+        }
+        #game-container {
+            perspective: 1000px;
+        }
+        #game-board {
+            transform-style: preserve-3d;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+        }
+        .start-point {
+            background-color: #ff0000;
+            background-image: url('https://i.imgur.com/7XQ3y9j.png');
+            background-size: cover;
+        }
+        .end-point {
+            background-color: #0000ff;
+            background-image: url('https://i.imgur.com/8XQ3y9j.png');
+            background-size: cover;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-mono">
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-red-500">
+            <i class="fas fa-fort-awesome-alt mr-2"></i> Fantasy Tower Defense
+        </h1>
+        <div class="flex flex-col lg:flex-row gap-6">
+            <!-- Game Board -->
+            <div id="game-container" class="flex-1">
+                <div id="game-board" class="game-grid relative overflow-hidden border-4 border-yellow-700 rounded-lg bg-gray-800">
+                    <!-- Grid will be generated by JavaScript -->
+                </div>
+            </div>
+            <!-- Game Controls -->
+            <div class="w-full lg:w-64 bg-gray-800 p-4 rounded-lg border-2 border-gray-700">
+                <div class="flex justify-between items-center mb-4">
+                    <div>
+                        <div class="text-xl font-bold text-yellow-400">Wave: <span id="wave">1</span></div>
+                        <div class="text-sm text-gray-300">Enemies: <span id="enemies-left">0</span></div>
+                    </div>
+                    <div class="text-right">
+                        <div class="text-xl font-bold text-green-400">$<span id="money">150</span></div>
+                        <div class="text-sm text-gray-300">Lives: <span id="lives">20</span></div>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <div class="h-2 bg-gray-700 rounded-full">
+                        <div id="wave-progress" class="h-2 bg-blue-500 rounded-full" style="width: 0%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs mt-1">
+                        <span>Wave Progress</span>
+                        <span id="wave-timer">30s</span>
+                    </div>
+                </div>
+                <button id="start-wave" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-bold mb-4 transition-all">
+                    <i class="fas fa-play mr-2"></i> Start Wave
+                </button>
+                <div class="mb-4">
+                    <h3 class="font-bold text-lg border-b border-gray-700 pb-2 mb-2">Towers</h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="tower-btn bg-blue-800 hover:bg-blue-700 p-2 rounded-lg" data-type="arrow" data-cost="100">
+                            <div class="text-center">
+                                <i class="fas fa-arrow-up text-xl mb-1"></i>
+                                <div>Arrow Tower</div>
+                                <div class="text-xs">$100</div>
+                            </div>
+                        </button>
+                        <button class="tower-btn bg-red-800 hover:bg-red-700 p-2 rounded-lg" data-type="cannon" data-cost="150">
+                            <div class="text-center">
+                                <i class="fas fa-bomb text-xl mb-1"></i>
+                                <div>Cannon Tower</div>
+                                <div class="text-xs">$150</div>
+                            </div>
+                        </button>
+                        <button class="tower-btn bg-purple-800 hover:bg-purple-700 p-2 rounded-lg" data-type="magic" data-cost="200">
+                            <div class="text-center">
+                                <i class="fas fa-magic text-xl mb-1"></i>
+                                <div>Magic Tower</div>
+                                <div class="text-xs">$200</div>
+                            </div>
+                        </button>
+                        <button class="tower-btn bg-yellow-800 hover:bg-yellow-700 p-2 rounded-lg" data-type="gold" data-cost="300">
+                            <div class="text-center">
+                                <i class="fas fa-coins text-xl mb-1"></i>
+                                <div>Gold Tower</div>
+                                <div class="text-xs">$300</div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+                <div id="tower-info" class="hidden bg-gray-700 p-3 rounded-lg border border-gray-600">
+                    <h4 class="font-bold mb-2 flex justify-between">
+                        <span id="tower-name">Tower</span>
+                        <button id="sell-tower" class="text-xs bg-red-600 hover:bg-red-700 px-2 py-1 rounded">Sell ($<span id="sell-price">0</span>)</button>
+                    </h4>
+                    <div class="text-sm mb-2">
+                        <div>Level: <span id="tower-level">1</span></div>
+                        <div>Damage: <span id="tower-damage">10</span></div>
+                        <div>Range: <span id="tower-range">3</span></div>
+                        <div>Speed: <span id="tower-speed">1.5</span>s</div>
+                    </div>
+                    <button id="upgrade-tower" class="upgrade-btn w-full bg-yellow-600 hover:bg-yellow-700 text-white py-1 px-3 rounded text-sm">
+                        Upgrade ($<span id="upgrade-cost">50</span>)
+                    </button>
+                </div>
+                <div class="mt-4 text-sm text-gray-400">
+                    <p><i class="fas fa-info-circle mr-1"></i> Click on green buildable tiles to place towers</p>
+                    <p><i class="fas fa-info-circle mr-1"></i> Click on a tower to upgrade it</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            money: 150,
+            lives: 20,
+            wave: 1,
+            waveActive: false,
+            waveTimer: 30,
+            selectedTowerType: null,
+            selectedTower: null,
+            towers: [],
+            enemies: [],
+            projectiles: [],
+            path: [],
+            waypoints: [],
+            buildableTiles: []
+        };
+        // Tower Types
+        const towerTypes = {
+            arrow: {
+                name: "Arrow Tower",
+                damage: 10,
+                range: 3,
+                speed: 1.5,
+                cost: 100,
+                color: "blue",
+                upgradeCost: 50,
+                damageIncrement: 5,
+                rangeIncrement: 0.5,
+                speedIncrement: -0.2
+            },
+            cannon: {
+                name: "Cannon Tower",
+                damage: 25,
+                range: 2.5,
+                speed: 2.5,
+                cost: 150,
+                color: "red",
+                upgradeCost: 75,
+                damageIncrement: 10,
+                rangeIncrement: 0.3,
+                speedIncrement: -0.3
+            },
+            magic: {
+                name: "Magic Tower",
+                damage: 15,
+                range: 3.5,
+                speed: 1.8,
+                cost: 200,
+                color: "purple",
+                upgradeCost: 100,
+                damageIncrement: 7,
+                rangeIncrement: 0.4,
+                speedIncrement: -0.15
+            },
+            gold: {
+                name: "Gold Tower",
+                damage: 8,
+                range: 2,
+                speed: 1,
+                cost: 300,
+                color: "yellow",
+                upgradeCost: 150,
+                damageIncrement: 4,
+                rangeIncrement: 0.2,
+                speedIncrement: -0.05,
+                moneyPerShot: 1
+            }
+        };
+        // Enemy Types
+        const enemyTypes = [
+            { name: "Goblin", health: 50, speed: 1, reward: 10, spriteY: 0 },
+            { name: "Orc", health: 100, speed: 0.8, reward: 20, spriteY: -32 },
+            { name: "Troll", health: 200, speed: 0.6, reward: 40, spriteY: -64 },
+            { name: "Dragon", health: 500, speed: 0.5, reward: 100, spriteY: -96 }
+        ];
+        // Initialize Game Board
+        const gameBoard = document.getElementById('game-board');
+        const gridWidth = 20;
+        const gridHeight = 15;
+        const cellSize = 32;
+        // Generate path and buildable areas
+        function generatePath() {
+            const path = [];
+            const waypoints = [];
+            const buildableTiles = [];
+            // Start at top middle (red)
+            let x = 9, y = 0;
+            path.push({x, y});
+            waypoints.push({x, y});
+            // Go down
+            for (y = 1; y < 5; y++) {
+                path.push({x, y});
+            }
+            waypoints.push({x, y-1});
+            // Go right
+            for (x = 10; x < 15; x++) {
+                path.push({x, y-1});
+            }
+            waypoints.push({x-1, y-1});
+            // Go down
+            for (y = 5; y < 10; y++) {
+                path.push({x-1, y});
+            }
+            waypoints.push({x-1, y-1});
+            // Go left
+            for (x = 14; x > 5; x--) {
+                path.push({x, y-1});
+            }
+            waypoints.push({x+1, y-1});
+            // Go down to exit (blue)
+            for (y = 10; y < 15; y++) {
+                path.push({x+1, y});
+            }
+            waypoints.push({x+1, y-1});
+            // Generate buildable areas (not on path)
+            for (let y = 0; y < gridHeight; y++) {
+                for (let x = 0; x < gridWidth; x++) {
+                    const isPath = path.some(point => point.x === x && point.y === y);
+                    if (!isPath) {
+                        // Check if tile is adjacent to path (for better gameplay)
+                        const adjacentToPath =
+                            path.some(point =>
+                                (point.x === x && Math.abs(point.y - y) === 1) ||
+                                (point.y === y && Math.abs(point.x - x) === 1)
+                            );
+                        if (adjacentToPath) {
+                            buildableTiles.push({x, y});
+                        }
+                    }
+                }
+            }
+            gameState.path = path;
+            gameState.waypoints = waypoints;
+            gameState.buildableTiles = buildableTiles;
+            renderGrid();
+        }
+        // Render grid
+        function renderGrid() {
+            gameBoard.innerHTML = '';
+            // Create grid cells
+            for (let y = 0; y < gridHeight; y++) {
+                for (let x = 0; x < gridWidth; x++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'w-8 h-8';
+                    cell.dataset.x = x;
+                    cell.dataset.y = y;
+                    // Check if this cell is part of the path
+                    const isPath = gameState.path.some(point => point.x === x && point.y === y);
+                    const isBuildable = gameState.buildableTiles.some(point => point.x === x && point.y === y);
+                    if (isPath) {
+                        // Check if start or end point
+                        if (x === 9 && y === 0) {
+                            cell.classList.add('start-point');
+                        } else if (x === 6 && y === 14) {
+                            cell.classList.add('end-point');
+                        } else {
+                            cell.classList.add('path');
+                        }
+                    } else if (isBuildable) {
+                        cell.classList.add('buildable');
+                        cell.addEventListener('click', () => placeTower(x, y));
+                    } else {
+                        cell.classList.add('grass');
+                    }
+                    gameBoard.appendChild(cell);
+                }
+            }
+        }
+        // Place tower
+        function placeTower(x, y) {
+            if (gameState.selectedTowerType && !gameState.waveActive) {
+                const towerType = towerTypes[gameState.selectedTowerType];
+                if (gameState.money >= towerType.cost) {
+                    gameState.money -= towerType.cost;
+                    updateMoney();
+                    const tower = {
+                        type: gameState.selectedTowerType,
+                        x: x,
+                        y: y,
+                        level: 1,
+                        damage: towerType.damage,
+                        range: towerType.range,
+                        speed: towerType.speed,
+                        lastShot: 0,
+                        element: null,
+                        rangeElement: null
+                    };
+                    gameState.towers.push(tower);
+                    renderTower(tower);
+                    // Deselect tower type after placement
+                    gameState.selectedTowerType = null;
+                    document.querySelectorAll('.tower-btn').forEach(btn => {
+                        btn.classList.remove('ring-2', 'ring-yellow-400');
+                    });
+                } else {
+                    showMessage("Not enough money!");
+                }
+            }
+        }
+        // Render tower
+        function renderTower(tower) {
+            const towerElement = document.createElement('div');
+            towerElement.className = 'tower';
+            towerElement.style.left = `${tower.x * cellSize}px`;
+            towerElement.style.top = `${tower.y * cellSize}px`;
+            // Add color based on tower type
+            towerElement.style.filter = `hue-rotate(${getTowerHue(tower.type)}deg)`;
+            towerElement.addEventListener('click', (e) => {
+                e.stopPropagation();
+                selectTower(tower);
+            });
+            // Create range indicator
+            const rangeElement = document.createElement('div');
+            rangeElement.className = 'tower-range';
+            rangeElement.style.width = `${tower.range * cellSize * 2}px`;
+            rangeElement.style.height = `${tower.range * cellSize * 2}px`;
+            rangeElement.style.left = `${(tower.x + 0.5) * cellSize}px`;
+            rangeElement.style.top = `${(tower.y + 0.5) * cellSize}px`;
+            rangeElement.style.display = 'none';
+            gameBoard.appendChild(towerElement);
+            gameBoard.appendChild(rangeElement);
+            tower.element = towerElement;
+            tower.rangeElement = rangeElement;
+        }
+        function getTowerHue(type) {
+            switch(type) {
+                case 'arrow': return 200; // blue
+                case 'cannon': return 0; // red
+                case 'magic': return 270; // purple
+                case 'gold': return 50; // yellow
+                default: return 0;
+            }
+        }
+        // Select tower
+        function selectTower(tower) {
+            if (gameState.waveActive) return;
+            // Deselect previous tower
+            if (gameState.selectedTower) {
+                gameState.selectedTower.rangeElement.style.display = 'none';
+            }
+            gameState.selectedTower = tower;
+            tower.rangeElement.style.display = 'block';
+            // Update tower info panel
+            const towerType = towerTypes[tower.type];
+            document.getElementById('tower-info').classList.remove('hidden');
+            document.getElementById('tower-name').textContent = towerType.name;
+            document.getElementById('tower-level').textContent = tower.level;
+            document.getElementById('tower-damage').textContent = tower.damage;
+            document.getElementById('tower-range').textContent = tower.range;
+            document.getElementById('tower-speed').textContent = tower.speed;
+            // Calculate upgrade cost
+            const upgradeCost = towerType.upgradeCost * tower.level;
+            document.getElementById('upgrade-cost').textContent = upgradeCost;
+            // Calculate sell price (50% of total invested)
+            const totalInvested = towerType.cost + (tower.level - 1) * upgradeCost;
+            const sellPrice = Math.floor(totalInvested * 0.7);
+            document.getElementById('sell-price').textContent = sellPrice;
+        }
+        // Upgrade tower
+        document.getElementById('upgrade-tower').addEventListener('click', function() {
+            if (!gameState.selectedTower) return;
+            const tower = gameState.selectedTower;
+            const towerType = towerTypes[tower.type];
+            const upgradeCost = towerType.upgradeCost * tower.level;
+            if (gameState.money >= upgradeCost) {
+                gameState.money -= upgradeCost;
+                updateMoney();
+                tower.level++;
+                tower.damage += towerType.damageIncrement;
+                tower.range += towerType.rangeIncrement;
+                tower.speed += towerType.speedIncrement;
+                // Update tower info
+                document.getElementById('tower-level').textContent = tower.level;
+                document.getElementById('tower-damage').textContent = tower.damage;
+                document.getElementById('tower-range').textContent = tower.range;
+                document.getElementById('tower-speed').textContent = tower.speed;
+                // Update range indicator
+                tower.rangeElement.style.width = `${tower.range * cellSize * 2}px`;
+                tower.rangeElement.style.height = `${tower.range * cellSize * 2}px`;
+                // Update upgrade cost for next level
+                const newUpgradeCost = towerType.upgradeCost * tower.level;
+                document.getElementById('upgrade-cost').textContent = newUpgradeCost;
+                // Update sell price
+                const totalInvested = towerType.cost + (tower.level - 1) * upgradeCost;
+                const sellPrice = Math.floor(totalInvested * 0.7);
+                document.getElementById('sell-price').textContent = sellPrice;
+                showMessage(`Tower upgraded to level ${tower.level}!`);
+            } else {
+                showMessage("Not enough money for upgrade!");
+            }
+        });
+        // Sell tower
+        document.getElementById('sell-tower').addEventListener('click', function() {
+            if (!gameState.selectedTower) return;
+            const tower = gameState.selectedTower;
+            const towerType = towerTypes[tower.type];
+            const totalInvested = towerType.cost + (tower.level - 1) * towerType.upgradeCost * tower.level;
+            const sellPrice = Math.floor(totalInvested * 0.7);
+            gameState.money += sellPrice;
+            updateMoney();
+            // Remove tower elements
+            gameBoard.removeChild(tower.element);
+            gameBoard.removeChild(tower.rangeElement);
+            // Remove from towers array
+            gameState.towers = gameState.towers.filter(t => t !== tower);
+            // Hide tower info
+            document.getElementById('tower-info').classList.add('hidden');
+            gameState.selectedTower = null;
+            showMessage(`Tower sold for $${sellPrice}!`);
+        });
+        // Tower buttons
+        document.querySelectorAll('.tower-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                if (gameState.waveActive) return;
+                gameState.selectedTowerType = this.dataset.type;
+                // Update UI
+                document.querySelectorAll('.tower-btn').forEach(b => {
+                    b.classList.remove('ring-2', 'ring-yellow-400');
+                });
+                this.classList.add('ring-2', 'ring-yellow-400');
+                // Hide tower info if showing
+                document.getElementById('tower-info').classList.add('hidden');
+                if (gameState.selectedTower) {
+                    gameState.selectedTower.rangeElement.style.display = 'none';
+                    gameState.selectedTower = null;
+                }
+            });
+        });
+        // Start wave
+        document.getElementById('start-wave').addEventListener('click', startWave);
+        function startWave() {
+            if (gameState.waveActive) return;
+            gameState.waveActive = true;
+            document.getElementById('start-wave').disabled = true;
+            // Calculate number of enemies based on wave
+            const baseEnemies = 5;
+            const waveMultiplier = 1 + (gameState.wave - 1) * 0.3;
+            const totalEnemies = Math.floor(baseEnemies * waveMultiplier);
+            // Spawn enemies
+            let spawned = 0;
+            const spawnInterval = setInterval(() => {
+                if (spawned >= totalEnemies) {
+                    clearInterval(spawnInterval);
+                    return;
+                }
+                // Random enemy type (higher waves get stronger enemies)
+                let enemyTypeIndex = 0;
+                const random = Math.random();
+                if (gameState.wave > 10 && random < 0.1) {
+                    enemyTypeIndex = 3; // Dragon
+                } else if (gameState.wave > 5 && random < 0.3) {
+                    enemyTypeIndex = 2; // Troll
+                } else if (gameState.wave > 3 && random < 0.6) {
+                    enemyTypeIndex = 1; // Orc
+                }
+                spawnEnemy(enemyTypes[enemyTypeIndex]);
+                spawned++;
+                // Update enemies left
+                document.getElementById('enemies-left').textContent = gameState.enemies.length;
+            }, 1000);
+            // Wave timer
+            let timeLeft = 30;
+            const waveTimer = setInterval(() => {
+                timeLeft--;
+                document.getElementById('wave-timer').textContent = `${timeLeft}s`;
+                document.getElementById('wave-progress').style.width = `${(1 - timeLeft/30) * 100}%`;
+                if (timeLeft <= 0 || gameState.enemies.length === 0) {
+                    clearInterval(waveTimer);
+                    // Check if all enemies are dead
+                    if (gameState.enemies.length === 0) {
+                        endWave(true);
+                    }
+                }
+            }, 1000);
+        }
+        function endWave(success) {
+            gameState.waveActive = false;
+            document.getElementById('start-wave').disabled = false;
+            if (success) {
+                // Wave completed successfully
+                gameState.money += 100 + (gameState.wave * 20);
+                gameState.wave++;
+                updateMoney();
+                updateWave();
+                showMessage(`Wave ${gameState.wave-1} completed! Bonus: $${100 + (gameState.wave-1) * 20}`);
+            }
+            // Reset wave timer UI
+            document.getElementById('wave-timer').textContent = '30s';
+            document.getElementById('wave-progress').style.width = '0%';
+        }
+        function spawnEnemy(type) {
+            const enemy = {
+                type: type.name,
+                health: type.health,
+                maxHealth: type.health,
+                speed: type.speed,
+                reward: type.reward,
+                x: gameState.path[0].x,
+                y: gameState.path[0].y,
+                pathIndex: 0,
+                element: null,
+                healthBar: null
+            };
+            gameState.enemies.push(enemy);
+            renderEnemy(enemy);
+        }
+        function renderEnemy(enemy) {
+            const enemyElement = document.createElement('div');
+            enemyElement.className = 'enemy';
+            enemyElement.style.left = `${enemy.x * cellSize}px`;
+            enemyElement.style.top = `${enemy.y * cellSize}px`;
+            enemyElement.style.backgroundPositionY = `${enemyTypes.find(e => e.name === enemy.type).spriteY}px`;
+            // Health bar
+            const healthBar = document.createElement('div');
+            healthBar.className = 'health-bar';
+            enemyElement.appendChild(healthBar);
+            gameBoard.appendChild(enemyElement);
+            enemy.element = enemyElement;
+            enemy.healthBar = healthBar;
+        }
+        // Game loop
+        function gameLoop(timestamp) {
+            // Move enemies
+            gameState.enemies.forEach(enemy => {
+                if (enemy.pathIndex < gameState.path.length - 1) {
+                    const nextPoint = gameState.path[enemy.pathIndex + 1];
+                    const dx = nextPoint.x - enemy.x;
+                    const dy = nextPoint.y - enemy.y;
+                    // Normalize direction
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    const speed = 0.02 * enemy.speed;
+                    if (distance < speed) {
+                        // Reached next point
+                        enemy.x = nextPoint.x;
+                        enemy.y = nextPoint.y;
+                        enemy.pathIndex++;
+                        // Check if reached end
+                        if (enemy.pathIndex === gameState.path.length - 1) {
+                            // Enemy reached the end
+                            gameState.lives--;
+                            updateLives();
+                            // Remove enemy
+                            gameBoard.removeChild(enemy.element);
+                            gameState.enemies = gameState.enemies.filter(e => e !== enemy);
+                            if (gameState.lives <= 0) {
+                                gameOver();
+                            }
+                            return;
+                        }
+                    } else {
+                        // Move towards next point
+                        enemy.x += (dx / distance) * speed;
+                        enemy.y += (dy / distance) * speed;
+                    }
+                    // Update position
+                    enemy.element.style.left = `${enemy.x * cellSize}px`;
+                    enemy.element.style.top = `${enemy.y * cellSize}px`;
+                }
+            });
+            // Tower attacks
+            gameState.towers.forEach(tower => {
+                if (timestamp - tower.lastShot > tower.speed * 1000) {
+                    // Find closest enemy in range
+                    let closestEnemy = null;
+                    let minDistance = Infinity;
+                    gameState.enemies.forEach(enemy => {
+                        const dx = enemy.x - (tower.x + 0.5);
+                        const dy = enemy.y - (tower.y + 0.5);
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance <= tower.range && distance < minDistance) {
+                            closestEnemy = enemy;
+                            minDistance = distance;
+                        }
+                    });
+                    if (closestEnemy) {
+                        // Shoot at enemy
+                        shoot(tower, closestEnemy, timestamp);
+                        tower.lastShot = timestamp;
+                    }
+                }
+            });
+            // Move projectiles
+            gameState.projectiles.forEach((proj, index) => {
+                const dx = proj.targetX - proj.x;
+                const dy = proj.targetY - proj.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < 0.2) {
+                    // Hit target
+                    proj.target.health -= proj.damage;
+                    // Update health bar
+                    if (proj.target.healthBar) {
+                        const healthPercent = (proj.target.health / proj.target.maxHealth) * 100;
+                        proj.target.healthBar.style.width = `${healthPercent}%`;
+                        if (healthPercent > 50) {
+                            proj.target.healthBar.style.backgroundColor = 'green';
+                        } else if (healthPercent > 25) {
+                            proj.target.healthBar.style.backgroundColor = 'orange';
+                        } else {
+                            proj.target.healthBar.style.backgroundColor = 'red';
+                        }
+                    }
+                    // Check if enemy died
+                    if (proj.target.health <= 0) {
+                        gameState.money += proj.target.reward;
+                        updateMoney();
+                        gameBoard.removeChild(proj.target.element);
+                        gameState.enemies = gameState.enemies.filter(e => e !== proj.target);
+                        // Check if wave completed
+                        if (gameState.waveActive && gameState.enemies.length === 0) {
+                            endWave(true);
+                        }
+                    }
+                    // Remove projectile
+                    gameBoard.removeChild(proj.element);
+                    gameState.projectiles.splice(index, 1);
+                } else {
+                    // Move projectile
+                    const speed = 0.2;
+                    proj.x += (dx / distance) * speed;
+                    proj.y += (dy / distance) * speed;
+                    proj.element.style.left = `${proj.x * cellSize}px`;
+                    proj.element.style.top = `${proj.y * cellSize}px`;
+                }
+            });
+            requestAnimationFrame(gameLoop);
+        }
+        function shoot(tower, enemy, timestamp) {
+            const towerType = towerTypes[tower.type];
+            // Create projectile
+            const projectile = {
+                x: tower.x + 0.5,
+                y: tower.y + 0.5,
+                targetX: enemy.x + 0.5,
+                targetY: enemy.y + 0.5,
+                damage: tower.damage,
+                target: enemy,
+                element: null
+            };
+            // Special effects for tower types
+            if (tower.type === 'gold') {
+                // Gold tower earns money per shot
+                gameState.money += towerType.moneyPerShot;
+                updateMoney();
+            }
+            // Create projectile element
+            const projElement = document.createElement('div');
+            projElement.className = 'projectile';
+            // Color based on tower type
+            switch(tower.type) {
+                case 'arrow': projElement.style.backgroundColor = '#3498db'; break;
+                case 'cannon': projElement.style.backgroundColor = '#e74c3c'; break;
+                case 'magic': projElement.style.backgroundColor = '#9b59b6'; break;
+                case 'gold': projElement.style.backgroundColor = '#f1c40f'; break;
+            }
+            projElement.style.left = `${projectile.x * cellSize}px`;
+            projElement.style.top = `${projectile.y * cellSize}px`;
+            gameBoard.appendChild(projElement);
+            projectile.element = projElement;
+            gameState.projectiles.push(projectile);
+        }
+        function gameOver() {
+            showMessage("Game Over! Refresh to play again.");
+            gameState.waveActive = false;
+            document.getElementById('start-wave').disabled = true;
+        }
+        // UI Updates
+        function updateMoney() {
+            document.getElementById('money').textContent = gameState.money;
+        }
+        function updateLives() {
+            document.getElementById('lives').textContent = gameState.lives;
+            // Flash lives when low
+            if (gameState.lives <= 5) {
+                const livesEl = document.getElementById('lives');
+                livesEl.classList.add('text-red-500', 'animate-pulse');
+            } else {
+                document.getElementById('lives').classList.remove('text-red-500', 'animate-pulse');
+            }
+        }
+        function updateWave() {
+            document.getElementById('wave').textContent = gameState.wave;
+        }
+        function showMessage(msg) {
+            const message = document.createElement('div');
+            message.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-bounce';
+            message.textContent = msg;
+            document.body.appendChild(message);
+            setTimeout(() => {
+                message.classList.remove('animate-bounce');
+                message.classList.add('opacity-0', 'transition-opacity', 'duration-500');
+                setTimeout(() => document.body.removeChild(message), 500);
+            }, 2000);
+        }
+        // Initialize game
+        generatePath();
+        updateMoney();
+        updateLives();
+        updateWave();
+        // Start game loop
+        requestAnimationFrame(gameLoop);
+        // Helpers
+        document.addEventListener('click', function(e) {
+            // Click outside to deselect tower
+            if (!e.target.closest('#game-board') && !e.target.closest('.tower-btn') && !e.target.closest('#tower-info')) {
+                if (gameState.selectedTower) {
+                    gameState.selectedTower.rangeElement.style.display = 'none';
+                    gameState.selectedTower = null;
+                    document.getElementById('tower-info').classList.add('hidden');
+                }
+                if (gameState.selectedTowerType) {
+                    gameState.selectedTowerType = null;
+                    document.querySelectorAll('.tower-btn').forEach(btn => {
+                        btn.classList.remove('ring-2', 'ring-yellow-400');
+                    });
+                }
+            }
+        });
+    </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=Phoenixoni/tower" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Сделай игру типа tower defense
2	+ Убери энциклопедию с низу. сделай путь для врагов и места куда устанавливать башни. и почини кнопку старт, т.к. игра не запускается.