Ragdoll Fighting Game Demo (HTML, CSS, JS)

Open In Editor Video Publish Your Code

<!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>

Ragdoll Fighting Game Demo (HTML, CSS, JS)

Recommended

Retro JavaScript Ping Pong Game in HTML5 Canvas

Flip coin game

Matter.js Ragdoll Physics Game Demo

HTML

CSS

JS

Recommended

Retro JavaScript Ping Pong Game in HTML5 Canvas

Flip coin game

Matter.js Ragdoll Physics Game Demo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS