A fighting game where you control a blue square and has 4 controls. Left and Right to move, Up to punch and Down to crouch. holding crouch and punch can do an Uppercut. The hitboxes for punch is the same as the player's square. The hitbox stays for 0.1s while dealing 5 damage only. The Uppercut hitbox stays for 0.2s while dealing 15 damage once. The opponent square aka the red square can move to the player a bit and sometimes can punch having the same hitbox as it's square.Each squares has 100hp's game

Click here for free DL of the app version that can save data.

No:20461

←

Prev Next

→

A fighting game where you control a blue square an..ALL
Developer Aghrags｜Date and time 23/10/9 21:31:29
Build time 27.365 sec｜Game capacity 4.716KB｜

Script

Sure, here's an implementation of the game you described in a single HTML file:

This game has a blue square representing the player and a red square representing the opponent. The player moves left and right using the left and right arrow keys respectively. The player can punch by pressing the up arrow key and perform an uppercut by holding the down arrow key and then pressing the up arrow key. The hitboxes for punches are the same as the player's square, and the hitboxes stay for a specific duration. The player and opponent both have 100 HP, and damage is deducted accordingly. Please note that this code is a simple implementation to give you an idea of how the game can be created. You can enhance it further with additional features and improvements as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

Sure, here's an implementation of the game you described in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="200"></canvas>
<script>
    // Game initialization
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

var player = {
        x: 50,
        y: canvas.height / 2,
        width: 20,
        height: 20,
        punchDuration: 100,
        punchDamage: 5,
        uppercutDuration: 200,
        uppercutDamage: 15,
        hp: 100
    };

var opponent = {
        x: canvas.width - 70,
        y: canvas.height / 2,
        width: 20,
        height: 20,
        punchDuration: 100,
        punchDamage: 5,
        uppercutDuration: 200,
        uppercutDamage: 15,
        hp: 100
    };

var keys = {};  // To keep track of which keys are being pressed

// Event listeners for key presses
    document.addEventListener("keydown", function(event) {
        keys[event.key] = true;
        event.preventDefault();
    });

document.addEventListener("keyup", function(event) {
        delete keys[event.key];
        event.preventDefault();
    });

// Game loop
    function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

// Game logic update
    function update() {
        if (keys.ArrowLeft) {
            player.x -= 2;
        }
        if (keys.ArrowRight) {
            player.x += 2;
        }
        if (keys.ArrowUp && !keys.ArrowDown) {
            punch(player);
        }
        if (keys.ArrowDown && !keys.ArrowUp) {
            player.height = 10;
            player.y = canvas.height / 2 + 10;
            punch(player, true);
        }
        if (!keys.ArrowDown && !keys.ArrowUp) {
            player.height = 20;
            player.y = canvas.height / 2;
        }

opponent.x -= 0.5;
        if (Math.random() < 0.01) {
            punch(opponent);
        }
    }

// Draw game entities
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

context.fillStyle = "blue";
        context.fillRect(player.x, player.y, player.width, player.height);

context.fillStyle = "red";
        context.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);

// Draw player and opponent HP bars
        context.fillStyle = "green";
        context.fillRect(10, 10, player.hp, 10);
        context.fillStyle = "orange";
        context.fillRect(canvas.width - opponent.hp - 10, 10, opponent.hp, 10);
    }

// Handle punching logic
    function punch(entity, isUppercut = false) {
        var hitboxDuration = isUppercut ? entity.uppercutDuration : entity.punchDuration;
        var damage = isUppercut ? entity.uppercutDamage : entity.punchDamage;

if (entity === player && opponent.x <= player.x + player.width) {
            opponent.hp -= damage;
            if (opponent.hp < 0) opponent.hp = 0;
        } else if (entity === opponent && opponent.x <= player.x + player.width) {
            player.hp -= damage;
            if (player.hp < 0) player.hp = 0;
        }

setTimeout(function() {
            if (entity === player) {
                if (opponent.x <= player.x + player.width) {
                    opponent.hp -= damage;
                    if (opponent.hp < 0) opponent.hp = 0;
                }
            } else if (entity === opponent) {
                if (opponent.x <= player.x + player.width) {
                    player.hp -= damage;
                    if (player.hp < 0) player.hp = 0;
                }
            }
        }, hitboxDuration);
    }

// Start the game loop
    gameLoop();
</script>
</body>
</html>
```

Please note that this code is a simple implementation to give you an idea of how the game can be created. You can enhance it further with additional features and improvements as per your requirements.