Ragdoll Fighter Game: HTML, CSS & JavaScript

Open In Editor 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 Fighter Game: HTML, CSS & JavaScript

Recommended

Spotify Clone HTML CSS: Music Player UI

Developer Website HTML CSS Template

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

Spotify Clone HTML CSS: Music Player UI

Developer Website HTML CSS Template

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS