You are a black circle getting chased by a monster's game

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

No:11326

←

Prev Next

→

You are a black circle getting chased by a monster
Developer No｜Date and time 23/8/9 11:08:32
Build time 28.776 sec｜Game capacity 3.784KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Black Circle Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Sketch Variables
    var canvas, ctx;
    var circle, monster;
    var gameLoop;

// Game Variables
    var circleRadius = 20;
    var circleSpeed = 5;
    var monsterRadius = 40;
    var monsterSpeed = 1;
    var score = 0;
    var isGameOver = false;

// Create Circle Object
    function createCircle(x, y) {
      return {
        x: x,
        y: y,
        radius: circleRadius,
        draw: function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = "#000000";
          ctx.fill();
          ctx.closePath();
        },
        update: function() {
          this.x += circleSpeed;

// Check canvas boundaries
          if (this.x - this.radius > canvas.width) {
            this.x = -this.radius;
          }
        },
        isColliding: function() {
          var distance = Math.sqrt(Math.pow(this.x - monster.x, 2) + Math.pow(this.y - monster.y, 2));
          return distance < this.radius + monster.radius;
        }
      };
    }

// Create Monster Object
    function createMonster() {
      var x = Math.floor(Math.random() * canvas.width);
      var y = Math.floor(Math.random() * canvas.height);
      return {
        x: x,
        y: y,
        radius: monsterRadius,
        draw: function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = "#ff0000";
          ctx.fill();
          ctx.closePath();
        },
        update: function() {
          if (!isGameOver) {
            var dx = circle.x - this.x;
            var dy = circle.y - this.y;
            var angle = Math.atan2(dy, dx);
            var vx = Math.cos(angle) * monsterSpeed;
            var vy = Math.sin(angle) * monsterSpeed;

this.x += vx;
            this.y += vy;
          }
        }
      };
    }

// Game Setup
    function setupGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      circle = createCircle(canvas.width / 2, canvas.height / 2);
      monster = createMonster();

document.addEventListener("keydown", handleGameControls);
      gameLoop = setInterval(updateGame, 10);
    }

// Game Controls
    function handleGameControls(event) {
      if (event.keyCode === 38 || event.keyCode === 87) { // Up Arrow or W
        circle.y -= circleSpeed;
      } else if (event.keyCode === 40 || event.keyCode === 83) { // Down Arrow or S
        circle.y += circleSpeed;
      } else if (event.keyCode === 37 || event.keyCode === 65) { // Left Arrow or A
        circle.x -= circleSpeed;
      } else if (event.keyCode === 39 || event.keyCode === 68) { // Right Arrow or D
        circle.x += circleSpeed;
      }
    }

// Game Update
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
        circle.update();
        monster.update();

if (circle.isColliding()) {
          gameOver();
        }
      }

circle.draw();
      monster.draw();
    }

// Game Over
    function gameOver() {
      isGameOver = true;
      clearInterval(gameLoop);

ctx.font = "30px Arial";
      ctx.fillStyle = "#000000";
      ctx.fillText("Game Over", canvas.width / 2 - 75, canvas.height / 2 - 30);
      ctx.fillText("Score: " + score, canvas.width / 2 - 60, canvas.height / 2 + 10);
    }

// Initialize and Start the Game
    setupGame();
  </script>
</body>
</html>