1,000 bouncing circles ( biggest is slowest smallest is fastest)'s game

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

No:26780

←

Prev Next

→

1,000 bouncing circles ( biggest is slowest smalle..ALL
Developer User6472｜Date and time 23/12/2 11:56:16
Build time 59.341 sec｜Game capacity 2.789KB｜

Script

Sure! Here's an example of a game implemented as a single HTML file using JavaScript, where you can play with 1,000 bouncing circles. The size of the circles determines their speed, with the biggest circle being the slowest and the smallest circle being the fastest. Pictograms are not used in this implementation, but you can customize it further if you'd like. Just make sure to save it as an HTML file and open it in a web browser on your smartphone to play.

Now, when you open this HTML file on your smartphone, you will see 1,000 circles bouncing around on the screen. The larger circles will move slower, while the smaller circles will move faster. Enjoy playing with the bouncing circles game!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Circles Game</title>
  <style>
    #gameCanvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

Circle.prototype.update = function() {
      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;
      }

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

// Initialization function
    function init() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

for (var i = 0; i < numCircles; i++) {
        var radius = (i + 1) / numCircles * 50;
        var x = Math.random() * (canvas.width - radius * 2) + radius;
        var y = Math.random() * (canvas.height - radius * 2) + radius;
        var dx = (numCircles - i) / numCircles * 2 - 1;
        var dy = (numCircles - i) / numCircles * 2 - 1;

circles.push(new Circle(x, y, radius, dx, dy));
      }

updateGame();
    }

// Update game state
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < numCircles; i++) {
        circles[i].draw();
        circles[i].update();
      }

requestAnimationFrame(updateGame);
    }

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