रैगडॉल फाइटिंग गेम का डेमो (HTML, CSS, JS)

70 iroger7

संपादक में खोलें अपना कोड प्रकाशित करें

रैगडॉल फाइटिंग गेम का डेमो (HTML, CSS, JS)

अनुशंसित

23 August 2025

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

9 July 2025

काउबॉय कार्टर एल्बम ट्रैकलिस्ट और जानकारी

27 May 2025

भुगतान कार्ड

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ragdoll Hit Inspired Game</title>  
      
    <style>  
        /* --- CSS: Simple Layout and Controls Styling --- */  
        body {  
            background: #222;  
            color: #fff;  
            font-family: Arial, sans-serif;  
            margin: 0; padding: 0;  
            display: flex; flex-direction: column; align-items: center;  
        }  
        h1 {  
            margin-top: 20px;  
        }  
        #game-container {  
            background: #444;  
            border: 4px solid #000;  
            margin: 20px auto;  
            display: flex; flex-direction: column; align-items: center;  
            box-shadow: 0 0 12px #000;  
        }  
        canvas {  
            background: #222;  
            display: block;  
            margin: 0 auto;  
            border: 2px solid #fff;  
        }  
        #controls {  
            margin: 10px 0 20px 0;  
        }  
        .control-btn {  
            background: #333;  
            color: #fff;  
            border: 1px solid #aaa;  
            padding: 8px 16px;  
            margin: 0 5px;  
            border-radius: 4px;  
            cursor: pointer;  
            font-size: 1rem;  
        }  
        .control-btn:active {  
            background: #555;  
        }  
        #info {  
            font-size: 0.95rem;  
            margin-bottom: 10px;  
        }  
    </style>  
</head>  
<body>  
      
    <h1>Ragdoll Hit (Inspired Demo)</h1>  
    <div id="game-container">  
        <div id="info">  
            Controls: <b>A/D</b> = Move | <b>W</b> = Jump | <b>J</b> = Punch | <b>K</b> = Kick  
        </div>  
        <canvas id="game-canvas" width="600" height="400" aria-label="Ragdoll Fight Arena"></canvas>  
        <div id="controls">  
              
            <button class="control-btn" onclick="simulateInput('KeyA')">←</button>  
            <button class="control-btn" onclick="simulateInput('KeyD')">→</button>  
            <button class="control-btn" onclick="simulateInput('KeyW')">Jump</button>  
            <button class="control-btn" onclick="simulateInput('KeyJ')">Punch</button>  
            <button class="control-btn" onclick="simulateInput('KeyK')">Kick</button>  
        </div>  
    </div>  
      
    <script>  
    /*  
     * Simple Ragdoll Hit Inspired Game  
     * - Two stickman ragdolls (player & simple AI)  
     * - Basic ragdoll: head, body, arms, legs (using circles and lines)  
     * - Controls: Move left/right, jump, punch, kick  
     * - Win by knocking opponent out of the arena (falling off platform)  
     */

// --- Game Setup ---  
    const canvas = document.getElementById('game-canvas');  
    const ctx = canvas.getContext('2d');

const GROUND_Y = 350;  
    const GRAVITY = 0.8;  
    const FRICTION = 0.85;  
    const PLAYER_COLOR = '#3cf';  
    const AI_COLOR = '#fc3';

// --- Ragdoll Structure: Head, Torso, Arms, Legs as points ---  
    function createRagdoll(x, color) {  
        return {  
            x: x,  
            y: GROUND_Y - 60,  
            vx: 0, vy: 0,  
            color: color,  
            facing: 1, // 1=right, -1=left  
            grounded: true,  
            action: null, // 'punch', 'kick'  
            health: 100,  
            knockout: false,  
            // For animation:  
            punchTimer: 0,  
            kickTimer: 0  
        };  
    }

let player = createRagdoll(180, PLAYER_COLOR);  
    let ai = createRagdoll(420, AI_COLOR);

// --- Input Handling ---  
    let keys = {};  
    document.addEventListener('keydown', e => keys[e.code] = true);  
    document.addEventListener('keyup', e => keys[e.code] = false);

// For touch controls  
    window.simulateInput = function(code) {  
        keys[code] = true;  
        setTimeout(() => { keys[code] = false; }, 200);  
    };

// --- Game Loop ---  
    function gameLoop() {  
        update();  
        draw();  
        requestAnimationFrame(gameLoop);  
    }

// --- Update Logic ---  
    function update() {  
        // Player movement  
        if (!player.knockout) {  
            if (keys['KeyA']) { player.vx -= 0.5; player.facing = -1; }  
            if (keys['KeyD']) { player.vx += 0.5; player.facing = 1; }  
            if (keys['KeyW'] && player.grounded) { player.vy = -13; player.grounded = false; }

// Actions  
            if (keys['KeyJ'] && player.punchTimer <= 0) {  
                player.action = 'punch'; player.punchTimer = 18;  
            }  
            if (keys['KeyK'] && player.kickTimer <= 0) {  
                player.action = 'kick'; player.kickTimer = 22;  
            }  
        }

// Apply velocity & physics (player & ai)  
        [player, ai].forEach(r => {  
            r.x += r.vx;  
            r.y += r.vy;  
            r.vy += GRAVITY;

// Simple ground/arena collision  
            if (r.y > GROUND_Y - 60) {  
                r.y = GROUND_Y - 60;  
                r.vy = 0;  
                r.grounded = true;  
            } else {  
                r.grounded = false;  
            }

// Friction  
            r.vx *= FRICTION;  
            if (Math.abs(r.vx) < 0.1) r.vx = 0;

// Action timers  
            if (r.punchTimer > 0) r.punchTimer--;  
            if (r.kickTimer > 0) r.kickTimer--;  
            if (r.punchTimer === 0 && r.action === 'punch') r.action = null;  
            if (r.kickTimer === 0 && r.action === 'kick') r.action = null;  
        });

// Arena bounds (if they fall off, KO)  
        [player, ai].forEach(r => {  
            if (r.x < 0 || r.x > canvas.width || r.y > canvas.height) r.knockout = true;  
        });

// AI simple logic: move towards player, random jump/attack if close  
        if (!ai.knockout && !player.knockout) {  
            if (Math.abs(ai.x - player.x) > 60) {  
                ai.vx += (ai.x < player.x ? 0.4 : -0.4);  
                ai.facing = (ai.x < player.x ? 1 : -1);  
            } else {  
                if (ai.punchTimer <= 0 && Math.random() < 0.02) {  
                    ai.action = 'punch'; ai.punchTimer = 16;  
                }  
                if (ai.kickTimer <= 0 && Math.random() < 0.01) {  
                    ai.action = 'kick'; ai.kickTimer = 18;  
                }  
                if (ai.grounded && Math.random() < 0.01) {  
                    ai.vy = -11; ai.grounded = false;  
                }  
            }  
        }

// --- Collision: Punch/Kick hitboxes ---  
        checkHit(player, ai);  
        checkHit(ai, player);  
    }

// --- Hit Detection ---  
    function checkHit(attacker, defender) {  
        if (attacker.knockout || defender.knockout) return;  
        // Attack range  
        let dx = defender.x - attacker.x;  
        let dist = Math.abs(dx);  
        // Punch: short, fast. Kick: longer range, slower.  
        if (attacker.action === 'punch' && attacker.punchTimer === 12) {  
            if (dist < 60 && Math.sign(dx) === attacker.facing) {  
                defender.vx += attacker.facing * 7;  
                defender.vy -= 4;  
                defender.health -= 12;  
                if (defender.health <= 0) defender.knockout = true;  
            }  
        }  
        if (attacker.action === 'kick' && attacker.kickTimer === 16) {  
            if (dist < 80 && Math.sign(dx) === attacker.facing) {  
                defender.vx += attacker.facing * 10;  
                defender.vy -= 7;  
                defender.health -= 20;  
                if (defender.health <= 0) defender.knockout = true;  
            }  
        }  
    }

// --- Drawing ---  
    function draw() {  
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ground/platform  
        ctx.fillStyle = "#666";  
        ctx.fillRect(0, GROUND_Y, canvas.width, canvas.height - GROUND_Y);

// Draw ragdolls  
        drawRagdoll(player);  
        drawRagdoll(ai);

// Health bars  
        drawHealthBar(player, 20, 18, PLAYER_COLOR);  
        drawHealthBar(ai, canvas.width - 120, 18, AI_COLOR);

// Knockout text  
        if (player.knockout || ai.knockout) {  
            ctx.font = "bold 36px Arial";  
            ctx.fillStyle = "#fff";  
            ctx.textAlign = "center";  
            ctx.fillText(  
                player.knockout ? "You Lose!" : "You Win!",  
                canvas.width / 2, 100  
            );  
            ctx.font = "18px Arial";  
            ctx.fillText("Press R to Restart", canvas.width / 2, 140);  
        }  
    }

function drawHealthBar(r, x, y, color) {  
        ctx.fillStyle = "#222";  
        ctx.fillRect(x, y, 100, 12);  
        ctx.fillStyle = color;  
        ctx.fillRect(x, y, Math.max(0, r.health), 12);  
        ctx.strokeStyle = "#fff";  
        ctx.strokeRect(x, y, 100, 12);  
    }

function drawRagdoll(r) {  
        // Head  
        ctx.save();  
        ctx.translate(r.x, r.y);  
        ctx.strokeStyle = "#fff";  
        ctx.lineWidth = 3;  
        // body  
        ctx.beginPath();  
        ctx.moveTo(0, 20); ctx.lineTo(0, 60); ctx.stroke();

// arms (swing on attack)  
        let armAngleL = r.action === 'punch' && r.punchTimer > 0 && r.facing === -1 ? -Math.PI/3 : -Math.PI/6;  
        let armAngleR = r.action === 'punch' && r.punchTimer > 0 && r.facing === 1 ? Math.PI/3 : Math.PI/6;  
        ctx.beginPath();  
        ctx.moveTo(0, 30);  
        ctx.lineTo(-30 * Math.cos(armAngleL), 40 + 10 * Math.sin(armAngleL));  
        ctx.moveTo(0, 30);  
        ctx.lineTo(30 * Math.cos(armAngleR), 40 + 10 * Math.sin(armAngleR));  
        ctx.stroke();

// legs (swing on kick)  
        let legAngleL = r.action === 'kick' && r.kickTimer > 0 && r.facing === -1 ? Math.PI/3 : Math.PI/7;  
        let legAngleR = r.action === 'kick' && r.kickTimer > 0 && r.facing === 1 ? -Math.PI/3 : -Math.PI/7;  
        ctx.beginPath();  
        ctx.moveTo(0, 60);  
        ctx.lineTo(-20 * Math.cos(legAngleL), 100 + 10 * Math.sin(legAngleL));  
        ctx.moveTo(0, 60);  
        ctx.lineTo(20 * Math.cos(legAngleR), 100 + 10 * Math.sin(legAngleR));  
        ctx.stroke();

// head  
        ctx.beginPath();  
        ctx.arc(0, 10, 14, 0, Math.PI*2);  
        ctx.fillStyle = r.color;  
        ctx.fill();  
        ctx.strokeStyle = "#fff";  
        ctx.stroke();

ctx.restore();  
    }

// --- Restart Game ---  
    document.addEventListener('keydown', e => {  
        if ((player.knockout || ai.knockout) && e.code === 'KeyR') {  
            player = createRagdoll(180, PLAYER_COLOR);  
            ai = createRagdoll(420, AI_COLOR);  
        }  
    });

// --- Start the Game Loop ---  
    gameLoop();  
    </script>  
</body>  
</html>

अनुशंसित

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

काउबॉय कार्टर एल्बम ट्रैकलिस्ट और जानकारी

भुगतान कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS