Spaces:

zebrakm
/

tanks-game

Running

App Files Files Community

zebrakm commited on Apr 1

Commit

e100a25

verified ·

1 Parent(s): 67ea19c

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tanks Game
-emoji: 📉
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tanks-game
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 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,663 @@
-<!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: Ultimate Showdown</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
+            font-family: 'Press Start 2P', cursive;
+            overflow: hidden;
+            user-select: none;
+            height: 100vh;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            padding: 20px;
+            margin: 0 auto;
+        }
+        #gameCanvas {
+            background: linear-gradient(to bottom, #1e9600, #004e00);
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
+            border-radius: 5px;
+            border: 4px solid #333;
+            position: relative;
+            width: 100%;
+            height: 400px;
+            overflow: hidden;
+        }
+        .tank {
+            position: absolute;
+            transition: transform 0.3s ease;
+            z-index: 10;
+            bottom: 0;
+        }
+        .tank-body {
+            position: relative;
+            width: 48px;
+            height: 32px;
+            background-color: #555;
+            border-radius: 5px;
+            border: 2px solid #333;
+            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
+        }
+        .tank-barrel {
+            position: absolute;
+            width: 4px;
+            height: 30px;
+            background: linear-gradient(to right, #777, #444);
+            top: -30px;
+            left: 50%;
+            transform-origin: bottom center;
+            transform: translateX(-50%) rotate(45deg);
+            border: 1px solid #222;
+            border-radius: 2px;
+        }
+        .tank-turret {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(to bottom, #666, #444);
+            border-radius: 50%;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 2px solid #333;
+            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
+        }
+        .tank-tracks {
+            position: absolute;
+            bottom: -6px;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: repeating-linear-gradient(
+                90deg,
+                #444,
+                #444 3px,
+                #333 3px,
+                #333 6px
+            );
+            border-radius: 3px;
+        }
+        .explosion {
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgb(255, 255, 0) 0%, rgb(255, 165, 0) 40%, rgb(255, 0, 0) 70%, rgba(139, 0, 0, 0) 100%);
+            opacity: 0;
+            z-index: 20;
+            box-shadow: 0 0 30px rgba(255, 100, 0, 0.7);
+        }
+        .projectile {
+            position: absolute;
+            background: radial-gradient(circle at center, #ffeb3b, #ff9800, #f44336);
+            border-radius: 50%;
+            box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
+            z-index: 15;
+        }
+        .projectile-trail {
+            position: absolute;
+            background: rgba(255, 165, 0, 0.5);
+            border-radius: 50%;
+            z-index: 5;
+        }
+        .crater {
+            position: absolute;
+            background: radial-gradient(circle, rgba(70, 35, 0, 0.8) 0%, rgba(70, 35, 0, 0) 100%);
+            border-radius: 50%;
+            z-index: 9;
+        }
+        .controls {
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            padding: 15px;
+            border: 2px solid #444;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
+        }
+        .slider-label {
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 2px 2px 0 #000;
+            margin-bottom: 5px;
+            font-size: 12px;
+        }
+        .health {
+            font-size: 24px;
+            letter-spacing: 3px;
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 10px;
+            background: #444;
+            border-radius: 5px;
+            outline: none;
+            margin-bottom: 15px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #ff9800;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid #ff5722;
+        }
+        button {
+            background: linear-gradient(to bottom, #ff5722, #e64a19);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 12px;
+            cursor: pointer;
+            text-shadow: 1px 1px 0 #000;
+            box-shadow: 0 5px 0 #c62828, 0 8px 5px rgba(0,0,0,0.3);
+            transition: all 0.1s;
+            outline: none;
+        }
+        button:active {
+            transform: translateY(3px);
+            box-shadow: 0 2px 0 #c62828;
+        }
+        button:disabled {
+            background: #666;
+            box-shadow: none;
+            transform: none;
+            cursor: not-allowed;
+        }
+        .player-turn {
+            box-shadow: 0 0 20px rgba(255, 255, 0, 0.7);
+            transition: all 0.5s;
+            background-color: rgba(255, 255, 0, 0.1);
+        }
+        #gameStatus {
+            background-color: rgba(0,0,0,0.7);
+            color: #ff9800;
+            padding: 10px;
+            border-radius: 5px;
+            text-align: center;
+            margin: 10px 0;
+            border: 2px solid #ff5722;
+            text-shadow: 2px 2px 0 #000;
+        }
+        #gameOver {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.9);
+            padding: 30px;
+            border-radius: 10px;
+            text-align: center;
+            border: 4px solid #ff5722;
+            z-index: 100;
+            width: 80%;
+            max-width: 500px;
+        }
+        #winnerMessage {
+            color: #4caf50;
+            font-size: 24px;
+            margin-bottom: 20px;
+            text-shadow: 3px 3px 0 #000;
+        }
+        .terrain {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            bottom: 0;
+        }
+        .wind-indicator {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            padding: 5px 10px;
+            border-radius: 5px;
+            color: white;
+            font-size: 12px;
+            z-index: 50;
+            border: 1px solid #444;
+        }
+        @keyframes explosionScale {
+            0% { transform: scale(0); opacity: 1; }
+            100% { transform: scale(4); opacity: 0; }
+        }
+        @keyframes explosionFade {
+            0% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+        @keyframes fireball {
+            0% { box-shadow: 0 0 10px 5px rgba(255, 165, 0, 0.8); }
+            50% { box-shadow: 0 0 20px 10px rgba(255, 100, 0, 0.9); }
+            100% { box-shadow: 0 0 10px 5px rgba(255, 50, 0, 0.7); }
+        }
+        @keyframes tankHit {
+            0% { transform: translateY(0); }
+            25% { transform: translateY(-10px); }
+            50% { transform: translateY(0); }
+            75% { transform: translateY(-5px); }
+            100% { transform: translateY(0); }
+        }
+        /* New tank positioning styles */
+        #tankContainer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        #player1Tank {
+            bottom: auto;
+            top: 50%;
+            left: 100px;
+            transform: translateY(-50%);
+        }
+        #player2Tank {
+            bottom: auto;
+            top: 50%;
+            right: 100px;
+            transform: translateY(-50%) scaleX(-1);
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="gameCanvas">
+            <div id="terrain" class="terrain"></div>
+            <div id="windIndicator" class="wind-indicator">Wind: → 0 m/s</div>
+            <div id="tankContainer">
+                <div id="player1Tank" class="tank">
+                    <div class="tank-body">
+                        <div class="tank-barrel"></div>
+                        <div class="tank-turret"></div>
+                        <div class="tank-tracks"></div>
+                    </div>
+                </div>
+                <div id="player2Tank" class="tank">
+                    <div class="tank-body">
+                        <div class="tank-barrel"></div>
+                        <div class="tank-turret"></div>
+                        <div class="tank-tracks"></div>
+                    </div>
+                </div>
+            </div>
+            <div id="projectiles"></div>
+            <div id="projectileTrails"></div>
+            <div id="explosions"></div>
+            <div id="craters"></div>
+        </div>
+        <div id="gameStatus">Player 1's Turn</div>
+        <div class="flex flex-col md:flex-row gap-4">
+            <div class="controls flex-1">
+                <h2 class="text-center text-white mb-3 text-sm">PLAYER 1</h2>
+                <div class="mb-3">
+                    <div class="flex justify-between">
+                        <span class="slider-label">POWER:</span>
+                        <span class="slider-label"><span id="player1PowerValue">50</span>%</span>
+                    </div>
+                    <input type="range" min="5" max="100" value="50" class="w-full" id="player1Power">
+                </div>
+                <div class="mb-3">
+                    <div class="flex justify-between">
+                        <span class="slider-label">ANGLE:</span>
+                        <span class="slider-label"><span id="player1AngleValue">45</span>°</span>
+                    </div>
+                    <input type="range" min="0" max="90" value="45" class="w-full" id="player1Angle">
+                </div>
+                <div class="flex justify-between items-center mb-3">
+                    <span class="slider-label">HEALTH:</span>
+                    <span class="health text-red-500" id="player1Health">❤❤❤</span>
+                </div>
+                <button id="player1Shoot" class="w-full">
+                    FIRE!
+                </button>
+            </div>
+            <div class="controls flex-1">
+                <h2 class="text-center text-white mb-3 text-sm">COMPUTER</h2>
+                <div class="mb-3">
+                    <div class="flex justify-between">
+                        <span class="slider-label">POWER:</span>
+                        <span class="slider-label"><span id="player2PowerValue">50</span>%</span>
+                    </div>
+                    <input type="range" min="5" max="100" value="50" class="w-full" id="player2Power" disabled>
+                </div>
+                <div class="mb-3">
+                    <div class="flex justify-between">
+                        <span class="slider-label">ANGLE:</span>
+                        <span class="slider-label"><span id="player2AngleValue">45</span>°</span>
+                    </div>
+                    <input type="range" min="0" max="90" value="45" class="w-full" id="player2Angle" disabled>
+                </div>
+                <div class="flex justify-between items-center mb-3">
+                    <span class="slider-label">HEALTH:</span>
+                    <span class="health text-red-500" id="player2Health">❤❤❤</span>
+                </div>
+                <button id="player2Shoot" class="w-full" disabled>
+                    THINKING...
+                </button>
+            </div>
+        </div>
+        <div id="gameOver" class="hidden">
+            <h2 id="winnerMessage">PLAYER 1 WINS!</h2>
+            <button id="restartButton" class="bg-green-500 hover:bg-green-600">
+                PLAY AGAIN
+            </button>
+        </div>
+    </div>
+    <script>
+        // Game constants
+        const GAME_WIDTH = 800;
+        const GAME_HEIGHT = 400;
+        const GRAVITY = 0.2;
+        const WIND_MAX = 0.5;
+        // Game state
+        let currentPlayer = 1;
+        let player1Health = 3;
+        let player2Health = 3;
+        let gameActive = true;
+        let gamePaused = false;
+        let player1Position = { x: 100, y: GAME_HEIGHT - 50 };
+        let player2Position = { x: GAME_WIDTH - 100, y: GAME_HEIGHT - 50 };
+        let terrain = [];
+        let projectiles = [];
+        let explosions = [];
+        let craters = [];
+        let windSpeed = 0;
+        let trailParticles = [];
+        // Initialize game
+        function initGame() {
+            // Reset game state
+            currentPlayer = 1;
+            player1Health = 3;
+            player2Health = 3;
+            gameActive = true;
+            projectiles = [];
+            explosions = [];
+            craters = [];
+            trailParticles = [];
+            // Random wind
+            windSpeed = (Math.random() * WIND_MAX * 2) - WIND_MAX;
+            updateWindIndicator();
+            // Update UI
+            document.getElementById('player1Health').textContent = '❤'.repeat(player1Health);
+            document.getElementById('player2Health').textContent = '❤'.repeat(player2Health);
+            document.getElementById('gameOver').classList.add('hidden');
+            document.getElementById('gameStatus').textContent = "PLAYER 1'S TURN";
+            // Create terrain
+            createTerrain();
+            // Position tanks
+            positionTanks();
+            // Set up controls
+            setupControls();
+            // Update tank angles
+            updateBarrelAngle(1);
+            updateBarrelAngle(2);
+            // Highlight current player
+            updatePlayerTurnUI();
+        }
+        // Update wind display
+        function updateWindIndicator() {
+            const windIndicator = document.getElementById('windIndicator');
+            const windDirection = windSpeed > 0 ? "→" : "←";
+            const absSpeed = Math.abs(windSpeed).toFixed(1);
+            windIndicator.textContent = `WIND: ${windDirection} ${absSpeed} m/s`;
+            // Color based on wind strength
+            const windStrength = Math.abs(windSpeed) / WIND_MAX;
+            if (windStrength > 0.7) {
+                windIndicator.style.color = '#ff5722';
+            } else if (windStrength > 0.3) {
+                windIndicator.style.color = '#ff9800';
+            } else {
+                windIndicator.style.color = 'white';
+            }
+        }
+        // Create random terrain
+        function createTerrain() {
+            const terrainDiv = document.getElementById('terrain');
+            terrainDiv.innerHTML = '';
+            // Generate simple terrain
+            terrain = [];
+            for (let x = 0; x <= GAME_WIDTH; x += 20) {
+                terrain.push({
+                    x,
+                    y: GAME_HEIGHT - 50 - Math.sin(x / 100) * 30
+                });
+            }
+            // Draw terrain as SVG path
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("width", "100%");
+            svg.setAttribute("height", "100%");
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            let pathData = `M ${terrain[0].x} ${terrain[0].y}`;
+            for (let i = 1; i < terrain.length; i++) {
+                pathData += ` L ${terrain[i].x} ${terrain[i].y}`;
+            }
+            // Close the path to fill
+            pathData += ` L ${GAME_WIDTH} ${GAME_HEIGHT} L 0 ${GAME_HEIGHT} Z`;
+            path.setAttribute("d", pathData);
+            path.setAttribute("fill", "#5D4037");
+            path.setAttribute("stroke", "#3E2723");
+            path.setAttribute("stroke-width", "2");
+            svg.appendChild(path);
+            terrainDiv.appendChild(svg);
+        }
+        // Position tanks on the terrain
+        function positionTanks() {
+            const tank1 = document.getElementById('player1Tank');
+            const tank2 = document.getElementById('player2Tank');
+            tank1.style.left = `${player1Position.x - 24}px`;
+            tank1.style.top = `${player1Position.y - 32}px`;
+            tank2.style.right = `${GAME_WIDTH - player2Position.x - 24}px`;
+            tank2.style.top = `${player2Position.y - 32}px`;
+        }
+        // Update the barrel angle based on slider
+        function updateBarrelAngle(playerNum) {
+            const angle = parseInt(document.getElementById(`player${playerNum}Angle`).value);
+            document.getElementById(`player${playerNum}AngleValue`).textContent = angle;
+            const tank = document.getElementById(`player${playerNum}Tank`);
+            const barrel = tank.querySelector('.tank-barrel');
+            // Flip angle for player 2 (computer) who is facing left
+            const angleDeg = playerNum === 1 ? angle : 180 - angle;
+            barrel.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
+        }
+        // Update power display
+        function updatePowerDisplay(playerNum) {
+            const power = parseInt(document.getElementById(`player${playerNum}Power`).value);
+            document.getElementById(`player${playerNum}PowerValue`).textContent = power;
+        }
+        // Set up game controls
+        function setupControls() {
+            // Player 1 controls
+            document.getElementById('player1Angle').addEventListener('input', () => {
+                updateBarrelAngle(1);
+            });
+            document.getElementById('player1Power').addEventListener('input', () => {
+                updatePowerDisplay(1);
+            });
+            document.getElementById('player1Shoot').addEventListener('click', () => {
+                if (currentPlayer === 1 && gameActive && !gamePaused) {
+                    shoot(1);
+                }
+            });
+            // Player 2 (computer) controls are disabled
+            document.getElementById('player2Shoot').disabled = true;
+            // Restart button
+            document.getElementById('restartButton').addEventListener('click', initGame);
+        }
+        // Highlight current player's controls
+        function updatePlayerTurnUI() {
+            // This would highlight the current player's tank and controls
+            // Implementation would go here
+        }
+        // Shoot projectile - simplified for visibility demo
+        function shoot(playerNum) {
+            if (!gameActive) return;
+            gamePaused = true;
+            // Create a simple projectile visualization
+            const projectile = document.createElement('div');
+            projectile.className = 'projectile';
+            projectile.style.width = '8px';
+            projectile.style.height = '8px';
+            // Position at tank barrel (simplified)
+            if (playerNum === 1) {
+                projectile.style.left = `${player1Position.x}px`;
+                projectile.style.top = `${player1Position.y - 20}px`;
+            } else {
+                projectile.style.right = `${GAME_WIDTH - player2Position.x}px`;
+                projectile.style.top = `${player2Position.y - 20}px`;
+            }
+            document.getElementById('projectiles').appendChild(projectile);
+            // Simple animation for demo
+            let pos = 0;
+            const id = setInterval(() => {
+                pos += 5;
+                if (playerNum === 1) {
+                    projectile.style.left = `${player1Position.x + pos}px`;
+                    projectile.style.top = `${player1Position.y - 20 - pos/2}px`;
+                } else {
+                    projectile.style.right = `${GAME_WIDTH - player2Position.x + pos}px`;
+                    projectile.style.top = `${player2Position.y - 20 - pos/2}px`;
+                }
+                if (pos > 300) {
+                    clearInterval(id);
+                    createExplosion(
+                        playerNum === 1 ?
+                        player1Position.x + pos :
+                        player2Position.x - pos,
+                        (playerNum === 1 ? player1Position.y : player2Position.y) - 20 - pos/2,
+                        30
+                    );
+                    projectile.remove();
+                    // Switch turns after delay
+                    setTimeout(() => {
+                        currentPlayer = currentPlayer === 1 ? 2 : 1;
+                        document.getElementById('gameStatus').textContent =
+                            currentPlayer === 1 ? "PLAYER 1'S TURN" : "COMPUTER'S TURN";
+                        gamePaused = false;
+                    }, 1000);
+                }
+            }, 20);
+        }
+        // Create explosion effect
+        function createExplosion(x, y, size) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = `${x - size/2}px`;
+            explosion.style.top = `${y - size/2}px`;
+            explosion.style.width = `${size}px`;
+            explosion.style.height = `${size}px`;
+            document.getElementById('explosions').appendChild(explosion);
+            // Animate explosion
+            setTimeout(() => {
+                explosion.style.transform = `scale(2)`;
+                explosion.style.opacity = '0';
+                setTimeout(() => {
+                    explosion.remove();
+                }, 500);
+            }, 50);
+        }
+        // Initialize the game
+        document.addEventListener('DOMContentLoaded', initGame);
+    </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=zebrakm/tanks-game" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>