2D Fight mode

24 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!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

…

2D Fight mode

Recommended

Comments 0