AI game creator

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

No:17873

←

Prev Next

→

Generative Art
Developer User7810｜Date and time 23/9/25 1:00:14
Build time 24.969 sec｜Game capacity 2.079KB｜

Script

Sure! Here's an example of a simple generative art game in a single HTML file using JavaScript:

In this generative art game, the script generates random shapes (either circles or squares) of random colors and random positions on the canvas. The game loop continuously clears the canvas and draws new shapes in each frame, creating a dynamic and visually appealing generative art experience.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple generative art game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  
  <style>
    #canvas {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script>
    // Game setup
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const width = window.innerWidth;
    const height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    
    // Generate 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;
    }
    
    // Generate random position
    function getRandomPosition() {
      const x = Math.random() * width;
      const y = Math.random() * height;
      return { x, y };
    }
    
    // Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, width, height); // Clear canvas
      
      // Generate a random shape
      const shape = Math.random() < 0.5 ? 'circle' : 'square';
      
      if (shape === 'circle') {
        const { x, y } = getRandomPosition();
        ctx.beginPath();
        ctx.arc(x, y, Math.random() * 50, 0, 2 * Math.PI);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
        ctx.closePath();
      } else {
        const { x, y } = getRandomPosition();
        const size = Math.random() * 100;
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(x, y, size, size);
      }
      
      requestAnimationFrame(gameLoop);
    }
    
    // Start the game
    gameLoop();
  </script>
</body>
</html>
```