Modo de lucha 2D

23 0 TacoGamer Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

26 December 2025

Plantilla de formulario de inicio de sesión HTML para redes sociales

14 September 2026

Camino de escape

4 December 2024

Un código de cleanscript406

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Canvas Fighting Game</title>
    <style>
        body {
            margin: 0;
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            font-family: sans-serif;
        }
        #gameContainer {
            position: relative;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            font-weight: bold;
            pointer-events: none;
        }
        .healthBarContainer {
            width: 40%;
            background-color: #555;
            border: 3px solid #fff;
            height: 30px;
        }
        .healthBar {
            width: 100%;
            height: 100%;
            background-color: #ff3333;
            transition: width 0.1s ease;
        }
    </style>
</head>
<body>

<div id="gameContainer">
        
        <div id="ui">
            <div class="healthBarContainer">
                <div id="p1Health" class="healthBar"></div>
            </div>
            <div id="timer">FIGHT!</div>
            <div class="healthBarContainer">
                <div id="p2Health" class="healthBar" style="float: right;"></div>
            </div>
        </div>
        
        <canvas id="gameCanvas" width="1024" height="576"></canvas>
    </div>

// Game Configuration
        const gravity = 0.6;
        const groundY = canvas.height - 60;

// Input Tracking
        const keys = {
            a: { pressed: false },
            d: { pressed: false },
            ArrowLeft: { pressed: false },
            ArrowRight: { pressed: false }
        };

// Fighter Blueprint (OOP)
        class Fighter {
            constructor({ position, velocity, color, offset }) {
                this.position = position;
                this.velocity = velocity;
                this.width = 50;
                this.height = 150;
                this.color = color;
                this.health = 100;
                
                // Attack Box metrics
                this.attackBox = {
                    position: { x: this.position.x, y: this.position.y },
                    offset: offset,
                    width: 100,
                    height: 50
                };
                this.isAttacking = false;
            }

draw() {
                // Draw Character Body
                c.fillStyle = this.color;
                c.fillRect(this.position.x, this.position.y, this.width, this.height);

// Draw Attack Box (Only when swinging)
                if (this.isAttacking) {
                    c.fillStyle = 'white';
                    c.fillRect(
                        this.attackBox.position.x, 
                        this.attackBox.position.y, 
                        this.attackBox.width, 
                        this.attackBox.height
                    );
                }
            }

update() {
                this.draw();
                
                // Track relative position of the attack box
                this.attackBox.position.x = this.position.x + this.attackBox.offset.x;
                this.attackBox.position.y = this.position.y + this.attackBox.offset.y;

// Apply movement physics
                this.position.x += this.velocity.x;
                this.position.y += this.velocity.y;

// Handle Gravity & Floor Collision
                if (this.position.y + this.height + this.velocity.y >= groundY) {
                    this.velocity.y = 0;
                    this.position.y = groundY - this.height; // Snap to floor
                } else {
                    this.velocity.y += gravity;
                }
            }

attack() {
                this.isAttacking = true;
                // Frame-limited active attack window
                setTimeout(() => {
                    this.isAttacking = false;
                }, 100);
            }
        }

// Initialize Players
        const player1 = new Fighter({
            position: { x: 150, y: 0 },
            velocity: { x: 0, y: 0 },
            color: '#3498db',
            offset: { x: 0, y: 30 }
        });

const player2 = new Fighter({
            position: { x: 800, y: 0 },
            velocity: { x: 0, y: 0 },
            color: '#e74c3c',
            offset: { x: -50, y: 30 }
        });

// Box-Collision formula (AABB Collision)
        function checkCollision(box1, box2) {
            return (
                box1.attackBox.position.x + box1.attackBox.width >= box2.position.x &&
                box1.attackBox.position.x <= box2.position.x + box2.width &&
                box1.attackBox.position.y + box1.attackBox.height >= box2.position.y &&
                box1.attackBox.position.y <= box2.position.y + box2.height
            );
        }

// Core Game Loop
        function animate() {
            window.requestAnimationFrame(animate);
            
            // Clear Stage each frame
            c.fillStyle = '#333';
            c.fillRect(0, 0, canvas.width, canvas.height);
            
            // Render Floor Line
            c.fillStyle = '#111';
            c.fillRect(0, groundY, canvas.width, canvas.height - groundY);

// Update Characters
            player1.update();
            player2.update();

// Player 1 Movement Control Logic
            player1.velocity.x = 0;
            if (keys.a.pressed) {
                player1.velocity.x = -5;
                player1.attackBox.offset.x = -50; // Face Attack Box Left
            } else if (keys.d.pressed) {
                player1.velocity.x = 5;
                player1.attackBox.offset.x = 0;   // Face Attack Box Right
            }

// Player 2 Movement Control Logic
            player2.velocity.x = 0;
            if (keys.ArrowLeft.pressed) {
                player2.velocity.x = -5;
                player2.attackBox.offset.x = -50;
            } else if (keys.ArrowRight.pressed) {
                player2.velocity.x = 5;
                player2.attackBox.offset.x = 0;
            }

// Evaluate Hits (Player 1 Attacks Player 2)
            if (player1.isAttacking && checkCollision(player1, player2)) {
                player1.isAttacking = false; // Prevent multi-hits per swing
                player2.health -= 10;
                document.getElementById('p2Health').style.width = player2.health + '%';
            }

// Evaluate Hits (Player 2 Attacks Player 1)
            if (player2.isAttacking && checkCollision(player2, player1)) {
                player2.isAttacking = false;
                player1.health -= 10;
                document.getElementById('p1Health').style.width = player1.health + '%';
            }

// End Game Conditions
            if (player1.health <= 0 || player2.health <= 0) {
                document.getElementById('timer').innerHTML = player1.health <= 0 ? "PLAYER 2 WINS!" : "PLAYER 1 WINS!";
            }
        }

// Event Listeners for Controls
        window.addEventListener('keydown', (event) => {
            switch (event.key) {
                // Player 1 Keys
                case 'd': keys.d.pressed = true; break;
                case 'a': keys.a.pressed = true; break;
                case 'w': if (player1.velocity.y === 0) player1.velocity.y = -15; break; // Jump
                case ' ': player1.attack(); break; // Space to Attack

// Player 2 Keys
                case 'ArrowRight': keys.ArrowRight.pressed = true; break;
                case 'ArrowLeft': keys.ArrowLeft.pressed = true; break;
                case 'ArrowUp': if (player2.velocity.y === 0) player2.velocity.y = -15; break; 
                case 'Enter': player2.attack(); break;
            }
        });

window.addEventListener('keyup', (event) => {
            switch (event.key) {
                case 'd': keys.d.pressed = false; break;
                case 'a': keys.a.pressed = false; break;
                case 'ArrowRight': keys.ArrowRight.pressed = false; break;
                case 'ArrowLeft': keys.ArrowLeft.pressed = false; break;
            }
        });

// Launch Game Loop
        animate();
    </script>
</body>
</html>

CSS

Comments 0

…