10 balls connected to each other's game

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

No:37517

←

Prev Next

→

10 balls connected to each other
Developer User17064｜Date and time 24/1/21 4:52:51
Build time 8.549 sec｜Game capacity 2.503KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="game" width="400" height="400"></canvas>

// Ball class representing each connected ball
    class Ball {
      constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = getRandomColor();
        this.connected = false;
        this.connectedBalls = [];
      }

draw(context) {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        context.fillStyle = this.color;
        context.fill();
        context.closePath();
      }

update(context) {
        this.draw(context);
        if (this.connected) {
          for (let i = 0; i < this.connectedBalls.length; i++) {
            context.beginPath();
            context.moveTo(this.x, this.y);
            context.lineTo(this.connectedBalls[i].x, this.connectedBalls[i].y);
            context.strokeStyle = this.color;
            context.lineWidth = 2;
            context.stroke();
            context.closePath();
          }
        }
      }
    }

// Create balls and connect them
    const balls = [];
    for (let i = 0; i < BALL_AMOUNT; i++) {
      const x = CANVAS_WIDTH / 2 + i * BALL_DISTANCE;
      const y = CANVAS_HEIGHT / 2;
      balls.push(new Ball(x, y, BALL_RADIUS));
    }

for (let i = 0; i < BALL_AMOUNT - 1; i++) {
      balls[i].connected = true;
      balls[i].connectedBalls.push(balls[i + 1]);
      balls[i + 1].connected = true;
      balls[i + 1].connectedBalls.push(balls[i]);
    }

// Random color generator
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Game loop
    function gameLoop() {
      const canvas = document.getElementById('game');
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < balls.length; i++) {
        balls[i].update(context);
      }

requestAnimationFrame(gameLoop);
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>