Bouncing circles with for black hole in the center's game

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

No:44810

←

Prev Next

→

Bouncing circles with for black hole in the center
Developer User19470｜Date and time 24/2/19 6:27:58
Build time 11.851 sec｜Game capacity 2.4KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Circles Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

const circleRadius = 20;
    const numCircles = 10;
    const circleSpeed = 3;

const circles = [];
    let blackHoleX = canvas.width / 2;
    let blackHoleY = canvas.height / 2;
    let score = 0;

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

for (let i = 0; i < numCircles; i++) {
      const circle = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        dx: (Math.random() - 0.5) * circleSpeed,
        dy: (Math.random() - 0.5) * circleSpeed,
        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
      }
      circles.push(circle);
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

circles.forEach(circle => {
        circle.x += circle.dx;
        circle.y += circle.dy;

if (circle.x + circleRadius > canvas.width || circle.x - circleRadius < 0) {
          circle.dx *= -1;
        }
        if (circle.y + circleRadius > canvas.height || circle.y - circleRadius < 0) {
          circle.dy *= -1;
        }

const distX = circle.x - blackHoleX;
        const distY = circle.y - blackHoleY;
        const distance = Math.sqrt(distX * distX + distY * distY);

if (distance < circleRadius + 30) {
          score++;
          circle.x = Math.random() * canvas.width;
          circle.y = Math.random() * canvas.height;
        }

ctx.beginPath();
        ctx.fillStyle = circle.color;
        ctx.arc(circle.x, circle.y, circleRadius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
      });

ctx.beginPath();
      ctx.fillStyle = "black";
      ctx.arc(blackHoleX, blackHoleY, 30, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();

requestAnimationFrame(update);
    }

function handleTouchMove(event) {
      blackHoleX = event.touches[0].clientX;
      blackHoleY = event.touches[0].clientY;
    }

canvas.addEventListener("touchmove", handleTouchMove);

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