AI game creator

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

No:36503

←

Prev Next

→

Generative Art
Developer User16813｜Date and time 24/1/17 20:34:17
Build time 10.574 sec｜Game capacity 2.363KB｜

Script

Sure, here's an example of a simple generative art game implemented as a single HTML file, utilizing JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms. Note that this is just a basic example to get you started:

When you open this HTML file on a smartphone, it will display a canvas with randomly generated lines and circles. Every time you reload the page, the canvas will be regenerated with new random elements, creating a unique generative art piece.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

function generateArt() {
      // Clear canvas
      context.clearRect(0, 0, width, height);

// Generate random lines
      for (let i = 0; i < 50; i++) {
        const randomX1 = Math.random() * width;
        const randomY1 = Math.random() * height;
        const randomX2 = Math.random() * width;
        const randomY2 = Math.random() * height;
        const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

context.beginPath();
        context.moveTo(randomX1, randomY1);
        context.lineTo(randomX2, randomY2);
        context.strokeStyle = randomColor;
        context.lineWidth = Math.random() * 5;
        context.stroke();
      }

// Generate random circles
      for (let i = 0; i < 20; i++) {
        const randomX = Math.random() * width;
        const randomY = Math.random() * height;
        const randomRadius = Math.random() * 50;
        const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

context.beginPath();
        context.arc(randomX, randomY, randomRadius, 0, 2 * Math.PI);
        context.fillStyle = randomColor;
        context.fill();
        context.lineWidth = Math.random() * 5;
        context.strokeStyle = randomColor;
        context.stroke();
      }
    }

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