Mode combat 2D

22 0 Jeux TacoGamer Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

20 August 2025

Modèle HTML de blog de conception moderne

18 October 2024

Modèle de site Web de portefeuille HTML CSS

22 November 2025

Modèle HTML pour clinique dentaire | Clinique Dontel

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

…