Spaces:

pijou
/

newlll

Running

App Files Files Community

pijou commited on Apr 6

Commit

762708f

verified ·

1 Parent(s): de0c171

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: newlll
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 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,871 @@
-<!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>Raccoon Rumble</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
+    <style>
+        @font-face {
+            font-family: 'PressStart2P';
+            src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #111;
+            font-family: 'PressStart2P', cursive;
+        }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #game-canvas {
+            display: block;
+            margin: 0 auto;
+            background-color: #000;
+        }
+        .health-bar {
+            height: 30px;
+            transition: width 0.3s ease;
+        }
+        .combo-text {
+            position: absolute;
+            color: #ff0;
+            font-size: 24px;
+            text-shadow: 0 0 10px #f80;
+            animation: pop 0.5s ease-out;
+        }
+        @keyframes pop {
+            0% { transform: scale(0.5); opacity: 0; }
+            80% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        .menu-screen {
+            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;
+            color: white;
+        }
+        .menu-title {
+            font-size: 48px;
+            color: #ff9500;
+            margin-bottom: 40px;
+            text-shadow: 0 0 10px #ff0;
+        }
+        .menu-button {
+            background-color: #ff9500;
+            color: #000;
+            border: none;
+            padding: 15px 30px;
+            margin: 10px;
+            font-size: 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s;
+            font-family: 'PressStart2P', cursive;
+        }
+        .menu-button:hover {
+            background-color: #ff0;
+            transform: scale(1.05);
+        }
+        .controls-display {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 30px;
+            max-width: 600px;
+        }
+        .control-item {
+            display: flex;
+            align-items: center;
+            margin: 10px 0;
+        }
+        .key {
+            background-color: #333;
+            color: white;
+            padding: 5px 10px;
+            margin-right: 15px;
+            border-radius: 5px;
+            min-width: 40px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="game-canvas"></div>
+        <!-- Main Menu -->
+        <div id="main-menu" class="menu-screen">
+            <h1 class="menu-title">RACCOON RUMBLE</h1>
+            <button id="start-button" class="menu-button">START GAME</button>
+            <button id="controls-button" class="menu-button">CONTROLS</button>
+            <div class="mt-8 text-center">
+                <p>Player 1: WASD + JKL</p>
+                <p>Player 2: Arrow Keys + Numpad 1-3</p>
+                <p>Or connect a gamepad!</p>
+            </div>
+        </div>
+        <!-- Controls Screen -->
+        <div id="controls-screen" class="menu-screen" style="display: none;">
+            <h1 class="menu-title">CONTROLS</h1>
+            <div class="controls-display">
+                <h2 class="text-xl mb-4 text-center">Player 1 (Keyboard)</h2>
+                <div class="control-item">
+                    <div class="key">W</div>
+                    <span>Jump</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">A</div>
+                    <span>Move Left</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">D</div>
+                    <span>Move Right</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">J</div>
+                    <span>Light Attack</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">K</div>
+                    <span>Heavy Attack</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">L</div>
+                    <span>Special Attack</span>
+                </div>
+                <h2 class="text-xl mt-8 mb-4 text-center">Player 2 (Keyboard)</h2>
+                <div class="control-item">
+                    <div class="key">↑</div>
+                    <span>Jump</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">←</div>
+                    <span>Move Left</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">→</div>
+                    <span>Move Right</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">Num 1</div>
+                    <span>Light Attack</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">Num 2</div>
+                    <span>Heavy Attack</span>
+                </div>
+                <div class="control-item">
+                    <div class="key">Num 3</div>
+                    <span>Special Attack</span>
+                </div>
+                <p class="mt-8 text-center">Gamepads: Use left stick/d-pad to move and face buttons for attacks</p>
+            </div>
+            <button id="back-button" class="menu-button mt-8">BACK TO MENU</button>
+        </div>
+        <!-- Game Over Screen -->
+        <div id="game-over-screen" class="menu-screen" style="display: none;">
+            <h1 id="winner-text" class="menu-title">PLAYER 1 WINS!</h1>
+            <button id="rematch-button" class="menu-button">REMATCH</button>
+            <button id="menu-button" class="menu-button">MAIN MENU</button>
+        </div>
+    </div>
+    <script>
+        // Game configuration
+        const config = {
+            type: Phaser.AUTO,
+            width: 1024,
+            height: 576,
+            physics: {
+                default: 'arcade',
+                arcade: {
+                    gravity: { y: 800 },
+                    debug: false
+                }
+            },
+            scene: {
+                preload: preload,
+                create: create,
+                update: update
+            },
+            parent: 'game-container',
+            canvas: document.getElementById('game-canvas')
+        };
+        // Game variables
+        let game = new Phaser.Game(config);
+        let player1, player2;
+        let platforms;
+        let cursors, p2Cursors;
+        let gamepads = [];
+        let comboCount = 0;
+        let lastHitTime = 0;
+        let comboTexts = [];
+        let background;
+        let hitSound, jumpSound, specialSound, backgroundMusic;
+        let gameState = 'menu'; // menu, playing, gameover
+        // Raccoon character class
+        class Raccoon extends Phaser.Physics.Arcade.Sprite {
+            constructor(scene, x, y, isPlayer1) {
+                super(scene, x, y, 'raccoon');
+                this.isPlayer1 = isPlayer1;
+                this.health = 100;
+                this.maxHealth = 100;
+                this.isAttacking = false;
+                this.isBlocking = false;
+                this.isJumping = false;
+                this.isSpecial = false;
+                this.comboCount = 0;
+                this.lastHitTime = 0;
+                this.facingRight = isPlayer1;
+                this.specialMeter = 0;
+                this.maxSpecialMeter = 100;
+                this.invulnerable = false;
+                scene.add.existing(this);
+                scene.physics.add.existing(this);
+                this.setCollideWorldBounds(true);
+                this.setBounce(0.2);
+                this.setDragX(400);
+                this.setSize(60, 90);
+                this.setOffset(35, 30);
+                // Create animations
+                this.createAnimations();
+                // Set up attack hitboxes
+                this.attackHitbox = scene.add.zone(0, 0, 80, 80);
+                scene.physics.add.existing(this.attackHitbox);
+                this.attackHitbox.body.enable = false;
+                // Health bar
+                this.healthBar = scene.add.rectangle(
+                    isPlayer1 ? 100 : config.width - 100,
+                    50,
+                    this.health * 2,
+                    20,
+                    isPlayer1 ? 0x00ff00 : 0xff0000
+                );
+                this.healthBar.setOrigin(isPlayer1 ? 0 : 1, 0.5);
+                // Special meter
+                this.specialMeterBar = scene.add.rectangle(
+                    isPlayer1 ? 100 : config.width - 100,
+                    80,
+                    0,
+                    10,
+                    0x00aaff
+                );
+                this.specialMeterBar.setOrigin(isPlayer1 ? 0 : 1, 0.5);
+                // Player indicator
+                this.playerIndicator = scene.add.text(
+                    isPlayer1 ? 20 : config.width - 20,
+                    50,
+                    isPlayer1 ? 'P1' : 'P2',
+                    {
+                        fontSize: '24px',
+                        fill: isPlayer1 ? '#00ff00' : '#ff0000',
+                        fontFamily: 'PressStart2P'
+                    }
+                );
+                this.playerIndicator.setOrigin(isPlayer1 ? 0 : 1, 0.5);
+            }
+            createAnimations() {
+                const anims = this.scene.anims;
+                // Idle animation
+                anims.create({
+                    key: `idle-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 0, end: 3 }),
+                    frameRate: 8,
+                    repeat: -1
+                });
+                // Walk animation
+                anims.create({
+                    key: `walk-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 4, end: 7 }),
+                    frameRate: 12,
+                    repeat: -1
+                });
+                // Jump animation
+                anims.create({
+                    key: `jump-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 8, end: 11 }),
+                    frameRate: 8,
+                    repeat: 0
+                });
+                // Light attack animation
+                anims.create({
+                    key: `light-attack-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 12, end: 15 }),
+                    frameRate: 12,
+                    repeat: 0
+                });
+                // Heavy attack animation
+                anims.create({
+                    key: `heavy-attack-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 16, end: 19 }),
+                    frameRate: 10,
+                    repeat: 0
+                });
+                // Special attack animation
+                anims.create({
+                    key: `special-attack-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 20, end: 23 }),
+                    frameRate: 8,
+                    repeat: 0
+                });
+                // Hit animation
+                anims.create({
+                    key: `hit-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 24, end: 27 }),
+                    frameRate: 10,
+                    repeat: 0
+                });
+                // Block animation
+                anims.create({
+                    key: `block-${this.isPlayer1 ? 'p1' : 'p2'}`,
+                    frames: anims.generateFrameNumbers('raccoon', { start: 28, end: 31 }),
+                    frameRate: 8,
+                    repeat: 0
+                });
+            }
+            update(cursors, gamepad) {
+                if (this.health <= 0) return;
+                // Update health bar
+                this.healthBar.width = (this.health / this.maxHealth) * 200;
+                // Update special meter
+                this.specialMeterBar.width = (this.specialMeter / this.maxSpecialMeter) * 200;
+                // Handle movement
+                if (!this.isAttacking && !this.isBlocking) {
+                    let moveX = 0;
+                    // Keyboard controls
+                    if (cursors) {
+                        if (cursors.left.isDown) {
+                            moveX = -1;
+                            this.facingRight = false;
+                        } else if (cursors.right.isDown) {
+                            moveX = 1;
+                            this.facingRight = true;
+                        }
+                        if (cursors.up.isDown && this.body.onFloor()) {
+                            this.jump();
+                        }
+                    }
+                    // Gamepad controls
+                    if (gamepad) {
+                        if (gamepad.axes[0] < -0.5 || gamepad.buttons[14].pressed) {
+                            moveX = -1;
+                            this.facingRight = false;
+                        } else if (gamepad.axes[0] > 0.5 || gamepad.buttons[15].pressed) {
+                            moveX = 1;
+                            this.facingRight = true;
+                        }
+                        if ((gamepad.buttons[0].pressed || gamepad.buttons[12].pressed) && this.body.onFloor()) {
+                            this.jump();
+                        }
+                    }
+                    this.setVelocityX(moveX * 200);
+                    // Play animations based on state
+                    if (this.body.onFloor()) {
+                        if (moveX !== 0) {
+                            this.play(`walk-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                        } else {
+                            this.play(`idle-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                        }
+                    }
+                }
+                // Flip sprite based on facing direction
+                this.flipX = !this.facingRight;
+                // Position attack hitbox
+                this.positionAttackHitbox();
+                // Handle attacks
+                if (!this.isAttacking && !this.isBlocking) {
+                    // Keyboard attacks
+                    if (cursors) {
+                        if (cursors.lightAttack.isDown) {
+                            this.lightAttack();
+                        } else if (cursors.heavyAttack.isDown) {
+                            this.heavyAttack();
+                        } else if (cursors.specialAttack.isDown && this.specialMeter >= this.maxSpecialMeter) {
+                            this.specialAttack();
+                        }
+                    }
+                    // Gamepad attacks
+                    if (gamepad) {
+                        if (gamepad.buttons[2].pressed) {
+                            this.lightAttack();
+                        } else if (gamepad.buttons[1].pressed) {
+                            this.heavyAttack();
+                        } else if (gamepad.buttons[3].pressed && this.specialMeter >= this.maxSpecialMeter) {
+                            this.specialAttack();
+                        }
+                    }
+                }
+                // Handle blocking
+                if (!this.isAttacking) {
+                    let isBlocking = false;
+                    // Keyboard blocking
+                    if (cursors && cursors.down.isDown && !this.body.onFloor()) {
+                        isBlocking = true;
+                    }
+                    // Gamepad blocking
+                    if (gamepad && (gamepad.buttons[8].pressed || gamepad.buttons[9].pressed)) {
+                        isBlocking = true;
+                    }
+                    if (isBlocking && !this.isBlocking) {
+                        this.block();
+                    } else if (!isBlocking && this.isBlocking) {
+                        this.releaseBlock();
+                    }
+                }
+                // Update special meter (gain over time)
+                if (this.specialMeter < this.maxSpecialMeter) {
+                    this.specialMeter += 0.1;
+                    if (this.specialMeter > this.maxSpecialMeter) {
+                        this.specialMeter = this.maxSpecialMeter;
+                    }
+                }
+            }
+            positionAttackHitbox() {
+                if (!this.attackHitbox) return;
+                const offsetX = this.facingRight ? 50 : -50;
+                this.attackHitbox.x = this.x + offsetX;
+                this.attackHitbox.y = this.y - 20;
+            }
+            jump() {
+                if (this.body.onFloor()) {
+                    this.setVelocityY(-500);
+                    this.play(`jump-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                    this.isJumping = true;
+                    jumpSound.play();
+                    this.scene.time.delayedCall(1000, () => {
+                        this.isJumping = false;
+                    });
+                }
+            }
+            lightAttack() {
+                this.isAttacking = true;
+                this.play(`light-attack-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                hitSound.play();
+                // Enable hitbox
+                this.attackHitbox.body.enable = true;
+                this.attackHitbox.body.setSize(80, 80);
+                // Check for hits
+                this.scene.physics.overlap(this.attackHitbox, this.isPlayer1 ? player2 : player1, this.handleHit.bind(this, 10, 'light'));
+                // Disable hitbox after animation
+                this.scene.time.delayedCall(300, () => {
+                    this.attackHitbox.body.enable = false;
+                    this.isAttacking = false;
+                });
+            }
+            heavyAttack() {
+                this.isAttacking = true;
+                this.play(`heavy-attack-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                hitSound.play({ volume: 0.8 });
+                // Enable hitbox
+                this.attackHitbox.body.enable = true;
+                this.attackHitbox.body.setSize(100, 100);
+                // Check for hits
+                this.scene.physics.overlap(this.attackHitbox, this.isPlayer1 ? player2 : player1, this.handleHit.bind(this, 20, 'heavy'));
+                // Disable hitbox after animation
+                this.scene.time.delayedCall(400, () => {
+                    this.attackHitbox.body.enable = false;
+                    this.isAttacking = false;
+                });
+            }
+            specialAttack() {
+                this.isAttacking = true;
+                this.isSpecial = true;
+                this.play(`special-attack-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+                specialSound.play();
+                // Reset special meter
+                this.specialMeter = 0;
+                // Enable hitbox (larger for special)
+                this.attackHitbox.body.enable = true;
+                this.attackHitbox.body.setSize(120, 120);
+                // Check for hits
+                this.scene.physics.overlap(this.attackHitbox, this.isPlayer1 ? player2 : player1, this.handleHit.bind(this, 30, 'special'));
+                // Disable hitbox after animation
+                this.scene.time.delayedCall(600, () => {
+                    this.attackHitbox.body.enable = false;
+                    this.isAttacking = false;
+                    this.isSpecial = false;
+                });
+            }
+            block() {
+                this.isBlocking = true;
+                this.setVelocityX(0);
+                this.play(`block-${this.isPlayer1 ? 'p1' : 'p2'}`, true);
+            }
+            releaseBlock() {
+                this.isBlocking = false;
+            }
+            handleHit(damage, attackType, attacker, defender) {
+                if (defender.invulnerable) return;
+                // Check if defender is blocking
+                if (defender.isBlocking) {
+                    // Reduce damage when blocking
+                    damage *= 0.3;
+                    // Play block animation
+                    defender.play(`block-${defender.isPlayer1 ? 'p1' : 'p2'}`, true);
+                    // Small knockback
+                    const knockback = this.facingRight ? -100 : 100;
+                    defender.setVelocityX(knockback);
+                    // Make defender briefly invulnerable
+                    defender.invulnerable = true;
+                    this.scene.time.delayedCall(500, () => {
+                        defender.invulnerable = false;
+                    });
+                } else {
+                    // Play hit animation
+                    defender.play(`hit-${defender.isPlayer1 ? 'p1' : 'p2'}`, true);
+                    // Apply knockback based on attack type
+                    let knockback = 0;
+                    if (attackType === 'light') knockback = this.facingRight ? 150 : -150;
+                    else if (attackType === 'heavy') knockback = this.facingRight ? 250 : -250;
+                    else if (attackType === 'special') knockback = this.facingRight ? 400 : -400;
+                    defender.setVelocityX(knockback);
+                    defender.setVelocityY(-100);
+                    // Make defender briefly invulnerable
+                    defender.invulnerable = true;
+                    this.scene.time.delayedCall(800, () => {
+                        defender.invulnerable = false;
+                    });
+                }
+                // Apply damage
+                defender.health -= damage;
+                if (defender.health < 0) defender.health = 0;
+                // Add to attacker's special meter
+                this.specialMeter += damage;
+                if (this.specialMeter > this.maxSpecialMeter) {
+                    this.specialMeter = this.maxSpecialMeter;
+                }
+                // Combo system
+                const now = this.scene.time.now;
+                if (now - this.lastHitTime < 1000) {
+                    this.comboCount++;
+                    // Show combo text
+                    const comboText = this.scene.add.text(
+                        defender.x,
+                        defender.y - 100,
+                        `COMBO x${this.comboCount + 1}!`,
+                        {
+                            fontSize: '32px',
+                            fill: '#ff0',
+                            fontFamily: 'PressStart2P',
+                            stroke: '#000',
+                            strokeThickness: 4
+                        }
+                    );
+                    comboText.setOrigin(0.5);
+                    // Add to combo texts array for cleanup
+                    comboTexts.push(comboText);
+                    // Animate combo text
+                    this.scene.tweens.add({
+                        targets: comboText,
+                        y: comboText.y - 50,
+                        alpha: 0,
+                        duration: 1000,
+                        onComplete: () => {
+                            comboText.destroy();
+                            comboTexts = comboTexts.filter(t => t !== comboText);
+                        }
+                    });
+                } else {
+                    this.comboCount = 0;
+                }
+                this.lastHitTime = now;
+                // Check for KO
+                if (defender.health <= 0) {
+                    this.scene.gameOver(this.isPlayer1 ? 'Player 1' : 'Player 2');
+                }
+            }
+        }
+        // Preload assets
+        function preload() {
+            // Load raccoon sprite sheet
+            this.load.spritesheet('raccoon', 'https://i.imgur.com/JQlY5zX.png', {
+                frameWidth: 128,
+                frameHeight: 128
+            });
+            // Load backgrounds
+            this.load.image('background1', 'https://i.imgur.com/XH7QZ0a.png');
+            this.load.image('background2', 'https://i.imgur.com/Y9vBQ3c.png');
+            // Load platforms
+            this.load.image('platform', 'https://i.imgur.com/8Z7WQkK.png');
+            // Load sounds
+            this.load.audio('hit', 'https://assets.codepen.io/21542/hit.mp3');
+            this.load.audio('jump', 'https://assets.codepen.io/21542/jump.mp3');
+            this.load.audio('special', 'https://assets.codepen.io/21542/special.mp3');
+            this.load.audio('backgroundMusic', 'https://assets.codepen.io/21542/fight-music.mp3');
+        }
+        // Create game objects
+        function create() {
+            // Randomly select background
+            const bgKey = Phaser.Math.Between(0, 1) === 0 ? 'background1' : 'background2';
+            background = this.add.image(config.width / 2, config.height / 2, bgKey);
+            background.setDisplaySize(config.width, config.height);
+            // Create platforms
+            platforms = this.physics.add.staticGroup();
+            // Main platform
+            platforms.create(config.width / 2, config.height - 50, 'platform')
+                .setScale(10, 1)
+                .refreshBody();
+            // Side platforms
+            platforms.create(200, 400, 'platform').setScale(3, 1).refreshBody();
+            platforms.create(config.width - 200, 400, 'platform').setScale(3, 1).refreshBody();
+            // Create players
+            player1 = new Raccoon(this, 300, 300, true);
+            player2 = new Raccoon(this, config.width - 300, 300, false);
+            // Set up physics collisions
+            this.physics.add.collider(player1, platforms);
+            this.physics.add.collider(player2, platforms);
+            // Set up keyboard controls
+            cursors = this.input.keyboard.addKeys({
+                up: Phaser.Input.Keyboard.KeyCodes.W,
+                left: Phaser.Input.Keyboard.KeyCodes.A,
+                right: Phaser.Input.Keyboard.KeyCodes.D,
+                down: Phaser.Input.Keyboard.KeyCodes.S,
+                lightAttack: Phaser.Input.Keyboard.KeyCodes.J,
+                heavyAttack: Phaser.Input.Keyboard.KeyCodes.K,
+                specialAttack: Phaser.Input.Keyboard.KeyCodes.L
+            });
+            p2Cursors = this.input.keyboard.addKeys({
+                up: Phaser.Input.Keyboard.KeyCodes.UP,
+                left: Phaser.Input.Keyboard.KeyCodes.LEFT,
+                right: Phaser.Input.Keyboard.KeyCodes.RIGHT,
+                down: Phaser.Input.Keyboard.KeyCodes.DOWN,
+                lightAttack: Phaser.Input.Keyboard.KeyCodes.NUMPAD_ONE,
+                heavyAttack: Phaser.Input.Keyboard.KeyCodes.NUMPAD_TWO,
+                specialAttack: Phaser.Input.Keyboard.KeyCodes.NUMPAD_THREE
+            });
+            // Set up gamepad controls
+            this.input.gamepad.on('connected', (pad) => {
+                console.log('Gamepad connected');
+                gamepads[pad.index] = pad;
+            });
+            // Initialize sounds
+            hitSound = this.sound.add('hit');
+            jumpSound = this.sound.add('jump');
+            specialSound = this.sound.add('special');
+            backgroundMusic = this.sound.add('backgroundMusic');
+            // Set up UI events
+            document.getElementById('start-button').addEventListener('click', () => {
+                this.startGame();
+            });
+            document.getElementById('controls-button').addEventListener('click', () => {
+                document.getElementById('main-menu').style.display = 'none';
+                document.getElementById('controls-screen').style.display = 'flex';
+            });
+            document.getElementById('back-button').addEventListener('click', () => {
+                document.getElementById('controls-screen').style.display = 'none';
+                document.getElementById('main-menu').style.display = 'flex';
+            });
+            document.getElementById('rematch-button').addEventListener('click', () => {
+                this.startGame();
+            });
+            document.getElementById('menu-button').addEventListener('click', () => {
+                this.showMainMenu();
+            });
+            // Start in menu state
+            this.showMainMenu();
+        }
+        // Update game state
+        function update() {
+            if (gameState !== 'playing') return;
+            // Update gamepads
+            const gamepads = navigator.getGamepads();
+            // Update players
+            player1.update(cursors, gamepads[0]);
+            player2.update(p2Cursors, gamepads[1]);
+            // Clean up old combo texts
+            comboTexts.forEach(text => {
+                if (text.active) {
+                    text.y -= 1;
+                }
+            });
+        }
+        // Scene methods
+        function startGame() {
+            // Reset game state
+            gameState = 'playing';
+            // Hide menus
+            document.getElementById('main-menu').style.display = 'none';
+            document.getElementById('controls-screen').style.display = 'none';
+            document.getElementById('game-over-screen').style.display = 'none';
+            // Reset players
+            player1.health = player1.maxHealth;
+            player2.health = player2.maxHealth;
+            player1.specialMeter = 0;
+            player2.specialMeter = 0;
+            player1.setPosition(300, 300);
+            player2.setPosition(config.width - 300, 300);
+            player1.setVelocity(0, 0);
+            player2.setVelocity(0, 0);
+            player1.isAttacking = false;
+            player2.isAttacking = false;
+            player1.isBlocking = false;
+            player2.isBlocking = false;
+            // Play background music
+            backgroundMusic.play({
+                loop: true,
+                volume: 0.5
+            });
+        }
+        function gameOver(winner) {
+            gameState = 'gameover';
+            // Stop background music
+            backgroundMusic.stop();
+            // Show game over screen
+            document.getElementById('game-over-screen').style.display = 'flex';
+            document.getElementById('winner-text').textContent = `${winner} WINS!`;
+        }
+        function showMainMenu() {
+            gameState = 'menu';
+            // Stop background music
+            backgroundMusic.stop();
+            // Show main menu
+            document.getElementById('main-menu').style.display = 'flex';
+            document.getElementById('controls-screen').style.display = 'none';
+            document.getElementById('game-over-screen').style.display = 'none';
+        }
+    </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/newlll" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>