Demo del gioco di combattimento Ragdoll (HTML, CSS, JS)

71 iroger7

Apri nell'Editor Pubblica il Tuo Codice

Demo del gioco di combattimento Ragdoll (HTML, CSS, JS)

Consigliato

31 May 2025

Modulo di accesso futuristico

26 July 2025

Editor HTML online | CodeCanvas - Strumento gratuito per lo sviluppo web

21 May 2025

Pagina di destinazione del portfolio

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>

Consigliato

Modulo di accesso futuristico

Editor HTML online | CodeCanvas - Strumento gratuito per lo sviluppo web

Pagina di destinazione del portfolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS