Spaces:

pijou
/

sharky-poop

Running

App Files Files Community

pijou commited on Apr 3

Commit

f961199

verified ·

1 Parent(s): 77a8c39

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +389 -19

README.md CHANGED Viewed

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

 ---
+title: sharky-poop
+emoji: 🐳
 colorFrom: pink
+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,389 @@
-<!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>2D Fighting Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom CSS for animations and game elements */
+        body {
+            overflow: hidden;
+            background-color: #1a202c;
+        }
+        #game-container {
+            position: relative;
+            width: 800px;
+            height: 400px;
+            margin: 0 auto;
+            background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');
+            background-size: cover;
+            overflow: hidden;
+        }
+        .character {
+            position: absolute;
+            width: 80px;
+            height: 120px;
+            bottom: 0;
+            transition: transform 0.1s;
+        }
+        #player1 {
+            left: 100px;
+            background-color: #4299e1;
+        }
+        #player2 {
+            right: 100px;
+            background-color: #f56565;
+        }
+        .health-bar {
+            height: 20px;
+            transition: width 0.3s;
+        }
+        #player1-health {
+            background-color: #4299e1;
+        }
+        #player2-health {
+            background-color: #f56565;
+        }
+        .attack-effect {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: rgba(255, 255, 0, 0.7);
+            border-radius: 50%;
+            animation: attack 0.3s forwards;
+            opacity: 0;
+        }
+        @keyframes attack {
+            0% { transform: scale(0.5); opacity: 0.7; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        .jump {
+            animation: jump 0.8s ease-out;
+        }
+        @keyframes jump {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-150px); }
+            100% { transform: translateY(0); }
+        }
+        .hit {
+            animation: hit 0.3s;
+        }
+        @keyframes hit {
+            0% { transform: translateX(0); }
+            25% { transform: translateX(10px); }
+            50% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+            100% { transform: translateX(0); }
+        }
+        #game-over {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            z-index: 100;
+        }
+        .controls {
+            position: absolute;
+            bottom: 10px;
+            width: 100%;
+            text-align: center;
+            color: white;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <div class="container mx-auto py-8">
+        <h1 class="text-4xl font-bold text-center mb-6">2D Fighting Game</h1>
+        <div class="flex justify-between mb-4">
+            <div class="w-1/2 pr-4">
+                <h2 class="text-xl font-semibold mb-2">Player 1 (Blue)</h2>
+                <div class="health-container bg-gray-700 rounded h-6 mb-2">
+                    <div id="player1-health" class="health-bar rounded" style="width: 100%"></div>
+                </div>
+                <p class="text-sm">Controls: WASD to move, Space to attack</p>
+            </div>
+            <div class="w-1/2 pl-4">
+                <h2 class="text-xl font-semibold mb-2">Player 2 (Red)</h2>
+                <div class="health-container bg-gray-700 rounded h-6 mb-2">
+                    <div id="player2-health" class="health-bar rounded" style="width: 100%"></div>
+                </div>
+                <p class="text-sm">Controls: Arrow keys to move, Enter to attack</p>
+            </div>
+        </div>
+        <div id="game-container" class="border-4 border-gray-600 rounded-lg relative">
+            <div id="player1" class="character rounded-t-lg"></div>
+            <div id="player2" class="character rounded-t-lg"></div>
+            <div id="game-over">
+                <h2 id="winner-text" class="text-4xl font-bold mb-6"></h2>
+                <button id="restart-btn" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg font-semibold">
+                    Play Again
+                </button>
+            </div>
+            <div class="controls">
+                <p>First to reduce opponent's health to zero wins!</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const gameContainer = document.getElementById('game-container');
+            const player1 = document.getElementById('player1');
+            const player2 = document.getElementById('player2');
+            const player1Health = document.getElementById('player1-health');
+            const player2Health = document.getElementById('player2-health');
+            const gameOverScreen = document.getElementById('game-over');
+            const winnerText = document.getElementById('winner-text');
+            const restartBtn = document.getElementById('restart-btn');
+            // Game state
+            const gameState = {
+                player1: {
+                    x: 100,
+                    y: 0,
+                    width: 80,
+                    height: 120,
+                    speed: 5,
+                    health: 100,
+                    isJumping: false,
+                    isAttacking: false,
+                    direction: 'right'
+                },
+                player2: {
+                    x: gameContainer.offsetWidth - 180,
+                    y: 0,
+                    width: 80,
+                    height: 120,
+                    speed: 5,
+                    health: 100,
+                    isJumping: false,
+                    isAttacking: false,
+                    direction: 'left'
+                },
+                gameRunning: true
+            };
+            // Key states
+            const keys = {
+                w: false,
+                a: false,
+                s: false,
+                d: false,
+                space: false,
+                arrowup: false,
+                arrowleft: false,
+                arrowdown: false,
+                arrowright: false,
+                enter: false
+            };
+            // Event listeners for keyboard
+            document.addEventListener('keydown', (e) => {
+                if (!gameState.gameRunning) return;
+                switch(e.key.toLowerCase()) {
+                    case 'w': keys.w = true; break;
+                    case 'a': keys.a = true; break;
+                    case 's': keys.s = true; break;
+                    case 'd': keys.d = true; break;
+                    case ' ': keys.space = true; break;
+                    case 'arrowup': keys.arrowup = true; break;
+                    case 'arrowleft': keys.arrowleft = true; break;
+                    case 'arrowdown': keys.arrowdown = true; break;
+                    case 'arrowright': keys.arrowright = true; break;
+                    case 'enter': keys.enter = true; break;
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                switch(e.key.toLowerCase()) {
+                    case 'w': keys.w = false; break;
+                    case 'a': keys.a = false; break;
+                    case 's': keys.s = false; break;
+                    case 'd': keys.d = false; break;
+                    case ' ': keys.space = false; break;
+                    case 'arrowup': keys.arrowup = false; break;
+                    case 'arrowleft': keys.arrowleft = false; break;
+                    case 'arrowdown': keys.arrowdown = false; break;
+                    case 'arrowright': keys.arrowright = false; break;
+                    case 'enter': keys.enter = false; break;
+                }
+            });
+            // Restart game
+            restartBtn.addEventListener('click', () => {
+                gameState.player1.health = 100;
+                gameState.player2.health = 100;
+                gameState.player1.x = 100;
+                gameState.player2.x = gameContainer.offsetWidth - 180;
+                gameState.player1.isJumping = false;
+                gameState.player2.isJumping = false;
+                gameState.player1.isAttacking = false;
+                gameState.player2.isAttacking = false;
+                gameState.gameRunning = true;
+                player1Health.style.width = '100%';
+                player2Health.style.width = '100%';
+                gameOverScreen.style.display = 'none';
+            });
+            // Game loop
+            function gameLoop() {
+                if (!gameState.gameRunning) return;
+                // Player 1 movement
+                if (keys.a && gameState.player1.x > 0) {
+                    gameState.player1.x -= gameState.player1.speed;
+                    gameState.player1.direction = 'left';
+                }
+                if (keys.d && gameState.player1.x < gameContainer.offsetWidth - gameState.player1.width) {
+                    gameState.player1.x += gameState.player1.speed;
+                    gameState.player1.direction = 'right';
+                }
+                if (keys.w && !gameState.player1.isJumping) {
+                    gameState.player1.isJumping = true;
+                    player1.classList.add('jump');
+                    setTimeout(() => {
+                        player1.classList.remove('jump');
+                        gameState.player1.isJumping = false;
+                    }, 800);
+                }
+                // Player 1 attack
+                if (keys.space && !gameState.player1.isAttacking) {
+                    gameState.player1.isAttacking = true;
+                    const attackX = gameState.player1.direction === 'right' ?
+                        gameState.player1.x + gameState.player1.width :
+                        gameState.player1.x - 40;
+                    createAttackEffect(attackX, gameState.player1.y + 40, gameState.player1.direction);
+                    setTimeout(() => {
+                        gameState.player1.isAttacking = false;
+                    }, 300);
+                    checkAttackHit('player1');
+                }
+                // Player 2 movement
+                if (keys.arrowleft && gameState.player2.x > 0) {
+                    gameState.player2.x -= gameState.player2.speed;
+                    gameState.player2.direction = 'left';
+                }
+                if (keys.arrowright && gameState.player2.x < gameContainer.offsetWidth - gameState.player2.width) {
+                    gameState.player2.x += gameState.player2.speed;
+                    gameState.player2.direction = 'right';
+                }
+                if (keys.arrowup && !gameState.player2.isJumping) {
+                    gameState.player2.isJumping = true;
+                    player2.classList.add('jump');
+                    setTimeout(() => {
+                        player2.classList.remove('jump');
+                        gameState.player2.isJumping = false;
+                    }, 800);
+                }
+                // Player 2 attack
+                if (keys.enter && !gameState.player2.isAttacking) {
+                    gameState.player2.isAttacking = true;
+                    const attackX = gameState.player2.direction === 'right' ?
+                        gameState.player2.x + gameState.player2.width :
+                        gameState.player2.x - 40;
+                    createAttackEffect(attackX, gameState.player2.y + 40, gameState.player2.direction);
+                    setTimeout(() => {
+                        gameState.player2.isAttacking = false;
+                    }, 300);
+                    checkAttackHit('player2');
+                }
+                // Update positions
+                player1.style.left = gameState.player1.x + 'px';
+                player2.style.left = gameState.player2.x + 'px';
+                requestAnimationFrame(gameLoop);
+            }
+            // Create attack visual effect
+            function createAttackEffect(x, y, direction) {
+                const effect = document.createElement('div');
+                effect.className = 'attack-effect';
+                effect.style.left = x + 'px';
+                effect.style.top = y + 'px';
+                gameContainer.appendChild(effect);
+                setTimeout(() => {
+                    effect.remove();
+                }, 300);
+            }
+            // Check if attack hits opponent
+            function checkAttackHit(attacker) {
+                const attackerState = gameState[attacker];
+                const defender = attacker === 'player1' ? 'player2' : 'player1';
+                const defenderState = gameState[defender];
+                const defenderElement = document.getElementById(defender);
+                // Simple collision detection
+                const attackRange = 50;
+                const attackerCenterX = attackerState.x + attackerState.width / 2;
+                const defenderCenterX = defenderState.x + defenderState.width / 2;
+                const distance = Math.abs(attackerCenterX - defenderCenterX);
+                if (distance < attackRange && !defenderState.isJumping) {
+                    // Hit successful
+                    defenderState.health -= 10;
+                    document.getElementById(`${defender}-health`).style.width = `${defenderState.health}%`;
+                    // Visual feedback for hit
+                    defenderElement.classList.add('hit');
+                    setTimeout(() => {
+                        defenderElement.classList.remove('hit');
+                    }, 300);
+                    // Check if game over
+                    if (defenderState.health <= 0) {
+                        gameState.gameRunning = false;
+                        gameOverScreen.style.display = 'flex';
+                        winnerText.textContent = `${attacker === 'player1' ? 'Player 1 (Blue)' : 'Player 2 (Red)'} Wins!`;
+                    }
+                }
+            }
+            // Start the game
+            gameLoop();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=pijou/sharky-poop" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>