2D Wrestling Fighting Game

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D Wrestling Fighting Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1a1a2e;
            color: white;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            user-select: none;
        }
        h2 {
            margin: 5px 0 10px 0;
            color: #f39c12;
        }
        #game-container {
            position: relative;
            border: 4px solid #e94560;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
        }
        canvas {
            display: block;
            background: linear-gradient(to bottom, #16213e 0%, #0f3460 75%, #533483 75%, #2b193d 100%);
        }
        /* हेल्थ बार UI */
        #hud {
            position: absolute;
            top: 15px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .health-box {
            width: 40%;
            height: 25px;
            background-color: #444;
            border: 2px solid #fff;
            border-radius: 5px;
            overflow: hidden;
        }
        .health-fill {
            height: 100%;
            width: 100%;
            transition: width 0.2s;
        }
        #p1-health { background-color: #3498db; }
        #p2-health { background-color: #e74c3c; float: right; }
        
        #status-text {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 36px;
            font-weight: bold;
            color: #f1c40f;
            text-shadow: 2px 2px 8px #000;
            display: none;
            text-align: center;
        }

        /* कंट्रोल बटन्स एरिया */
        #controls-wrapper {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin-top: 15px;
        }
        .player-controls {
            background-color: #16213e;
            padding: 10px 15px;
            border-radius: 8px;
            border: 2px solid #444;
            text-align: center;
        }
        .player-controls h4 {
            margin: 0 0 8px 0;
        }
        button {
            background-color: #e94560;
            color: white;
            border: none;
            padding: 12px 16px;
            margin: 3px;
            font-size: 15px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.1s;
        }
        button:active {
            transform: scale(0.92);
            background-color: #ff6b81;
        }
        .p1-btn { background-color: #2980b9; }
        .p1-btn:active { background-color: #3498db; }
        #restart-btn {
            background-color: #27ae60;
            display: none;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h2>🤼 2D WRESTLING ARENA 🤼</h2>

    <div id="game-container">
        <div id="hud">
            <div class="health-box"><div id="p1-health" class="health-fill"></div></div>
            <div style="font-weight: bold; font-size: 20px;">VS</div>
            <div class="health-box"><div id="p2-health" class="health-fill"></div></div>
        </div>
        <div id="status-text"></div>
        <canvas id="ring" width="800" height="400"></canvas>
    </div>

    <button id="restart-btn" onclick="resetGame()">🔄 फिर से खेलें (Restart)</button>

    <!-- दोनों रेसलर्स के कंट्रोल बटन्स -->
    <div id="controls-wrapper">
        <!-- Player 1 Controls -->
        <div class="player-controls" style="border-color: #3498db;">
            <h4 style="color: #3498db;">रेसलर 1 (Blue) - Keys: A, D, W, F</h4>
            <button class="p1-btn" onmousedown="moveP1(-1)" onmouseup="stopP1()" ontouchstart="moveP1(-1)" ontouchend="stopP1()">⬅️ पीछे</button>
            <button class="p1-btn" onmousedown="moveP1(1)" onmouseup="stopP1()" ontouchstart="moveP1(1)" ontouchend="stopP1()">➡️ आगे</button>
            <button class="p1-btn" onclick="jumpP1()">⬆️ जंप</button>
            <button class="p1-btn" onclick="punchP1()">👊 पंच</button>
        </div>

        <!-- Player 2 Controls -->
        <div class="player-controls" style="border-color: #e74c3c;">
            <h4 style="color: #e74c3c;">रेसलर 2 (Red) - Keys: ◀, ▶, ▲, Enter</h4>
            <button onmousedown="moveP2(-1)" onmouseup="stopP2()" ontouchstart="moveP2(-1)" ontouchend="stopP2()">⬅️ आगे</button>
            <button onmousedown="moveP2(1)" onmouseup="stopP2()" ontouchstart="moveP2(1)" ontouchend="stopP2()">➡️ पीछे</button>
            <button onclick="jumpP2()">⬆️ जंप</button>
            <button onclick="punchP2()">👊 पंच</button>
        </div>
    </div>

    <script>
        const canvas = document.getElementById("ring");
        const ctx = canvas.getContext("2d");
        const gravity = 0.7;
        const groundY = 300;
        let gameOver = false;

        // रेसलर क्लास
        class Wrestler {
            constructor(x, color, facing) {
                this.startX = x;
                this.x = x;
                this.y = groundY - 110;
                this.width = 50;
                this.height = 110;
                this.color = color;
                this.vx = 0;
                this.vy = 0;
                this.health = 100;
                this.facing = facing; // 1 = right, -1 = left
                this.isAttacking = false;
                this.attackBox = { width: 65, height: 30 };
            }

            draw() {
                // शरीर (Body)
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y + 30, this.width, 60);

                // सिर (Head)
                ctx.fillStyle = "#f1c27d";
                ctx.beginPath();
                ctx.arc(this.x + this.width / 2, this.y + 15, 16, 0, Math.PI * 2);
                ctx.fill();

                // मास्क / बैंड (Mask Band)
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x + 10, this.y + 8, 30, 8);

                // पैर (Legs)
                ctx.fillStyle = "#222";
                ctx.fillRect(this.x + 5, this.y + 90, 15, 20);
                ctx.fillRect(this.x + 30, this.y + 90, 15, 20);

                // पंच एनीमेशन (Attack Box)
                if (this.isAttacking) {
                    ctx.fillStyle = "#f1c40f";
                    let attackX = this.facing === 1 ? this.x + this.width : this.x - this.attackBox.width;
                    ctx.fillRect(attackX, this.y + 40, this.attackBox.width, this.attackBox.height);
                }
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                // रिंग की सीमा (Boundaries)
                if (this.x < 40) this.x = 40;
                if (this.x + this.width > canvas.width - 40) this.x = canvas.width - 40 - this.width;

                // गुरुत्वाकर्षण (Gravity)
                if (this.y + this.height < groundY) {
                    this.vy += gravity;
                } else {
                    this.vy = 0;
                    this.y = groundY - this.height;
                }

                this.draw();
            }

            attack(opponent, opponentHealthBarId) {
                if (this.isAttacking || gameOver) return;
                this.isAttacking = true;

                // हिट चेक (Collision Detection)
                let attackX = this.facing === 1 ? this.x + this.width : this.x - this.attackBox.width;
                if (
                    attackX < opponent.x + opponent.width &&
                    attackX + this.attackBox.width > opponent.x &&
                    this.y + 40 < opponent.y + opponent.height &&
                    this.y + 40 + this.attackBox.height > opponent.y
                ) {
                    opponent.health = Math.max(0, opponent.health - 12);
                    document.getElementById(opponentHealthBarId).style.width = opponent.health + "%";
                    // नॉकबैक इफेक्ट
                    opponent.x += this.facing * 25;
                    checkWinner();
                }

                setTimeout(() => {
                    this.isAttacking = false;
                }, 200);
            }
        }

        const p1 = new Wrestler(180, "#3498db", 1);
        const p2 = new Wrestler(570, "#e74c3c", -1);

        // रिंग की रस्सियाँ बनाना
        function drawRing() {
            ctx.strokeStyle = "#ffffff";
            ctx.lineWidth = 4;
            for (let i = 0; i < 3; i++) {
                let ropeY = 180 + i * 35;
                ctx.beginPath();
                ctx.moveTo(30, ropeY);
                ctx.lineTo(canvas.width - 30, ropeY);
                ctx.stroke();
            }
            // कॉर्नर पोस्ट्स
            ctx.fillStyle = "#e94560";
            ctx.fillRect(25, 160, 15, 140);
            ctx.fillRect(canvas.width - 40, 160, 15, 140);
        }

        function checkWinner() {
            const statusText = document.getElementById("status-text");
            if (p1.health <= 0 || p2.health <= 0) {
                gameOver = true;
                statusText.style.display = "block";
                document.getElementById("restart-btn").style.display = "inline-block";
                if (p1.health <= 0) {
                    statusText.innerText = "🏆 रेसलर 2 (RED) जीत गया! 🏆";
                } else {
                    statusText.innerText = "🏆 रेसलर 1 (BLUE) जीत गया! 🏆";
                }
            }
        }