AI game creator

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

No:22927

←

Prev Next

→

Generative Art
Developer User10603｜Date and time 23/10/26 18:50:01
Build time 40.082 sec｜Game capacity 2.109KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file with JavaScript, utilizing pictograms and designed for smartphone operation:

This program generates random shapes on a canvas whenever the canvas is clicked on. The shapes are filled with random colors generated using the `getRandomColor` function. The canvas is responsive and can be interacted with on a smartphone. Simply open the HTML file in a smartphone's web browser, and clicking on the canvas will generate new generative art.

←

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 with JavaScript, utilizing pictograms and designed for smartphone operation:

```html
<!DOCTYPE html>
<html>

<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <script>
    // Generate a random color
    function getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Initialize canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

// Set canvas dimensions
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

// Generate and draw random shapes
    function generateArt() {
      // Clear canvas
      ctx.clearRect(0, 0, width, height);

// Generate random shapes
      var numShapes = Math.floor(Math.random() * 10) + 1;
      for (var i = 0; i < numShapes; i++) {
        var x = Math.floor(Math.random() * width);
        var y = Math.floor(Math.random() * height);
        var size = Math.floor(Math.random() * 100) + 50;
        var color = getRandomColor();

// Draw shape
        ctx.fillStyle = color;
        ctx.fillRect(x, y, size, size);
      }
    }

// Event listener for canvas click
    canvas.addEventListener("click", function (event) {
      generateArt();
    });

// Generate initial art
    generateArt();
  </script>
</body>

</html>
```

This program generates random shapes on a canvas whenever the canvas is clicked on. The shapes are filled with random colors generated using the `getRandomColor` function. The canvas is responsive and can be interacted with on a smartphone. Simply open the HTML file in a smartphone's web browser, and clicking on the canvas will generate new generative art.