A fighting game where the player controls the blue square and has 4 controls. Left and right arrow to move, Up to punch and Down to crouch. Holding Down then pressing Up can do an Uppercut. The enemies AI can also do the same. both fighters has 50 hp. Punch does 5 Damage while Uppercut does 15.'s game

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

No:20459

←

Prev Next

→

A fighting game where the player controls the blue..ALL
Developer Aghrags｜Date and time 23/10/9 21:25:23
Build time 30.984 sec｜Game capacity 4.684KB｜

Script

Here's an implementation of the game you described as a single HTML file:

Save the above code as an HTML file, open it in a web browser, and you'll be able to play the fighting game using the described controls. The game is displayed using a canvas element, and the blue square represents the player while the red square represents the enemy. The player and enemy both have health bars, and the game loop constantly updates their positions, checks for collisions and controls user inputs to perform specific actions.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Here's an implementation of the game you described as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Fighting Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <script>
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 400;
    canvas.height = 200;
    document.body.appendChild(canvas);

const player = {
      x: 50,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      hp: 50,
      direction: 1, // -1: left, 1: right
      state: 'idle' // 'idle', 'moving', 'punching', 'crouching', 'uppercut'
    };

const enemy = {
      x: 300,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      hp: 50,
      direction: -1, // -1: left, 1: right
      state: 'idle' // 'idle', 'moving', 'punching', 'crouching', 'uppercut'
    };

const controls = {
      left: false,
      right: false,
      up: false,
      down: false
    };

const drawPlayer = () => {
      context.beginPath();
      context.rect(player.x, player.y, player.width, player.height);
      context.fillStyle = 'blue';
      context.fill();
      context.closePath();
    };

const drawEnemy = () => {
      context.beginPath();
      context.rect(enemy.x, enemy.y, enemy.width, enemy.height);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();
    };

const drawHealthBars = () => {
      context.fillStyle = 'blue';
      context.fillRect(10, 10, player.hp * 2, 10);
      context.fillStyle = 'red';
      context.fillRect(canvas.width - 10 - enemy.hp * 2, 10, enemy.hp * 2, 10);
    };

const gameLoop = () => {
      context.clearRect(0, 0, canvas.width, canvas.height);

movePlayer();
      moveEnemy();

drawPlayer();
      drawEnemy();
      drawHealthBars();

if (player.hp <= 0) {
        alert('You lose!');
        clearInterval(gameInterval);
      }

if (enemy.hp <= 0) {
        alert('You win!');
        clearInterval(gameInterval);
      }
    };

document.addEventListener('keydown', keydownHandler);
    document.addEventListener('keyup', keyupHandler);

const gameInterval = setInterval(gameLoop, 16);
  </script>
</body>
</html>
```

Save the above code as an HTML file, open it in a web browser, and you'll be able to play the fighting game using the described controls. The game is displayed using a canvas element, and the blue square represents the player while the red square represents the enemy. The player and enemy both have health bars, and the game loop constantly updates their positions, checks for collisions and controls user inputs to perform specific actions.