AI game creator

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

No:9605

←

Prev Next

→

Generative Art
Developer User4393｜Date and time 23/7/26 9:51:42
Build time 14.119 sec｜Game capacity 1.897KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags:

In this game, whenever you refresh the page, random shapes (rectangles) of random colors will be generated on the canvas. The canvas size is 400x400 pixels, but you can adjust it as per your preference. The shapes will be either filled or stroked based on randomness. Feel free to modify this code to add more features or interactions to make it a complete game.

←

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Generative Art Game</title>
  <style>
    #canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

// Function to generate random colors
    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 generate random shapes
    function generateShapes() {
      const numShapes = Math.floor(Math.random() * 10) + 1;
      for (let i = 0; i < numShapes; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 50 + 10;
        const color = getRandomColor();

if (Math.random() > 0.5) {
          context.fillStyle = color;
          context.fillRect(x, y, size, size);
        } else {
          context.strokeStyle = color;
          context.strokeRect(x, y, size, size);
        }
      }
    }

// Call the generateShapes function to start creating shapes
    generateShapes();
  </script>
</body>
</html>
```

Feel free to modify this code to add more features or interactions to make it a complete game.