300 bouncing circles on your screen follow the fastest bouncing square's game

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

No:15105

118

←

Prev Next

→

300 bouncing circles on your screen follow the fas..ALL
Developer User6472｜Date and time 23/9/6 6:54:54
Build time 26.18 sec｜Game capacity 2.954KB｜

Script

Sure! Here's an example of a game implemented as a single HTML file using JavaScript. The game will display 300 bouncing circles on the screen, and these circles will follow the movement of the fastest bouncing square.

You can save this code into a file with a `.html` extension and open it in a web browser on your smartphone. The game will start automatically and you'll see 300 bouncing circles following the fastest bouncing square.

←

Prev　Next

→ 　

Back　

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

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

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

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

// Generate 300 circles with random positions and velocities
        for (let i = 0; i < 300; i++) {
          circles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            dx: Math.random() * 6 - 3,
            dy: Math.random() * 6 - 3,
            radius: Math.random() * 20 + 10,
          });
        }

function drawCircle(x, y, radius) {
          ctx.beginPath();
          ctx.arc(x, y, radius, 0, Math.PI * 2, false);
          ctx.fillStyle = "blue";
          ctx.fill();
          ctx.closePath();
        }

function drawSquare() {
          ctx.fillStyle = "red";
          ctx.fillRect(squareX, squareY, 50, 50);
        }

function update() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

squareX += squareDX;
          squareY += squareDY;

// Bounce square off the walls
          if (squareX + 50 > canvas.width || squareX < 0) {
            squareDX *= -1;
          }
          if (squareY + 50 > canvas.height || squareY < 0) {
            squareDY *= -1;
          }

drawSquare();

for (let i = 0; i < circles.length; i++) {
            const circle = circles[i];

// Update circle position
            circle.x += circle.dx;
            circle.y += circle.dy;

// Bounce circles off the walls
            if (
              circle.x + circle.radius > canvas.width ||
              circle.x - circle.radius < 0
            ) {
              circle.dx *= -1;
            }
            if (
              circle.y + circle.radius > canvas.height ||
              circle.y - circle.radius < 0
            ) {
              circle.dy *= -1;
            }

drawCircle(circle.x, circle.y, circle.radius);
          }

requestAnimationFrame(update);
        }
        
        update();
      });
    </script>
  </body>
</html>
```