AI game creator

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

No:34724

←

Prev Next

→

Generative Art
Developer User16307｜Date and time 24/1/11 12:46:17
Build time 9.324 sec｜Game capacity 2.147KB｜

Script

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

In this game, shapes (circles or rectangles) of random colors and sizes are generated on the canvas. The user can regenerate the shapes by clicking or touching the canvas. You can add more features and complexity to the game as desired. Happy coding!

←

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 in a single HTML file, using JavaScript and 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="myCanvas" 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 generateShape() {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 50 + 10;
        const color = getRandomColor();

const shape = Math.random() > 0.5 ? "circle" : "rectangle";

if (shape === "circle") {
          context.beginPath();
          context.arc(x, y, size, 0, 2 * Math.PI);
          context.fillStyle = color;
          context.fill();
          context.closePath();
        } else {
          context.fillStyle = color;
          context.fillRect(x, y, size, size);
        }
      }

// Generate initial shapes
      for (let i = 0; i < 10; i++) {
        generateShape();
      }

// Allow the user to regenerate shapes on touch/click
      canvas.addEventListener("click", function (event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < 10; i++) {
          generateShape();
        }
      });
    </script>
  </body>
</html>
```