Bouncing balls but every time they hit the corners it spawns another one's game

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

No:42731

151

←

Prev Next

→

Bouncing balls but every time they hit the corners..ALL
Developer User18878｜Date and time 24/2/12 21:37:13
Build time 11.649 sec｜Game capacity 3.055KB｜

Script

In this game, balls will bounce around the canvas. Every time a ball hits one of the corners of the canvas, it will spawn another ball with the same properties (except reversed directions). You can play this game on your smartphone by opening the HTML file in a web browser. The canvas will adjust automatically to fit the screen size. Each ball is represented by a red circle. As the game starts, a single red ball will appear in the center of the screen. It will move and bounce off the walls of the canvas. Whenever it hits a corner, a new ball will be added to the game, resulting in more balls bouncing around the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

// Set canvas dimensions
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Define Ball class
      class Ball {
        constructor(x, y, dx, dy, radius, color) {
          this.x = x;
          this.y = y;
          this.dx = dx;
          this.dy = dy;
          this.radius = radius;
          this.color = color;
        }

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

update() {
          if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            // Spawn a new ball
            balls.push(
              new Ball(
                this.x,
                this.y,
                -this.dx, // Reverse horizontal direction
                this.dy,
                this.radius,
                this.color
              )
            );
          }

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            // Spawn a new ball
            balls.push(
              new Ball(
                this.x,
                this.y,
                this.dx,
                -this.dy, // Reverse vertical direction
                this.radius,
                this.color
              )
            );
          }

this.x += this.dx;
          this.y += this.dy;

this.draw();
        }
      }

// Create initial balls
      let balls = [
        new Ball(canvas.width / 2, canvas.height / 2, 2, 2, 30, "red")
      ];

function animate() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

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

requestAnimationFrame(animate);
      }

animate();
    </script>
  </body>
</html>
```

In this game, balls will bounce around the canvas. Every time a ball hits one of the corners of the canvas, it will spawn another ball with the same properties (except reversed directions).

You can play this game on your smartphone by opening the HTML file in a web browser. The canvas will adjust automatically to fit the screen size. Each ball is represented by a red circle.

As the game starts, a single red ball will appear in the center of the screen. It will move and bounce off the walls of the canvas. Whenever it hits a corner, a new ball will be added to the game, resulting in more balls bouncing around the screen.