1,000 bouncing squares's game

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

No:26779

←

Prev Next

→

1,000 bouncing squares
Developer User6472｜Date and time 23/12/2 11:54:13
Build time 40.162 sec｜Game capacity 2.213KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bouncing Squares Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Set the canvas width and height to fit the screen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Set up the array to store square objects
        const squares = [];

// Generate random squares
        for (let i = 0; i < 1000; i++) {
          squares.push({
            x: Math.random() * (canvas.width - 50),
            y: Math.random() * (canvas.height - 50),
            size: Math.random() * 50 + 10,
            dx: Math.random() * 4 - 2,
            dy: Math.random() * 4 - 2,
            color: getRandomColor(),
          });
        }

function getRandomColor() {
          const letters = "0123456789ABCDEF";
          let color = "#";
          for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
        }

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

// Move and draw each square
          squares.forEach((square) => {
            square.x += square.dx;
            square.y += square.dy;

if (square.x < 0 || square.x + square.size > canvas.width)
              square.dx = -square.dx;
            if (square.y < 0 || square.y + square.size > canvas.height)
              square.dy = -square.dy;

ctx.fillStyle = square.color;
            ctx.fillRect(square.x, square.y, square.size, square.size);
          });

// Request next animation frame
          requestAnimationFrame(animate);
        }

// Start the game animation
        animate();
      }

// Start the game
      window.onload = initGame;
    </script>
  </body>
</html>