AI game creator

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

No:20694

←

Prev Next

→

Generative Art
Developer User9127｜Date and time 23/10/10 18:39:14
Build time 13.691 sec｜Game capacity 2.137KB｜

Script

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

In this game, whenever you touch or click on the canvas, it will generate and display ten rectangles with random positions, sizes, and colors. The `generateRandomColor()` function is used to randomly generate a hex color value for each rectangle. The `drawRectangles()` function is responsible for clearing the canvas and drawing ten new rectangles each time it's called. The event listeners ensure that the rectangles are redrawn whenever the canvas is touched or clicked. Note that this is a very basic example, and you can enhance it further by adding more gameplay elements, interactions, or rules depending on your requirements and creativity.

←

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;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Randomly generate a color
    function generateRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

// Draw rectangles with random colors
    function drawRectangles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < 10; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const width = Math.random() * 100;
        const height = Math.random() * 100;
        const color = generateRandomColor();

ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);
      }
    }

// Event listener to redraw rectangles on touch/click
    canvas.addEventListener("touchend", drawRectangles);
    canvas.addEventListener("click", drawRectangles);

// Initial drawing
    drawRectangles();
  </script>
</body>
</html>
```

Note that this is a very basic example, and you can enhance it further by adding more gameplay elements, interactions, or rules depending on your requirements and creativity.