AI game creator

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

No:16161

139

←

Prev Next

→

Generative Art
Developer User7167｜Date and time 23/9/16 13:02:02
Build time 18.694 sec｜Game capacity 2.303KB｜

Script

Sure, here's a simple generative art game written in JavaScript, enclosed in script tags within a single HTML file:

When you open this HTML file in a web browser, it will display a canvas filled with generative art. The art consists of random shapes (circles or squares) with random colors, randomly positioned on the canvas. Each time you refresh the page, a new set of art will be generated. You can even modify the code to add interactivity or different patterns as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple generative art game written in JavaScript, enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Generative Art Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

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

// Generate random positions
    function generateRandomPosition() {
      const x = Math.floor(Math.random() * width);
      const y = Math.floor(Math.random() * height);
      return { x, y };
    }

// Generate random shapes
    function generateRandomShape(position, color) {
      const size = Math.floor(Math.random() * 50) + 10;
      const shapeType = Math.random() < 0.5 ? 'circle' : 'square';

if (shapeType === 'circle') {
        ctx.beginPath();
        ctx.arc(position.x, position.y, size, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.stroke();
      } else {
        ctx.fillStyle = color;
        ctx.fillRect(position.x, position.y, size, size);
      }
    }

// Generate initial art
    for (let i = 0; i < 100; i++) {
      const position = generateRandomPosition();
      const color = generateRandomColor();
      generateRandomShape(position, color);
    }
  </script>
</body>
</html>
```

Each time you refresh the page, a new set of art will be generated. You can even modify the code to add interactivity or different patterns as per your requirements.