Balls and squares floating and moving in harmony to make beautiful art and have them collide with everything and have them constantly fading away and changing colors sizes shapes and even splitting into more smaller ones and have shapes constantly fading into existence's game

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

No:27109

132

←

Prev Next

→

Balls and squares floating and moving in harmony t..ALL
Developer User13389｜Date and time 23/12/4 8:15:34
Build time 33.257 sec｜Game capacity 3.269KB｜

Script

Sure! Here's an example of a game where balls and squares float and move on the screen, colliding with each other, constantly fading away, changing colors, sizes, shapes, and splitting into smaller ones. The shapes also constantly fade into existence. This game is designed for smartphone operation and uses pictograms.

You can save the above code in a single HTML file and open it in a web browser to see the game in action. The shapes will float, collide, fade away, change colors, sizes, and shapes continuously.

←

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>Artistic Shapes Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Create an array to store shapes
    let shapes = [];

// Function to create an initial set of shapes
    function createShapes() {
      for (let i = 0; i < 10; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 50 + 20;
        const color = getRandomColor();
        const shape = Math.random() < 0.5 ? "circle" : "square";

shapes.push({ x, y, size, color, shape });
      }
    }

// Function to get a random color
    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 update the game state
    function update() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw each shape
      shapes.forEach((shape) => {
        // Decrease size and alpha (fade away)
        shape.size -= 0.1;
        shape.color = shape.color.replace(/[\d.]+(?=\))/, shape.size / 100);

// Draw shape
        ctx.fillStyle = shape.color;
        if (shape.shape === "circle") {
          ctx.beginPath();
          ctx.arc(shape.x, shape.y, shape.size, 0, Math.PI * 2);
          ctx.fill();
        } else {
          ctx.fillRect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size);
        }

// Split shape if size is small enough
        if (shape.size <= 10) {
          const newShapes = Math.random() < 0.5 ? 2 : 4;
          for (let i = 0; i < newShapes; i++) {
            const newSize = Math.random() * 10 + 5;
            const newColor = getRandomColor();
            const newShape = Math.random() < 0.5 ? "circle" : "square";
            shapes.push({ x: shape.x, y: shape.y, size: newSize, color: newColor, shape: newShape });
          }
        }
      });

// Remove faded shapes from array
      shapes = shapes.filter((shape) => shape.size > 0);

// Call update() function again
      requestAnimationFrame(update);
    }

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

You can save the above code in a single HTML file and open it in a web browser to see the game in action. The shapes will float, collide, fade away, change colors, sizes, and shapes continuously.