Spaces:

Dragoy
/

tank-battle-royale-one-shot

Running

App Files Files Community

Dragoy commited on May 31

Commit

e0ebe8e

verified ·

1 Parent(s): 503f471

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tank Battle Royale One Shot
-emoji: 🏢
-colorFrom: blue
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tank-battle-royale-one-shot
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 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,1099 @@
-<!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>Tank Battle Royale - One Shot Eliminations</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <style>
+        body {
+            overflow: hidden;
+            touch-action: none;
+            background: linear-gradient(135deg, #1a1f38, #0d1124);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        #gameContainer {
+            border: 3px solid #2c3e50;
+            border-radius: 8px;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
+        }
+        .tank {
+            position: absolute;
+            transition: transform 0.1s;
+            z-index: 10;
+        }
+        .health-bar {
+            width: 60px;
+            height:-5px;
+            background-color: #ff6b6b;
+            position: absolute;
+            top: -15px;
+            left: -10px;
+            border-radius: 3px;
+            z-index: 11;
+        }
+        .health-fill {
+            height: 100%;
+            background-color: #51cf66;
+            border-radius: 3px;
+            transition: width 0.3s;
+        }
+        .bullet {
+            position: absolute;
+            border-radius: 50%;
+            z-index: 9;
+        }
+        .explosion {
+            position: absolute;
+            pointer-events: none;
+            z-index: 100;
+        }
+        .control-btn {
+            width: 70px;
+            height: 70px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            opacity: 0.8;
+            transition: all 0.1s;
+            user-select: none;
+        }
+        .control-btn:active, .active {
+            transform: scale(0.9);
+            opacity: 1;
+        }
+        .tank-body {
+            width: 40px;
+            height: 40px;
+            border-radius: 4px;
+            position: relative;
+        }
+        .tank-turret {
+            position: absolute;
+            width: 25px;
+            height: 8px;
+            border-radius: 3px;
+            top: 16px;
+            left: 40px;
+        }
+        .grid-line {
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        #instructions {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+        }
+        .power-up {
+            position: absolute;
+            z-index: 8;
+            animation: float 3s ease-in-out infinite;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .flashing {
+            animation: flash 0.5s infinite;
+        }
+        @keyframes flash {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        .damage-indicator {
+            position: absolute;
+            color: #ff6b6b;
+            font-weight: bold;
+            z-index: 100;
+            pointer-events: none;
+            animation: floatUp 1s ease-out forwards;
+        }
+        @keyframes floatUp {
+            0% { transform: translateY(0); opacity: 1; }
+            100% { transform: translateY(-50px); opacity: 0; }
+        }
+        .hit-effect {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-3xl">
+        <h1 class="text-4xl font-bold text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500">
+            <i class="fas fa-tank mr-3"></i>TANK BATTLE ROYALE
+            <span class="text-sm ml-2 bg-red-600 text-white rounded-full px-2 py-1">ONE-SHOT ELIMINATIONS</span>
+        </h1>
+        <div class="flex flex-col md:flex-row justify-between items-center mb-4">
+            <div class="flex flex-wrap gap-2">
+                <div class="bg-gray-800 px-4 py-2 rounded-lg shadow-lg border border-gray-700 flex items-center">
+                    <i class="fas fa-heart text-red-500 text-lg mr-2"></i>
+                    <span class="font-bold text-white">HEALTH:
+                        <span id="health" class="text-green-300 ml-1">100</span>%
+                    </span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg shadow-lg border border-gray-700 flex items-center">
+                    <i class="fas fa-trophy text-yellow-400 text-lg mr-2"></i>
+                    <span class="font-bold text-white">SCORE:
+                        <span id="score" class="text-yellow-300 ml-1">0</span>
+                    </span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg shadow-lg border border-gray-700 flex items-center">
+                    <i class="fas fa-skull text-red-500 text-lg mr-2"></i>
+                    <span class="font-bold text-white">ENEMIES:
+                        <span id="enemies" class="text-red-300 ml-1">0</span>
+                    </span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg shadow-lg border border-gray-700 flex items-center">
+                    <i class="fas fa-bolt text-purple-500 text-lg mr-2"></i>
+                    <span class="font-bold text-white">FIREPOWER:
+                        <span id="firepower" class="text-purple-300 ml-1">INSTANT</span>
+                    </span>
+                </div>
+            </div>
+            <div class="mt-4 md:mt-0">
+                <button id="pauseBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">
+                    <i class="fas fa-pause mr-2"></i>Pause
+                </button>
+            </div>
+        </div>
+        <div class="relative" id="gameWrapper">
+            <canvas id="gameCanvas" width="800" height="500" class="w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-lg shadow-xl"></canvas>
+            <div class="absolute top-2 left-2 bg-green-900/80 p-2 rounded text-green-200 font-bold border border-green-600">
+                <i class="fas fa-star mr-1"></i> ONE-SHOT ELIMINATION MODE
+            </div>
+            <!-- Game Over Screen -->
+            <div id="gameOver" class="absolute inset-0 bg-gradient-to-br from-red-900/90 to-black/90 flex flex-col items-center justify-center rounded-lg text-center hidden">
+                <h2 class="text-5xl font-bold text-red-400 mb-2">MISSION FAILED</h2>
+                <p class="text-2xl text-white mb-4">Your tank has been destroyed!</p>
+                <p class="text-xl text-yellow-300 mb-4">Final Score: <span id="finalScore">0</span></p>
+                <button id="restartBtn" class="mt-6 bg-gradient-to-r from-yellow-500 to-red-500 hover:from-yellow-600 hover:to-red-600 text-xl font-bold text-white py-3 px-8 rounded-full transition transform hover:scale-105">
+                    <i class="fas fa-redo mr-3"></i>Play Again
+                </button>
+            </div>
+            <!-- Start Screen -->
+            <div id="startScreen" class="absolute inset-0 bg-gradient-to-br from-blue-900/90 to-black/90 flex flex-col items-center justify-center rounded-lg text-center">
+                <div id="instructions" class="p-8 max-w-3xl">
+                    <h2 class="text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">TANK COMBAT GUIDE</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+                        <div class="bg-gray-800/80 p-4 rounded-xl">
+                            <div class="text-4xl text-yellow-400 mb-4"><i class="fas fa-laptop"></i></div>
+                            <h3 class="text-xl font-bold text-white mb-2">ONE-SHOT MODE</h3>
+                            <ul class="text-gray-300 text-left">
+                                <li><i class="fas fa-bolt text-green-400"></i> Your shots destroy enemies instantly!</li>
+                                <li><i class="fas fa-heart text-red-400"></i> Enemies still require multiple hits to destroy you</li>
+                                <li><i class="fas fa-crown text-yellow-300"></i> Earn extra points for consecutive kills</li>
+                            </ul>
+                        </div>
+                        <div class="bg-gray-800/80 p-4 rounded-xl">
+                            <div class="text-4xl text-blue-400 mb-4"><i class="fas fa-keyboard"></i></div>
+                            <h3 class="text-xl font-bold text-white mb-2">Controls</h3>
+                            <ul class="text-gray-300 text-left">
+                                <li><i class="fas fa-arrow-up text-green-400"></i> Move Forward</li>
+                                <li><i class="fas fa-arrow-down text-green-400"></i> Move Backward</li>
+                                <li><i class="fas fa-arrow-left text-green-400"></i> Rotate Left</li>
+                                <li><i class="fas fa-arrow-right text-green-400"></i> Rotate Right</li>
+                                <li><i class="fas fa-space-shuttle text-red-400"></i> Fire Weapon</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <button id="startBtn" class="mt-4 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-2xl font-bold text-white py-4 px-12 rounded-full transition transform hover:scale-105">
+                        <i class="fas fa-tank mr-3 animate-pulse"></i>DEPLOY TO BATTLEFIELD
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile Controls -->
+        <div id="mobileControls" class="mt-6 grid grid-cols-3 gap-4 select-none hidden">
+            <div></div> <!-- Empty spacer -->
+            <div class="flex justify-center">
+                <div class="control-btn bg-yellow-500" id="mobileUp">
+                    <i class="fas fa-arrow-up text-3xl text-white"></i>
+                </div>
+            </div>
+            <div></div> <!-- Empty spacer -->
+            <div class="flex justify-center">
+                <div class="control-btn bg-yellow-500" id="mobileLeft">
+                    <i class="fas fa-arrow-left text-3xl text-white"></i>
+                </div>
+            </div>
+            <div class="flex justify-center">
+                <div class="control-btn bg-red-600" id="mobileShoot">
+                    <i class="fas fa-fire text-3xl text-white"></i>
+                </div>
+            </div>
+            <div class="flex justify-center">
+                <div class="control-btn bg-yellow-500" id="mobileRight">
+                    <i class="fas fa-arrow-right text-3xl text-white"></i>
+                </div>
+            </div>
+            <div></div> <!-- Empty spacer -->
+            <div class="flex justify-center">
+                <div class="control-btn bg-yellow-500" id="mobileDown">
+                    <i class="fas fa-arrow-down text-3xl text-white"></i>
+                </div>
+            </div>
+            <div></div> <!-- Empty spacer -->
+        </div>
+        <div class="mt-6 flex justify-center">
+            <div class="bg-gray-800/80 p-4 rounded-xl border border-gray-700 shadow-lg">
+                <p class="text-white text-center"><i class="fas fa-lightbulb text-yellow-300 mr-2"></i>Destroy enemies with a single shot! But beware - enemies still require multiple hits.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const healthDisplay = document.getElementById('health');
+        const scoreDisplay = document.getElementById('score');
+        const enemiesDisplay = document.getElementById('enemies');
+        const firepowerDisplay = document.getElementById('firepower');
+        const startBtn = document.getElementById('startBtn');
+        const startScreen = document.getElementById('startScreen');
+        const gameOverScreen = document.getElementById('gameOver');
+        const restartBtn = document.getElementById('restartBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const finalScore = document.getElementById('finalScore');
+        const mobileControls = document.getElementById('mobileControls');
+        // Initialize control buttons
+        const mobileUp = document.getElementById('mobileUp');
+        const mobileDown = document.getElementById('mobileDown');
+        const mobileLeft = document.getElementById('mobileLeft');
+        const mobileRight = document.getElementById('mobileRight');
+        const mobileShoot = document.getElementById('mobileShoot');
+        // Game state
+        let gameRunning = false;
+        let isPaused = false;
+        let score = 0;
+        let player;
+        let enemies = [];
+        let bullets = [];
+        let explosions = [];
+        let particles = [];
+        let gridLines = [];
+        let keys = {};
+        let lastShotTime = 0;
+        let enemySpawnTimer = 0;
+        let gameTime = 0;
+        let comboCounter = 0;
+        let comboTimeout = null;
+        let obstacleMap = [];
+        // Tank colors
+        const tankColors = {
+            player: '#3498db',
+            enemy: '#e74c3c'
+        };
+        // Map and obstacles
+        function generateObstacleMap() {
+            const width = canvas.width;
+            const height = canvas.height;
+            // Initialize obstacle map (0 = empty, 1 = obstacle)
+            obstacleMap = Array(Math.floor(height/20)).fill().map(() => Array(Math.floor(width/20)).fill(0));
+            // Add border obstacles
+            for(let i = 0; i < obstacleMap[0].length; i++) {
+                obstacleMap[0][i] = 1;
+                obstacleMap[obstacleMap.length-1][i] = 1;
+            }
+            for(let i = 0; i < obstacleMap.length; i++) {
+                obstacleMap[i][0] = 1;
+                obstacleMap[i][obstacleMap[0].length-1] = 1;
+            }
+            // Add some random obstacles
+            for(let i = 0; i < 20; i++) {
+                const row = Math.floor(Math.random() * (obstacleMap.length - 4)) + 2;
+                const col = Math.floor(Math.random() * (obstacleMap[0].length - 4)) + 2;
+                obstacleMap[row][col] = 1;
+                // Make the obstacles larger than single cells
+                if(row+1 < obstacleMap.length) obstacleMap[row+1][col] = 1;
+                if(col+1 < obstacleMap[0].length) obstacleMap[row][col+1] = 1;
+            }
+        }
+        // Draw obstacles
+        function drawObstacles() {
+            obstacleMap.forEach((row, i) => {
+                row.forEach((cell, j) => {
+                    if(cell === 1) {
+                        ctx.fillStyle = '#34495e';
+                        ctx.fillRect(j*20, i*20, 20, 20);
+                        ctx.fillStyle = '#2c3e50';
+                        ctx.fillRect(j*20+4, i*20+4, 12, 12);
+                    }
+                });
+            });
+        }
+        // Create grid for background
+        function createGrid() {
+            const spacing = 40;
+            const width = canvas.width;
+            const height = canvas.height;
+            for(let x = 0; x < width; x += spacing) {
+                gridLines.push({
+                    x1: x,
+                    y1: 0,
+                    x2: x,
+                    y2: height,
+                    width: 1,
+                    color: `rgba(255, 255, 255, ${Math.random() * 0.05 + 0.01})`
+                });
+            }
+            for(let y = 0; y < height; y += spacing) {
+                gridLines.push({
+                    x1: 0,
+                    y1: y,
+                    x2: width,
+                    y2: y,
+                    width: 1,
+                    color: `rgba(255, 255, 255, ${Math.random() * 0.05 + 0.01})`
+                });
+            }
+        }
+        // Draw grid background
+        function drawGrid() {
+            gridLines.forEach(line => {
+                ctx.beginPath();
+                ctx.moveTo(line.x1, line.y1);
+                ctx.lineTo(line.x2, line.y2);
+                ctx.strokeStyle = line.color;
+                ctx.lineWidth = line.width;
+                ctx.stroke();
+            });
+        }
+        // Create explosion particles
+        function createExplosion(x, y, color) {
+            for(let i = 0; i < 20; i++) {
+                particles.push({
+                    x: x,
+                    y: y,
+                    radius: Math.random() * 6 + 2,
+                    color: color || `hsl(${Math.random() * 20 + 20}, 100%, 50%)`,
+                    speed: Math.random() * 5 + 2,
+                    angle: Math.random() * Math.PI * 2,
+                    life: Math.floor(Math.random() * 20 + 10),
+                    decay: Math.random() * 0.1 + 0.05
+                });
+            }
+        }
+        // Create damage indicator
+        function createDamageIndicator(x, y, amount) {
+            particles.push({
+                x: x,
+                y: y,
+                radius: 0,
+                color: '#ffffff',
+                content: `-${amount}`,
+                textColor: '#ff0000',
+                textSize: 16,
+                life: 60,
+                decay: 1,
+                isText: true
+            });
+        }
+        // Update explosion particles
+        function updateParticles() {
+            for(let i = particles.length - 1; i >= 0; i--) {
+                const p = particles[i];
+                if (p.isText) {
+                    p.y -= 1;
+                    p.life -= p.decay;
+                } else {
+                    p.x += Math.cos(p.angle) * p.speed;
+                    p.y += Math.sin(p.angle) * p.speed;
+                    p.speed *= 0.95;
+                    p.life -= p.decay;
+                    // Ensure radius doesn't become negative
+                    p.radius = Math.max(0, p.radius - p.decay);
+                }
+                if(p.life <= 0) {
+                    particles.splice(i, 1);
+                }
+            }
+        }
+        // Draw particles
+        function drawParticles() {
+            ctx.globalAlpha = 1;
+            particles.forEach(p => {
+                if (p.isText) {
+                    ctx.font = `${p.textSize}px Arial`;
+                    ctx.fillStyle = p.textColor;
+                    // Text doesn't get affected by alpha in the same way
+                    ctx.fillText(p.content, p.x, p.y);
+                } else {
+                    // Only draw if radius is > 0
+                    if (p.radius > 0) {
+                        ctx.fillStyle = p.color;
+                        ctx.beginPath();
+                        ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2);
+                        ctx.fill();
+                    }
+                }
+            });
+        }
+        // Tank class
+        class Tank {
+            constructor(x, y, color, isPlayer = false) {
+                this.x = x;
+                this.y = y;
+                this.width = 40;
+                this.height = 40;
+                this.color = color;
+                this.speed = isPlayer ? 4 : 2;
+                this.rotation = 0;
+                this.turretRotation = 0;
+                this.health = 100;
+                this.isPlayer = isPlayer;
+                this.lastShotTime = 0;
+                this.shotCooldown = isPlayer ? 400 : 1600;
+                this.bulletSpeed = isPlayer ? 10 : 7;
+                // Enemy AI properties
+                this.sightRange = isPlayer ? 0 : 400;
+                this.attackRange = isPlayer ? 0 : 250;
+                this.changeDirectionTime = 0;
+                this.currentDirection = 0;
+                this.retreating = false;
+                this.retreatTimer = 0;
+                this.healthCritical = false;
+            }
+            canMoveTo(newX, newY) {
+                // Convert world coordinate to obstacle map cell
+                const col = Math.floor(newX / 20);
+                const row = Math.floor(newY / 20);
+                // If any of the surrounding cells are obstacles, can't move here
+                return obstacleMap[row] && obstacleMap[row][col] === 0;
+            }
+            draw() {
+                ctx.save();
+                ctx.translate(this.x, this.y);
+                // Draw the tank body
+                ctx.rotate(this.rotation);
+                ctx.fillStyle = this.color;
+                ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height);
+                // Draw turret
+                ctx.rotate(this.turretRotation - this.rotation);
+                ctx.fillStyle = this.isPlayer ? "#f1c40f" : "#e74c3c";
+                ctx.fillRect(this.width/2 - 10, -4, 25, 8);
+                ctx.restore();
+                // Draw health bar for enemies and player
+                if (this.health < 100) {
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+                    ctx.fillRect(this.x - 30, this.y - 35, 60, 6);
+                    ctx.fillStyle = this.health > 30 ? '#2ecc71' : '#e74c3c';
+                    ctx.fillRect(this.x - 30, this.y - 35, 60 * (this.health/100), 6);
+                }
+            }
+            update() {
+                if (this.isPlayer) {
+                    this.updatePlayer();
+                } else {
+                    this.updateEnemy();
+                }
+                // Keep tank within bounds
+                this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
+                this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));
+            }
+            updatePlayer() {
+                let moveForward = false;
+                let moveBackward = false;
+                let rotateLeft = false;
+                let rotateRight = false;
+                // Movement controls
+                if (keys['ArrowUp'] || keys['w'] || keys['W']) moveForward = true;
+                if (keys['ArrowDown'] || keys['s'] || keys['S']) moveBackward = true;
+                if (keys['ArrowLeft'] || keys['a'] || keys['A']) rotateLeft = true;
+                if (keys['ArrowRight'] || keys['d'] || keys['D']) rotateRight = true;
+                // Mobile controls
+                if (mobileUp.classList.contains('active')) moveForward = true;
+                if (mobileDown.classList.contains('active')) moveBackward = true;
+                if (mobileLeft.classList.contains('active')) rotateLeft = true;
+                if (mobileRight.classList.contains('active')) rotateRight = true;
+                // Rotate body and turret together for player
+                if (rotateLeft) {
+                    this.rotation -= 0.05;
+                }
+                if (rotateRight) {
+                    this.rotation += 0.05;
+                }
+                // Move the tank
+                let newX = this.x, newY = this.y;
+                if (moveForward) {
+                    newX = this.x + Math.cos(this.rotation) * this.speed;
+                    newY = this.y + Math.sin(this.rotation) * this.speed;
+                }
+                if (moveBackward) {
+                    newX = this.x - Math.cos(this.rotation) * this.speed;
+                    newY = this.y - Math.sin(this.rotation) * this.speed;
+                }
+                // Check collision with obstacles
+                if (this.canMoveTo(newX, newY)) {
+                    this.x = newX;
+                    this.y = newY;
+                }
+                // Keep turrent rotation synchronized with body for player
+                this.turretRotation = this.rotation;
+                // Auto rotate the turret towards mouse
+                const mouseX = canvas.width/2;
+                const mouseY = canvas.height/2;
+                const angleToMouse = Math.atan2(mouseY - this.y, mouseX - this.x);
+                const angleDiff = this.normalizeAngle(angleToMouse - this.turretRotation);
+                if (Math.abs(angleDiff) > 0.05) {
+                    this.turretRotation += angleDiff > 0 ? 0.05 : -0.05;
+                }
+            }
+            normalizeAngle(angle) {
+                while(angle > Math.PI) angle -= Math.PI * 2;
+                while(angle < -Math.PI) angle += Math.PI * 2;
+                return angle;
+            }
+            updateEnemy() {
+                // If player is destroyed, stop moving
+                if (!player) return;
+                // Calculate vector to player
+                const dx = player.x - this.x;
+                const dy = player.y - this.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                // Calculate the angle to the player
+                const angleToPlayer = Math.atan2(dy, dx);
+                // Set whether health is critical
+                this.healthCritical = this.health < 30;
+                // Retreat if health is critical and in close range
+                if (this.healthCritical && distance < this.attackRange * 0.6) {
+                    this.retreating = true;
+                    this.retreatTimer = 180;
+                }
+                if (this.retreatTimer > 0) {
+                    this.retreatTimer--;
+                } else {
+                    this.retreating = false;
+                }
+                // Point turret toward player
+                const angleDiff = this.normalizeAngle(angleToPlayer - this.turretRotation);
+                if (Math.abs(angleDiff) > 0.05) {
+                    this.turretRotation += angleDiff > 0 ? 0.03 : -0.03;
+                }
+                // Movement logic
+                if (distance < this.sightRange && !this.healthCritical && !this.retreating) {
+                    if (distance > this.attackRange * 0.8) {
+                        // Approach player
+                        this.x += Math.cos(angleToPlayer) * this.speed * 0.7;
+                        this.y += Math.sin(angleToPlayer) * this.speed * 0.7;
+                    } else if (distance < this.attackRange * 0.5) {
+                        // Back up if too close
+                        this.x -= Math.cos(angleToPlayer) * this.speed * 0.5;
+                        this.y -= Math.sin(angleToPlayer) * this.speed * 0.5;
+                    }
+                    // Circle strafe occasionally
+                    this.changeDirectionTime--;
+                    if (this.changeDirectionTime <= 0) {
+                        this.changeDirectionTime = Math.floor(Math.random() * 60) + 30;
+                        this.currentDirection = Math.random() * 0.2 - 0.1;
+                        if (Math.random() > 0.5) {
+                            this.currentDirection *= -1;
+                        }
+                    }
+                    // Circle strafing movement
+                    this.x += Math.cos(angleToPlayer + Math.PI/2) * this.currentDirection * 2;
+                    this.y += Math.sin(angleToPlayer + Math.PI/2) * this.currentDirection * 2;
+                    // Try to maintain optimal attack range
+                    if (distance > this.attackRange * 0.8 && distance < this.attackRange * 1.8) {
+                        this.rotation = angleToPlayer;
+                    }
+                } else if (this.retreating) {
+                    // Run away if retreating
+                    this.x -= Math.cos(angleToPlayer) * this.speed;
+                    this.y -= Math.sin(angleToPlayer) * this.speed;
+                    this.rotation = angleToPlayer + Math.PI;
+                } else {
+                    // Patrol randomly
+                    this.changeDirectionTime--;
+                    if (this.changeDirectionTime <= 0 ||
+                        this.x < 50 || this.x > canvas.width - 50 ||
+                        this.y < 50 || this.y > canvas.height - 50) {
+                        this.changeDirectionTime = Math.floor(Math.random() * 60) + 30;
+                        this.rotation = Math.random() * Math.PI * 2;
+                    }
+                    this.x += Math.cos(this.rotation) * this.speed * 0.5;
+                    this.y += Math.sin(this.rotation) * this.speed * 0.5;
+                }
+                // Shoot at player if in attack range
+                if (distance < this.attackRange && Math.abs(angleDiff) < 0.2) {
+                    const now = Date.now();
+                    if (now - this.lastShotTime > this.shotCooldown) {
+                        this.shoot();
+                        this.lastShotTime = now;
+                    }
+                }
+            }
+            shoot() {
+                const bulletX = this.x + Math.cos(this.turretRotation) * (this.width/2 + 15);
+                const bulletY = this.y + Math.sin(this.turretRotation) * (this.height/2 + 15);
+                bullets.push({
+                    x: bulletX,
+                    y: bulletY,
+                    angle: this.turretRotation,
+                    speed: this.bulletSpeed,
+                    isPlayer: this.isPlayer,
+                    damage: this.isPlayer ? 100 : 25, // Player bullets do 100 damage (one-shot kill)
+                    size: this.isPlayer ? 8 : 6, // Player bullets are larger - visual feedback for one-shot
+                    color: this.isPlayer ? '#f1c40f' : '#e74c3c'
+                });
+                // Player bullet sound effect
+                if (this.isPlayer) {
+                    createExplosion(bulletX, bulletY, '#f1c40f');
+                }
+            }
+            takeDamage(amount) {
+                const damageTaken = amount;
+                this.health -= amount;
+                if (this.isPlayer) {
+                    createDamageIndicator(this.x, this.y, damageTaken);
+                }
+                if (this.health <= 0) {
+                    this.destroy();
+                    return true;
+                }
+                return false;
+            }
+            destroy() {
+                createExplosion(this.x, this.y);
+                if (this.isPlayer) {
+                    gameOver();
+                } else {
+                    score += 100;
+                    comboCounter++;
+                    // Apply combo bonus
+                    if (comboCounter > 1) {
+                        const bonus = comboCounter * 25;
+                        score += bonus;
+                        createDamageIndicator(this.x, this.y, `+${bonus} Combo!`, '#00ff00');
+                    }
+                    // Reset combo timer
+                    clearTimeout(comboTimeout);
+                    comboTimeout = setTimeout(() => {
+                        comboCounter = 0;
+                    }, 2000);
+                    scoreDisplay.textContent = score;
+                    enemiesDisplay.textContent = enemies.length - 1;
+                }
+            }
+        }
+        // Initialize game
+        function initGame() {
+            player = new Tank(canvas.width/2, canvas.height/2, tankColors.player, true);
+            enemies = [];
+            bullets = [];
+            particles = [];
+            score = 0;
+            scoreDisplay.textContent = score;
+            healthDisplay.textContent = player.health;
+            enemiesDisplay.textContent = 0;
+            gameTime = 0;
+            enemySpawnTimer = 0;
+            comboCounter = 0;
+            generateObstacleMap();
+            createGrid();
+            // Spawn initial enemies
+            for (let i = 0; i < 2; i++) {
+                spawnEnemy();
+            }
+        }
+        // Spawn enemy
+        function spawnEnemy() {
+            let x, y;
+            // Spawn at semi-random edge position with obstacle check
+            let safePosition = false;
+            let attempts = 0;
+            while (!safePosition && attempts < 20) {
+                const side = Math.floor(Math.random() * 4);
+                const pos = Math.random() * 0.6 + 0.2;
+                switch(side) {
+                    case 0: // top
+                        x = canvas.width * pos;
+                        y = -40;
+                        break;
+                    case 1: // right
+                        x = canvas.width + 40;
+                        y = canvas.height * pos;
+                        break;
+                    case 2: // bottom
+                        x = canvas.width * pos;
+                        y = canvas.height + 40;
+                        break;
+                    case 3: // left
+                        x = -40;
+                        y = canvas.height * pos;
+                        break;
+                }
+                // Ensure enemy doesn't spawn in a wall
+                const col = Math.floor(x / 20);
+                const row = Math.floor(y / 20);
+                if (obstacleMap[row] && obstacleMap[row][col] === 0) {
+                    safePosition = true;
+                }
+                attempts++;
+            }
+            const enemy = new Tank(x, y, tankColors.enemy);
+            enemies.push(enemy);
+            enemiesDisplay.textContent = enemies.length;
+        }
+        // Check collision between two objects
+        function checkCollision(obj1, obj2) {
+            const distX = Math.abs(obj1.x - obj2.x);
+            const distY = Math.abs(obj1.y - obj2.y);
+            let distance;
+            if (obj1.width && obj2.width) {
+                // Tank-tank collision
+                return distX < (obj1.width/2 + obj2.width/2) &&
+                       distY < (obj1.height/2 + obj2.height/2);
+            } else {
+                // Bullet-tank collision
+                distance = Math.sqrt(distX * distX + distY * distY);
+                return distance < (obj2.width/2) + (obj1.size || 4);
+            }
+        }
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            gameOverScreen.classList.remove('hidden');
+            finalScore.textContent = score;
+        }
+        // Main game loop
+        function gameLoop() {
+            if (!gameRunning || isPaused) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw background grid and obstacles
+            drawGrid();
+            drawObstacles();
+            // Update and draw player
+            player.update();
+            player.draw();
+            healthDisplay.textContent = player.health;
+            // Draw and update enemies
+            enemies.forEach(enemy => {
+                enemy.update();
+                enemy.draw();
+            });
+            // Update and draw particles
+            updateParticles();
+            drawParticles();
+            // Update and draw bullets
+            for (let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                bullet.x += Math.cos(bullet.angle) * bullet.speed;
+                bullet.y += Math.sin(bullet.angle) * bullet.speed;
+                // Draw bullet with glow for player bullets
+                ctx.fillStyle = bullet.color;
+                // Player bullets are visually distinct (bigger and glowing)
+                if (bullet.isPlayer) {
+                    ctx.shadowBlur = 10;
+                    ctx.shadowColor = bullet.color;
+                    ctx.beginPath();
+                    ctx.arc(bullet.x, bullet.y, bullet.size || 6, 0, Math.PI*2);
+                    ctx.fill();
+                    ctx.shadowBlur = 0;
+                } else {
+                    ctx.beginPath();
+                    ctx.arc(bullet.x, bullet.y, bullet.size || 4, 0, Math.PI*2);
+                    ctx.fill();
+                }
+                // Check obstacle collisions
+                const col = Math.floor(bullet.x / 20);
+                const row = Math.floor(bullet.y / 20);
+                if (obstacleMap[row] && obstacleMap[row][col] === 1) {
+                    // Create impact explosion or spark
+                    createExplosion(bullet.x, bullet.y, bullet.color);
+                    bullets.splice(i, 1);
+                    continue;
+                }
+                // Check collisions with tanks
+                if (bullet.isPlayer) {
+                    // Player bullet hits enemy
+                    for (let j = enemies.length - 1; j >= 0; j--) {
+                        const enemy = enemies[j];
+                        if (checkCollision(bullet, enemy)) {
+                            createExplosion(bullet.x, bullet.y, bullet.color);
+                            enemy.takeDamage(bullet.damage); // This destroys enemy (100 damage)
+                            bullets.splice(i, 1);
+                            break;
+                        }
+                    }
+                } else {
+                    // Enemy bullet hits player
+                    if (checkCollision(bullet, player)) {
+                        createExplosion(bullet.x, bullet.y, bullet.color);
+                        if (player.takeDamage(bullet.damage)) {
+                            player = null;
+                        }
+                        bullets.splice(i, 1);
+                    }
+                }
+                // Remove bullets that are out of bounds
+                if (bullet.x < -50 || bullet.x > canvas.width + 50 ||
+                    bullet.y < -50 || bullet.y > canvas.height + 50) {
+                    bullets.splice(i, 1);
+                }
+            }
+            // Spawn new enemies periodically
+            gameTime++;
+            enemySpawnTimer++;
+            if (enemySpawnTimer > 120) {
+                if (enemies.length < 6 + Math.floor(gameTime / 300)) {
+                    spawnEnemy();
+                }
+                enemySpawnTimer = 0;
+            }
+            // Increase difficulty over time
+            if (gameTime % 300 === 0 && player.health < 75) {
+                player.health += 5;
+                healthDisplay.textContent = player.health;
+                createDamageIndicator(player.x, player.y+30, "+5 HP", '#00ff00');
+            }
+            requestAnimationFrame(gameLoop);
+        }
+        // Event listeners for keyboard controls
+        window.addEventListener('keydown', (e) => {
+            keys[e.key] = true;
+            // Space to shoot
+            if (e.key === ' ' && gameRunning && player && Date.now() - lastShotTime > 500) {
+                lastShotTime = Date.now();
+                player.shoot();
+            }
+        });
+        window.addEventListener('keyup', (e) => {
+            keys[e.key] = false;
+        });
+        // Mobile control event listeners
+        mobileUp.addEventListener('touchstart', (e) => {
+            mobileUp.classList.add('active');
+            e.preventDefault();
+        }, {passive: false});
+        mobileDown.addEventListener('touchstart', (e) => {
+            mobileDown.classList.add('active');
+            e.preventDefault();
+        }, {passive: false});
+        mobileLeft.addEventListener('touchstart', (e) => {
+            mobileLeft.classList.add('active');
+            e.preventDefault();
+        }, {passive: false});
+        mobileRight.addEventListener('touchstart', (e) => {
+            mobileRight.classList.add('active');
+            e.preventDefault();
+        }, {passive: false});
+        mobileShoot.addEventListener('touchstart', (e) => {
+            mobileShoot.classList.add('active');
+            if (gameRunning && player && Date.now() - lastShotTime > 500) {
+                player.shoot();
+                lastShotTime = Date.now();
+            }
+            e.preventDefault();
+        }, {passive: false});
+        // Mobile touch end listeners
+        const mobileButtons = [mobileUp, mobileDown, mobileLeft, mobileRight, mobileShoot];
+        mobileButtons.forEach(btn => {
+            btn.addEventListener('touchend', () => {
+                btn.classList.remove('active');
+            });
+            btn.addEventListener('touchcancel', () => {
+                btn.classList.remove('active');
+            });
+        });
+        // Start button
+        startBtn.addEventListener('click', () => {
+            startScreen.classList.add('hidden');
+            gameRunning = true;
+            initGame();
+            gameLoop();
+            mobileControls.classList.remove('hidden');
+        });
+        // Restart button
+        restartBtn.addEventListener('click', () => {
+            gameOverScreen.classList.add('hidden');
+            gameRunning = true;
+            initGame();
+            gameLoop();
+            mobileControls.classList.remove('hidden');
+        });
+        // Pause button
+        pauseBtn.addEventListener('click', () => {
+            isPaused = !isPaused;
+            pauseBtn.innerHTML = isPaused ?
+                '<i class="fas fa-play mr-2"></i>Resume' :
+                '<i class="fas fa-pause mr-2"></i>Pause';
+        });
+        // Handle mouse movement for turret
+        canvas.addEventListener('mousemove', () => {
+            if (!player) return;
+            const mouseX = canvas.width/2;
+            const mouseY = canvas.height/2;
+            player.turretRotation = Math.atan2(mouseY - player.y, mouseX - player.x);
+        });
+        // Mobile touch events
+        canvas.addEventListener('click', (e) => {
+            if (gameRunning && player && Date.now() - lastShotTime > 500) {
+                lastShotTime = Date.now();
+                player.shoot();
+            }
+        });
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            gridLines = [];
+            createGrid();
+            generateObstacleMap();
+        });
+        // Check if mobile and touch devices
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        if (!('ontouchstart' in window) && !isMobile) {
+            mobileControls.classList.add('hidden');
+        } else {
+            // For touch devices, start with controls hidden until game starts
+            mobileControls.classList.add('hidden');
+        }
+        // Show start screen on initial load
+        window.onload = () => {
+            startScreen.classList.remove('hidden');
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            firepowerDisplay.textContent = "INSTANT";
+        };
+    </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=Dragoy/tank-battle-royale-one-shot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+write me a tank game in html css js Add enemies write intelligence for them to attack me and chase me.
+write me a tank game in html css js Add enemies write intelligence for them to attack me and chase me.
+убийство врагом с одного попадания
+убийство врагов с одного моего попадания что бы снизить сложность
+Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.0320748) is negative.     at about:srcdoc:465:25     at Array.forEach (<anonymous>)     at drawParticles (about:srcdoc:455:23)     at gameLoop (about:srcdoc:883:13)