I want to make an annoying Orange game I don't want to be rolling and there's a ninja apple it's a boss battle the apples health will be shown it's a health bar orange ride that jump on the Apple's game

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

No:50317

←

Prev Next

→

I want to make an annoying Orange game I don't wan..ALL
Developer User21294｜Date and time 24/3/8 11:33:47
Build time 12.004 sec｜Game capacity 2.24KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Annoying Orange Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let orange = {
      x: 50,
      y: 50,
      width: 50,
      height: 50,
    };

let apple = {
      x: 700,
      y: 50,
      width: 50,
      height: 50,
      health: 100,
    };

function drawOrange() {
      ctx.fillStyle = "orange";
      ctx.fillRect(orange.x, orange.y, orange.width, orange.height);
    }

function drawApple() {
      ctx.fillStyle = "red";
      ctx.fillRect(apple.x, apple.y, apple.width, apple.height);
      ctx.fillStyle = "green";
      ctx.fillRect(apple.x, apple.y - 20, apple.width * (apple.health / 100), 10);
    }

function moveApple() {
      if (apple.x <= 0) {
        apple.x = 700;
      } else {
        apple.x -= 5;
      }
    }

function checkCollision() {
      if (orange.x < apple.x + apple.width &&
          orange.x + orange.width > apple.x &&
          orange.y < apple.y + apple.height &&
          orange.y + orange.height > apple.y) {
        apple.health -= 10;
      }
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawOrange();
      drawApple();
      moveApple();
      checkCollision();

if (apple.health <= 0) {
        alert("You defeated the ninja apple! Game over.");
      } else {
        requestAnimationFrame(draw);
      }
    }

draw();
  </script>
</body>
</html>