Make a game about two balls colliding into each other's game

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

No:16997

←

Prev Next

→

Make a game about two balls colliding into each ot..ALL
Developer User7570｜Date and time 23/9/22 5:47:50
Build time 21.493 sec｜Game capacity 2.173KB｜

Script

Sure! Here's an example of a simple game about two balls colliding into each other implemented as a single HTML file using JavaScript:

To play the game, open the HTML file in a web browser, and you will see two balls moving horizontally on a canvas. When the balls collide, their directions will reverse. Please note that this is a basic implementation to demonstrate the concept of the game. You can enhance it by adding more interactivity, levels, scoring systems, etc., as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game about two balls colliding into each other implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Collision Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Getting the canvas element
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Ball objects
      const ball1 = { x: 50, y: 200, radius: 30, dx: 2, color: "#FF0000" };
      const ball2 = { x: 350, y: 200, radius: 50, dx: -1, color: "#0000FF" };

// Game loop
      function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update ball positions
        ball1.x += ball1.dx;
        ball2.x += ball2.dx;

// Collision detection
        const distance = Math.sqrt((ball1.x - ball2.x) ** 2 + (ball1.y - ball2.y) ** 2);
        if (distance < ball1.radius + ball2.radius) {
          // Balls collided, reverse their directions
          ball1.dx *= -1;
          ball2.dx *= -1;
        }

// Draw balls
        ctx.beginPath();
        ctx.arc(ball1.x, ball1.y, ball1.radius, 0, Math.PI * 2);
        ctx.fillStyle = ball1.color;
        ctx.fill();
        ctx.closePath();

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

// Loop the animation
        requestAnimationFrame(draw);
      }

// Start the game loop
      draw();
    };
  </script>
</body>
</html>
```
To play the game, open the HTML file in a web browser, and you will see two balls moving horizontally on a canvas. When the balls collide, their directions will reverse.

Please note that this is a basic implementation to demonstrate the concept of the game. You can enhance it by adding more interactivity, levels, scoring systems, etc., as per your requirements.