AI game creator

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

No:26099

←

Prev Next

→

Generative Art
Developer User12849｜Date and time 23/11/26 22:54:48
Build time 34.772 sec｜Game capacity 2.192KB｜

Script

Sure, here's an example of a simple generative art game implemented as a single HTML file using JavaScript:

In this generative art game, random shapes (circle, square, or triangle) with random colors are drawn on a canvas element. The game continuously loops, clearing the canvas and redrawing new random shapes every frame. Feel free to customize the code and add more complex generative patterns or interactions to the 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:

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

// Generating 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;
    }

// Drawing a random shape at a random position with a random color
    function drawRandomShape() {
      const shapes = ["circle", "square", "triangle"];
      const shape = shapes[Math.floor(Math.random() * shapes.length)];
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const color = getRandomColor();

ctx.beginPath();
      if (shape === "circle") {
        ctx.arc(x, y, 50, 0, Math.PI * 2);
      } else if (shape === "square") {
        ctx.fillRect(x, y, 100, 100);
      } else if (shape === "triangle") {
        ctx.moveTo(x, y);
        ctx.lineTo(x + 100, y);
        ctx.lineTo(x + 50, y + 100);
        ctx.lineTo(x, y);
      }
      ctx.fillStyle = color;
      ctx.fill();
    }

// Start the game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw random shapes
      for (let i = 0; i < 10; i++) {
        drawRandomShape();
      }

// Repeat the game loop
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();
  </script>
</body>
</html>
```