Four balls colliding only for all kinds of users's game

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

No:16998

112

←

Prev Next

→

Four balls colliding only for all kinds of users
Developer User7570｜Date and time 23/9/22 5:49:53
Build time 44.281 sec｜Game capacity 4.216KB｜

Script

Sure! Here's a simple game where four balls collide. The game is implemented as a single HTML file and contains JavaScript enclosed in script tags. The game starts processing as soon as it is loaded in a web browser.

To play the game, simply run the HTML file in a web browser on your smartphone. You will see four balls of different colors bouncing around the canvas. When any two balls collide, they will change their directions according to the physics of an elastic collision. Have fun playing the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ball Collision Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

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

update(canvas) {
        // Move the ball
        this.x += this.dx;
        this.y += this.dy;

// Handle collisions with walls
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.dy = -this.dy;
        }
      }
    }

// Game setup
    var canvas, context, balls;

function initialize() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

// Create four balls with random positions and colors
      balls = [
        new Ball(50, 50, 15, "blue"),
        new Ball(200, 150, 20, "red"),
        new Ball(150, 250, 10, "green"),
        new Ball(300, 220, 25, "orange")
      ];

// Start the game loop
      gameLoop();
    }

// Game loop
    function gameLoop() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw each ball
      balls.forEach(ball => {
        ball.update(canvas);
        ball.draw(context);
      });

// Check for collisions between balls
      for (let i = 0; i < balls.length; i++) {
        for (let j = i + 1; j < balls.length; j++) {
          if (areColliding(balls[i], balls[j])) {
            handleCollision(balls[i], balls[j]);
          }
        }
      }

// Continue the game loop
      requestAnimationFrame(gameLoop);
    }

// Check if two balls are colliding
    function areColliding(ball1, ball2) {
      const dx = ball1.x - ball2.x;
      const dy = ball1.y - ball2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      return distance < ball1.radius + ball2.radius;
    }

// Handle ball collision
    function handleCollision(ball1, ball2) {
      const dx = ball1.x - ball2.x;
      const dy = ball1.y - ball2.y;
      const angle = Math.atan2(dy, dx);

// Calculate new velocities
      const v1 = Math.sqrt(ball1.dx * ball1.dx + ball1.dy * ball1.dy);
      const v2 = Math.sqrt(ball2.dx * ball2.dx + ball2.dy * ball2.dy);
      const phi1 = Math.atan2(ball1.dy, ball1.dx);
      const phi2 = Math.atan2(ball2.dy, ball2.dx);
      const m1 = ball1.radius ** 2;
      const m2 = ball2.radius ** 2;

ball1.dx = v2 * Math.cos(phi2 - angle) * Math.cos(angle) + v1 * Math.sin(phi1 - angle) * Math.cos(angle + Math.PI / 2);
      ball1.dy = v2 * Math.cos(phi2 - angle) * Math.sin(angle) + v1 * Math.sin(phi1 - angle) * Math.sin(angle + Math.PI / 2);
      ball2.dx = v1 * Math.cos(phi1 - angle) * Math.cos(angle) + v2 * Math.sin(phi2 - angle) * Math.cos(angle + Math.PI / 2);
      ball2.dy = v1 * Math.cos(phi1 - angle) * Math.sin(angle) + v2 * Math.sin(phi2 - angle) * Math.sin(angle + Math.PI / 2);
    }

// Initialize the game
    initialize();
  </script>
</body>
</html>
```