Cómo programar un juego de lucha

20 0 TacoGamer Seguir

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

Recomendado

10 December 2025

Juego de ping pong retro con JavaScript en HTML5 Canvas

10 February 2026

El hombre de la ventana (horror)

15 September 2025

Animación de burbuja de pensamiento CSS

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

…