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

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

No:42729

133

Bouncing balls but every time they hit the corners..ALL
Developer User18878｜Date and time 24/2/12 21:36:44
Build time 9.681 sec｜Game capacity 2.708KB｜

Sure! Here's a simple implementation of a bouncing ball game using JavaScript, HTML, and pictograms. The game starts with a single ball bouncing around the screen, and every time it hits a corner, it spawns a new ball. You can play the game on a smartphone by opening the HTML file. Remember to wrap the JavaScript code within `` tags in the HTML file. <br><br> <br> <style> canvas { border: 1px solid #000; } </style> <canvas id="canvas" width="400" height="400"></canvas>

The code above creates an HTML page with a canvas element that displays the bouncing balls. The Ball class represents each ball and its movement. The `update` method updates the ball's position and checks for collisions with the canvas boundaries. If a collision occurs, a new ball with opposite velocity is added to the `balls` array. The `animate` function is called recursively using `requestAnimationFrame` to create a smooth animation. It clears the canvas and updates and draws each ball on every frame. You can customize the ball size, initial position, and starting velocities by modifying the parameters passed to the `new Ball` constructor.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's a simple implementation of a bouncing ball game using JavaScript, HTML, and pictograms. The game starts with a single ball bouncing around the screen, and every time it hits a corner, it spawns a new ball. You can play the game on a smartphone by opening the HTML file. Remember to wrap the JavaScript code within `<script>` tags in the HTML file.

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

<script>
    // Initialize canvas and context
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

// Ball objects
    let balls = [];

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

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

update() {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          // Spawn new ball when hitting horizontal walls
          balls.push(
            new Ball(this.x, this.y, -this.dx, this.dy, this.radius)
          );
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          // Spawn new ball when hitting vertical walls
          balls.push(
            new Ball(this.x, this.y, this.dx, -this.dy, this.radius)
          );
        }

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

this.draw();
      }
    }

// Add initial ball
    balls.push(new Ball(200, 200, 2, 2, 20));

// Animation loop
    function animate() {
      requestAnimationFrame(animate);
      ctx.clearRect(0, 0, canvas.width, canvas.height);

balls.forEach((ball) => {
        ball.update();
      });
    }

// Start the game
    animate();
  </script>
</body>
</html>
```

The code above creates an HTML page with a canvas element that displays the bouncing balls. The Ball class represents each ball and its movement. The `update` method updates the ball's position and checks for collisions with the canvas boundaries. If a collision occurs, a new ball with opposite velocity is added to the `balls` array.

The `animate` function is called recursively using `requestAnimationFrame` to create a smooth animation. It clears the canvas and updates and draws each ball on every frame.

You can customize the ball size, initial position, and starting velocities by modifying the parameters passed to the `new Ball` constructor.