Fighting game with fire balls's game

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

No:13213

101

←

Prev Next

→

Fighting game with fire balls
Developer User5805｜Date and time 23/8/27 9:58:50
Build time 15.324 sec｜Game capacity 3.594KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Fighting Game with Fire Balls</title>
  <style>
    canvas {
      border: 3px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Create the player object
      var player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        width: 50,
        height: 50,
        speed: 5,
        fireBalls: []
      };

// Create the opponent object
      var opponent = {
        x: 50,
        y: canvas.height / 2,
        width: 50,
        height: 50,
        speed: 3,
        fireBalls: []
      };

// Create the fire ball object
      function FireBall(x, y, dx) {
        this.x = x;
        this.y = y;
        this.radius = 10;
        this.dx = dx;

this.draw = function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = "red";
          ctx.fill();
          ctx.closePath();
        };

this.update = function() {
          // Move the fire ball
          this.x += this.dx;

// Check collision with opponent
          if (
            this.x + this.radius > opponent.x &&
            this.x - this.radius < opponent.x + opponent.width &&
            this.y + this.radius > opponent.y &&
            this.y - this.radius < opponent.y + opponent.height
          ) {
            // Remove the fire ball
            player.fireBalls.splice(player.fireBalls.indexOf(this), 1);

// Reduce opponent's health or do other actions
            console.log("Opponent hit!");
          }

this.draw();
        };
      }

// Handle user input
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

var rightPressed = false;
      var spacePressed = false;

function keyDownHandler(event) {
        if (event.key === "ArrowRight") {
          rightPressed = true;
        }
        if (event.code === "Space") {
          spacePressed = true;
        }
      }

function keyUpHandler(event) {
        if (event.key === "ArrowRight") {
          rightPressed = false;
        }
        if (event.code === "Space") {
          spacePressed = false;
        }
      }

// Update game state
      function update() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move the player
        if (rightPressed && player.x < canvas.width - player.width) {
          player.x += player.speed;
        }

// Shoot fire ball
        if (spacePressed) {
          player.fireBalls.push(new FireBall(player.x + player.width, player.y + player.height / 2, 5));
        }

// Move opponent
        if (opponent.x < canvas.width - opponent.width) {
          opponent.x += opponent.speed;
        }

// Draw the player
        ctx.fillStyle = "blue";
        ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw the opponent
        ctx.fillStyle = "green";
        ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);

// Draw player's fire balls
        for (var i = 0; i < player.fireBalls.length; i++) {
          player.fireBalls[i].update();
        }

requestAnimationFrame(update);
      }

// Start the game
      update();
    })();
  </script>
</body>
</html>