AI game creator

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

No:8461

3254

←

Prev Next

→

Generative Art
Developer User4195｜Date and time 23/7/16 7:52:13
Build time 13.752 sec｜Game capacity 1.818KB｜

Script

Sure! Here's a simple generative art game implemented as a single HTML file, containing JavaScript code enclosed in script tags:

In this generative art game, the canvas element is used to draw circles of random colors at random positions on the screen. The `getRandomColor()` function generates a random hexadecimal color code, and the `drawCircle()` function is responsible for drawing the circles on the canvas. When the page loads, the `generateArt()` function is called, which generates and draws 100 circles on the canvas. Each time you refresh the page, new circles with different colors and positions will be generated, creating a unique generative art experience. Note: This game can be played by opening the HTML file in a web browser on a smartphone.

←

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 implemented as a single HTML file, containing JavaScript code enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

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

function drawCircle(x, y) {
      ctx.beginPath();
      ctx.arc(x, y, 30, 0, Math.PI * 2, false);
      ctx.fillStyle = getRandomColor();
      ctx.fill();
      ctx.closePath();
    }

function generateArt() {
      for (let i = 0; i < 100; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        drawCircle(x, y);
      }
    }

generateArt();
  </script>
</body>
</html>
```

When the page loads, the `generateArt()` function is called, which generates and draws 100 circles on the canvas. Each time you refresh the page, new circles with different colors and positions will be generated, creating a unique generative art experience.

Note: This game can be played by opening the HTML file in a web browser on a smartphone.