Demonstração de jogo de luta com bonecos de pano (HTML, CSS, JS)

448 iroger7

Abrir no Editor Video Publique Seu Código

Demonstração de jogo de luta com bonecos de pano (HTML, CSS, JS)

Recomendado

2 August 2025

Formulário de registro HTML animado

13 March 2025

Um código por lebdev

29 December 2025

Slider de imagens HTML CSS JavaScript

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>

Recomendado

Formulário de registro HTML animado

Um código por lebdev

Slider de imagens HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS