1,000 bouncing squares in 1 enormous box's game

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

No:15164

103

←

Prev Next

→

1,000 bouncing squares in 1 enormous box
Developer User6472｜Date and time 23/9/6 20:13:13
Build time 44.895 sec｜Game capacity 2.98KB｜

Script

Sure! Here's an example of a game with 1,000 bouncing squares inside one enormous box using JavaScript. It utilizes the HTML5 canvas element to draw the squares and animate them. You can copy the code into a single HTML file and run it in a web browser.

When you open this HTML file in a web browser (preferably on a smartphone), you will see 1,000 bouncing squares inside an enormous box represented by the browser viewport. Each square will have a random size and velocity, and they will continuously bounce around the box. You can play the game by observing the bouncing squares.

←

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">
    <title>Bouncing Squares Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Create an array of square objects
        const squares = [];
      
        // Initialize the canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        canvas.width = boxWidth;
        canvas.height = boxHeight;
      
        // Generate random starting positions and velocities for squares
        function generateSquares() {
            for (let i = 0; i < numSquares; i++) {
                const size = Math.random() * 30 + 10; // Random size between 10 and 40
                const x = Math.random() * (boxWidth - size);
                const y = Math.random() * (boxHeight - size);
                const dx = Math.random() * 6 - 3; // Random velocity between -3 and 3
                const dy = Math.random() * 6 - 3;
                squares.push({ x, y, size, dx, dy });
            }
        }
      
        // Update the positions of squares and handle collisions
        function update() {
            ctx.clearRect(0, 0, boxWidth, boxHeight); // Clear the canvas

// Move and bounce the squares around
            squares.forEach(square => {
                square.x += square.dx;
                square.y += square.dy;

if (square.x < 0 || square.x + square.size > boxWidth) {
                    square.dx = -square.dx;
                }
                if (square.y < 0 || square.y + square.size > boxHeight) {
                    square.dy = -square.dy;
                }

// Draw the square
                ctx.fillRect(square.x, square.y, square.size, square.size);
            });

requestAnimationFrame(update); // Repeat the update loop
        }

// Initialize the game
        function startGame() {
            generateSquares();
            update();
        }

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