Spaces:

Davi111
/

gg

Running

App Files Files Community

Davi111 commited on Apr 29, 2025

Commit

580aec7

verified ·

1 Parent(s): 96c6502

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: gg
+emoji: 🐳
+colorFrom: purple
+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,677 @@
-<!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="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dragon Ball MUGEN</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
+        body {
+            overflow: hidden;
+            font-family: 'Permanent Marker', cursive;
+            background-color: #111;
+            color: white;
+        }
+        #game-container {
+            position: relative;
+            width: 800px;
+            height: 400px;
+            margin: 0 auto;
+            background-image: url('https://i.imgur.com/3ZQjY7a.jpg');
+            background-size: cover;
+            border: 4px solid #f5d742;
+            box-shadow: 0 0 20px #f5d742;
+        }
+        .character {
+            position: absolute;
+            width: 80px;
+            height: 120px;
+            bottom: 50px;
+            transition: transform 0.1s;
+        }
+        #goku {
+            left: 100px;
+            background-image: url('https://i.imgur.com/J0q0Z7N.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+        #vegeta {
+            right: 100px;
+            background-image: url('https://i.imgur.com/5X9QZ7N.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            transform: scaleX(-1);
+        }
+        .health-bar {
+            height: 20px;
+            background-color: #333;
+            border: 2px solid #fff;
+            position: relative;
+        }
+        .health-fill {
+            height: 100%;
+            background-color: #ff0000;
+            transition: width 0.3s;
+        }
+        .ki-bar {
+            height: 10px;
+            background-color: #333;
+            border: 1px solid #fff;
+            position: relative;
+        }
+        .ki-fill {
+            height: 100%;
+            background-color: #00aaff;
+            transition: width 0.3s;
+        }
+        .attack-effect {
+            position: absolute;
+            width: 60px;
+            height: 40px;
+            background-image: url('https://i.imgur.com/8Q9QZ7N.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            opacity: 0;
+        }
+        .kamehameha {
+            position: absolute;
+            width: 300px;
+            height: 60px;
+            background-image: url('https://i.imgur.com/9Q9QZ7N.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            opacity: 0;
+        }
+        .power-up {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background-image: url('https://i.imgur.com/7Q9QZ7N.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            opacity: 0;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+        #start-screen, #game-over {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+        }
+        .title {
+            font-size: 4rem;
+            color: #f5d742;
+            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
+            margin-bottom: 2rem;
+        }
+        .btn {
+            padding: 1rem 2rem;
+            font-size: 1.5rem;
+            background-color: #f5d742;
+            color: #111;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-family: 'Permanent Marker', cursive;
+        }
+        .btn:hover {
+            background-color: #ff0000;
+            color: white;
+            transform: scale(1.1);
+        }
+        .combo-counter {
+            position: absolute;
+            font-size: 2rem;
+            color: #f5d742;
+            text-shadow: 0 0 5px #ff0000;
+            opacity: 0;
+        }
+    </style>
+</head>
+<body class="bg-black">
+    <div class="container mx-auto py-8">
+        <h1 class="text-4xl text-center text-yellow-400 font-bold mb-8">DRAGON BALL MUGEN</h1>
+        <div class="flex justify-between mb-4">
+            <div class="w-1/3">
+                <div class="text-xl text-red-500 mb-1">GOKU</div>
+                <div class="health-bar mb-1">
+                    <div id="goku-health" class="health-fill" style="width: 100%"></div>
+                </div>
+                <div class="ki-bar">
+                    <div id="goku-ki" class="ki-fill" style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="w-1/3 text-center text-yellow-400 text-xl">
+                <div id="timer">01:30</div>
+                <div id="round">Round 1</div>
+            </div>
+            <div class="w-1/3 text-right">
+                <div class="text-xl text-blue-400 mb-1">VEGETA</div>
+                <div class="health-bar mb-1">
+                    <div id="vegeta-health" class="health-fill" style="width: 100%"></div>
+                </div>
+                <div class="ki-bar">
+                    <div id="vegeta-ki" class="ki-fill" style="width: 0%"></div>
+                </div>
+            </div>
+        </div>
+        <div id="game-container">
+            <div id="goku" class="character"></div>
+            <div id="vegeta" class="character"></div>
+            <div id="goku-punch" class="attack-effect"></div>
+            <div id="vegeta-punch" class="attack-effect"></div>
+            <div id="goku-kamehameha" class="kamehameha"></div>
+            <div id="vegeta-final-flash" class="kamehameha"></div>
+            <div id="power-up" class="power-up"></div>
+            <div id="combo-counter" class="combo-counter">COMBO x5!</div>
+            <div id="start-screen">
+                <h2 class="title">DRAGON BALL MUGEN</h2>
+                <button id="start-btn" class="btn">COMEÇAR!</button>
+                <div class="mt-4 text-yellow-400">
+                    <p>Controles Goku: WASD para mover, J para soco, K para chute, L para Kamehameha</p>
+                    <p>Controles Vegeta: Setas para mover, N para soco, M para chute, , para Final Flash</p>
+                </div>
+            </div>
+            <div id="game-over" style="display: none;">
+                <h2 id="winner-text" class="title">GOKU VENCEU!</h2>
+                <button id="restart-btn" class="btn">JOGAR NOVAMENTE</button>
+            </div>
+        </div>
+        <div class="mt-8 text-center text-gray-400">
+            <p>Jogo criado com HTML, CSS e JavaScript | Estilo MUGEN</p>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            started: false,
+            timeLeft: 90, // 1:30 minutes
+            round: 1,
+            goku: {
+                health: 100,
+                ki: 0,
+                position: 100,
+                direction: 1,
+                attacking: false,
+                combo: 0,
+                lastAttackTime: 0
+            },
+            vegeta: {
+                health: 100,
+                ki: 0,
+                position: 700,
+                direction: -1,
+                attacking: false,
+                combo: 0,
+                lastAttackTime: 0
+            },
+            powerUp: {
+                active: false,
+                x: 0,
+                y: 0
+            }
+        };
+        // DOM elements
+        const gameContainer = document.getElementById('game-container');
+        const gokuElement = document.getElementById('goku');
+        const vegetaElement = document.getElementById('vegeta');
+        const gokuPunch = document.getElementById('goku-punch');
+        const vegetaPunch = document.getElementById('vegeta-punch');
+        const gokuKamehameha = document.getElementById('goku-kamehameha');
+        const vegetaFinalFlash = document.getElementById('vegeta-final-flash');
+        const powerUp = document.getElementById('power-up');
+        const comboCounter = document.getElementById('combo-counter');
+        const gokuHealth = document.getElementById('goku-health');
+        const vegetaHealth = document.getElementById('vegeta-health');
+        const gokuKi = document.getElementById('goku-ki');
+        const vegetaKi = document.getElementById('vegeta-ki');
+        const timerElement = document.getElementById('timer');
+        const roundElement = document.getElementById('round');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over');
+        const winnerText = document.getElementById('winner-text');
+        const startBtn = document.getElementById('start-btn');
+        const restartBtn = document.getElementById('restart-btn');
+        // Event listeners
+        startBtn.addEventListener('click', startGame);
+        restartBtn.addEventListener('click', restartGame);
+        // Keyboard state
+        const keys = {
+            w: false,
+            a: false,
+            s: false,
+            d: false,
+            j: false,
+            k: false,
+            l: false,
+            ArrowUp: false,
+            ArrowLeft: false,
+            ArrowDown: false,
+            ArrowRight: false,
+            n: false,
+            m: false,
+            ',': false
+        };
+        // Keyboard event listeners
+        document.addEventListener('keydown', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = true;
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (keys.hasOwnProperty(e.key)) {
+                keys[e.key] = false;
+            }
+        });
+        // Start game function
+        function startGame() {
+            gameState.started = true;
+            startScreen.style.display = 'none';
+            // Start game loop
+            gameLoop();
+            // Start timer
+            const timer = setInterval(() => {
+                gameState.timeLeft--;
+                const minutes = Math.floor(gameState.timeLeft / 60);
+                const seconds = gameState.timeLeft % 60;
+                timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                if (gameState.timeLeft <= 0) {
+                    clearInterval(timer);
+                    endGame();
+                }
+            }, 1000);
+            // Spawn power ups randomly
+            setInterval(() => {
+                if (!gameState.powerUp.active && Math.random() > 0.7) {
+                    spawnPowerUp();
+                }
+            }, 10000);
+        }
+        // Restart game function
+        function restartGame() {
+            // Reset game state
+            gameState.started = true;
+            gameState.timeLeft = 90;
+            gameState.round = 1;
+            gameState.goku = {
+                health: 100,
+                ki: 0,
+                position: 100,
+                direction: 1,
+                attacking: false,
+                combo: 0,
+                lastAttackTime: 0
+            };
+            gameState.vegeta = {
+                health: 100,
+                ki: 0,
+                position: 700,
+                direction: -1,
+                attacking: false,
+                combo: 0,
+                lastAttackTime: 0
+            };
+            gameState.powerUp.active = false;
+            // Update UI
+            gokuHealth.style.width = '100%';
+            vegetaHealth.style.width = '100%';
+            gokuKi.style.width = '0%';
+            vegetaKi.style.width = '0%';
+            timerElement.textContent = '01:30';
+            roundElement.textContent = 'Round 1';
+            gameOverScreen.style.display = 'none';
+            // Reset positions
+            gokuElement.style.left = '100px';
+            vegetaElement.style.left = '700px';
+            // Start game again
+            startGame();
+        }
+        // End game function
+        function endGame() {
+            gameState.started = false;
+            // Determine winner
+            if (gameState.goku.health > gameState.vegeta.health) {
+                winnerText.textContent = 'GOKU VENCEU!';
+            } else if (gameState.vegeta.health > gameState.goku.health) {
+                winnerText.textContent = 'VEGETA VENCEU!';
+            } else {
+                winnerText.textContent = 'EMPATE!';
+            }
+            gameOverScreen.style.display = 'flex';
+        }
+        // Spawn power up function
+        function spawnPowerUp() {
+            gameState.powerUp.active = true;
+            gameState.powerUp.x = Math.random() * 600 + 100;
+            gameState.powerUp.y = Math.random() * 200 + 100;
+            powerUp.style.left = `${gameState.powerUp.x}px`;
+            powerUp.style.top = `${gameState.powerUp.y}px`;
+            powerUp.style.opacity = '1';
+            // Power up disappears after 5 seconds
+            setTimeout(() => {
+                if (gameState.powerUp.active) {
+                    powerUp.style.opacity = '0';
+                    gameState.powerUp.active = false;
+                }
+            }, 5000);
+        }
+        // Check collision function
+        function checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
+            return x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2;
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameState.started) return;
+            // Update characters
+            updateCharacter('goku');
+            updateCharacter('vegeta');
+            // Check for power up collection
+            if (gameState.powerUp.active) {
+                const gokuRect = gokuElement.getBoundingClientRect();
+                const vegetaRect = vegetaElement.getBoundingClientRect();
+                const powerUpRect = powerUp.getBoundingClientRect();
+                if (checkCollision(
+                    gokuRect.left, gokuRect.top, gokuRect.width, gokuRect.height,
+                    powerUpRect.left, powerUpRect.top, powerUpRect.width, powerUpRect.height
+                )) {
+                    gameState.goku.ki = Math.min(100, gameState.goku.ki + 30);
+                    gokuKi.style.width = `${gameState.goku.ki}%`;
+                    powerUp.style.opacity = '0';
+                    gameState.powerUp.active = false;
+                    showCombo('goku', 'POWER UP!');
+                }
+                if (checkCollision(
+                    vegetaRect.left, vegetaRect.top, vegetaRect.width, vegetaRect.height,
+                    powerUpRect.left, powerUpRect.top, powerUpRect.width, powerUpRect.height
+                )) {
+                    gameState.vegeta.ki = Math.min(100, gameState.vegeta.ki + 30);
+                    vegetaKi.style.width = `${gameState.vegeta.ki}%`;
+                    powerUp.style.opacity = '0';
+                    gameState.powerUp.active = false;
+                    showCombo('vegeta', 'POWER UP!');
+                }
+            }
+            // Check for attacks
+            checkAttacks();
+            // Continue game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Update character function
+        function updateCharacter(character) {
+            const charState = gameState[character];
+            const charElement = character === 'goku' ? gokuElement : vegetaElement;
+            // Movement
+            if (character === 'goku') {
+                if (keys.a && charState.position > 0) {
+                    charState.position -= 5;
+                    charState.direction = -1;
+                    charElement.style.transform = 'scaleX(-1)';
+                }
+                if (keys.d && charState.position < 720) {
+                    charState.position += 5;
+                    charState.direction = 1;
+                    charElement.style.transform = 'scaleX(1)';
+                }
+            } else {
+                if (keys.ArrowLeft && charState.position > 0) {
+                    charState.position -= 5;
+                    charState.direction = -1;
+                    charElement.style.transform = 'scaleX(-1)';
+                }
+                if (keys.ArrowRight && charState.position < 720) {
+                    charState.position += 5;
+                    charState.direction = 1;
+                    charElement.style.transform = 'scaleX(1)';
+                }
+            }
+            // Update position
+            charElement.style.left = `${charState.position}px`;
+            // Regenerate ki
+            if (!charState.attacking) {
+                charState.ki = Math.min(100, charState.ki + 0.1);
+                if (character === 'goku') {
+                    gokuKi.style.width = `${charState.ki}%`;
+                } else {
+                    vegetaKi.style.width = `${charState.ki}%`;
+                }
+            }
+        }
+        // Check attacks function
+        function checkAttacks() {
+            const now = Date.now();
+            // Goku attacks
+            if (keys.j && now - gameState.goku.lastAttackTime > 500) {
+                performAttack('goku', 'punch', 10);
+                gameState.goku.lastAttackTime = now;
+            }
+            if (keys.k && now - gameState.goku.lastAttackTime > 500) {
+                performAttack('goku', 'kick', 15);
+                gameState.goku.lastAttackTime = now;
+            }
+            if (keys.l && gameState.goku.ki >= 50 && now - gameState.goku.lastAttackTime > 1000) {
+                performAttack('goku', 'kamehameha', 30);
+                gameState.goku.ki -= 50;
+                gokuKi.style.width = `${gameState.goku.ki}%`;
+                gameState.goku.lastAttackTime = now;
+            }
+            // Vegeta attacks
+            if (keys.n && now - gameState.vegeta.lastAttackTime > 500) {
+                performAttack('vegeta', 'punch', 10);
+                gameState.vegeta.lastAttackTime = now;
+            }
+            if (keys.m && now - gameState.vegeta.lastAttackTime > 500) {
+                performAttack('vegeta', 'kick', 15);
+                gameState.vegeta.lastAttackTime = now;
+            }
+            if (keys[','] && gameState.vegeta.ki >= 50 && now - gameState.vegeta.lastAttackTime > 1000) {
+                performAttack('vegeta', 'finalflash', 30);
+                gameState.vegeta.ki -= 50;
+                vegetaKi.style.width = `${gameState.vegeta.ki}%`;
+                gameState.vegeta.lastAttackTime = now;
+            }
+        }
+        // Perform attack function
+        function performAttack(character, attackType, damage) {
+            const charState = gameState[character];
+            const opponent = character === 'goku' ? 'vegeta' : 'goku';
+            const opponentElement = opponent === 'goku' ? gokuElement : vegetaElement;
+            charState.attacking = true;
+            // Show attack effect
+            if (attackType === 'punch' || attackType === 'kick') {
+                const attackElement = character === 'goku' ? gokuPunch : vegetaPunch;
+                attackElement.style.left = `${charState.position + (charState.direction === 1 ? 60 : -40)}px`;
+                attackElement.style.top = '180px';
+                attackElement.style.opacity = '1';
+                attackElement.style.transform = `scaleX(${charState.direction})`;
+                setTimeout(() => {
+                    attackElement.style.opacity = '0';
+                    charState.attacking = false;
+                }, 200);
+            } else if (attackType === 'kamehameha') {
+                const attackElement = character === 'goku' ? gokuKamehameha : vegetaFinalFlash;
+                attackElement.style.left = `${charState.position + (charState.direction === 1 ? 80 : -300)}px`;
+                attackElement.style.top = '150px';
+                attackElement.style.opacity = '1';
+                attackElement.style.transform = `scaleX(${charState.direction})`;
+                setTimeout(() => {
+                    attackElement.style.opacity = '0';
+                    charState.attacking = false;
+                }, 1000);
+            }
+            // Check if attack hits
+            setTimeout(() => {
+                const charRect = character === 'goku' ? gokuElement.getBoundingClientRect() : vegetaElement.getBoundingClientRect();
+                const opponentRect = opponentElement.getBoundingClientRect();
+                let attackWidth = 60;
+                let attackHeight = 40;
+                if (attackType === 'kamehameha' || attackType === 'finalflash') {
+                    attackWidth = 300;
+                    attackHeight = 60;
+                }
+                const attackX = charState.position + (charState.direction === 1 ? 80 : -attackWidth);
+                if (checkCollision(
+                    attackX, 150, attackWidth, attackHeight,
+                    gameState[opponent].position, 180, 80, 120
+                )) {
+                    // Hit opponent
+                    gameState[opponent].health = Math.max(0, gameState[opponent].health - damage);
+                    if (character === 'goku') {
+                        vegetaHealth.style.width = `${gameState.vegeta.health}%`;
+                    } else {
+                        gokuHealth.style.width = `${gameState.goku.health}%`;
+                    }
+                    // Combo counter
+                    charState.combo++;
+                    if (charState.combo > 1) {
+                        showCombo(character, `COMBO x${charState.combo}!`);
+                    }
+                    // Knockback effect
+                    opponentElement.style.transform = `translateX(${character === 'goku' ? '20px' : '-20px'}) scaleX(${gameState[opponent].direction})`;
+                    setTimeout(() => {
+                        opponentElement.style.transform = `scaleX(${gameState[opponent].direction})`;
+                    }, 100);
+                    // Check if opponent is defeated
+                    if (gameState[opponent].health <= 0) {
+                        endGame();
+                    }
+                } else {
+                    // Missed attack
+                    charState.combo = 0;
+                }
+            }, attackType === 'punch' || attackType === 'kick' ? 100 : 300);
+        }
+        // Show combo function
+        function showCombo(character, text) {
+            comboCounter.textContent = text;
+            if (character === 'goku') {
+                comboCounter.style.left = `${gameState.goku.position - 50}px`;
+                comboCounter.style.top = '100px';
+                comboCounter.style.color = '#f5d742';
+            } else {
+                comboCounter.style.left = `${gameState.vegeta.position - 50}px`;
+                comboCounter.style.top = '100px';
+                comboCounter.style.color = '#00aaff';
+            }
+            comboCounter.style.opacity = '1';
+            setTimeout(() => {
+                comboCounter.style.opacity = '0';
+            }, 1000);
+        }
+    </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=Davi111/gg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Crie um jogo mugen de dragonball