AI game creator

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

No:40174

←

Prev Next

→

Generative Art
Developer User17934｜Date and time 24/2/1 12:52:00
Build time 8.014 sec｜Game capacity 1.975KB｜

Script

Sure, here's an example of a simple generative art game implemented as a single HTML file using JavaScript. The game allows you to create art by clicking on the screen, and each click generates a randomized colorful shape.

You can save the above code as an HTML file and open it in a web browser, preferably on a smartphone, to play the generative art game. Each click on the screen will generate a random shape (square, circle, or triangle) with a random color. Have fun creating your own generative art!

←

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>
</head>
<body>
  <canvas id="canvas" style="border: 1px solid black;"></canvas>
  
  <script>
    // Initialize canvas
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    // Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Event listener for mouse click
    canvas.addEventListener("click", function(event) {
      drawShape(event.clientX, event.clientY);
    });
    
    // Function to draw shape
    function drawShape(x, y) {
      var shapes = ["square", "circle", "triangle"];
      var randomShape = shapes[Math.floor(Math.random() * shapes.length)];
      
      var colors = ["red", "blue", "green", "yellow", "orange", "purple"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];

ctx.fillStyle = randomColor;
      
      switch(randomShape) {
        case "square":
          ctx.fillRect(x - 25, y - 25, 50, 50);
          break;
        case "circle":
          ctx.beginPath();
          ctx.arc(x, y, 25, 0, 2 * Math.PI);
          ctx.fill();
          break;
        case "triangle":
          ctx.beginPath();
          ctx.moveTo(x, y - 25);
          ctx.lineTo(x + 25, y + 25);
          ctx.lineTo(x - 25, y + 25);
          ctx.closePath();
          ctx.fill();
          break;
      }
    }

</script>
</body>
</html>
```