AI game creator

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

No:35863

←

Prev Next

→

Generative Art
Developer User16667｜Date and time 24/1/15 17:56:18
Build time 12.802 sec｜Game capacity 2.689KB｜

Script

As a programmer, you can create a game that incorporates generative art using JavaScript and HTML. Here's an example of how you can implement it as a single HTML file:

In this example, the game generates and displays random shapes (either rectangles or circles) on a canvas using generative art techniques. Each time you click on the canvas, the game generates a new set of shapes with different colors, sizes, and positions.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

As a programmer, you can create a game that incorporates generative art using JavaScript and HTML. Here's an example of how you can implement it as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Generative Art Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
      // Create the generative art game
      
      // Get the canvas element
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      
      // 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;
      }
      
      // Generate random shapes
      function generateShape() {
        const shapeType = Math.random() < 0.5 ? "rectangle" : "circle";
        const color = getRandomColor();
        const size = Math.floor(Math.random() * 50) + 10;
        const x = Math.floor(Math.random() * (canvas.width - size));
        const y = Math.floor(Math.random() * (canvas.height - size));
        
        return {
          type: shapeType,
          color: color,
          size: size,
          x: x,
          y: y
        };
      }
      
      // Draw shapes on the canvas
      function drawShape(shape) {
        ctx.fillStyle = shape.color;
        
        if (shape.type === "rectangle") {
          ctx.fillRect(shape.x, shape.y, shape.size, shape.size);
        } else if (shape.type === "circle") {
          ctx.beginPath();
          ctx.arc(shape.x + shape.size / 2, shape.y + shape.size / 2, shape.size / 2, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      
      // Generate and draw a set of shapes
      function generateArt() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        for (let i = 0; i < 10; i++) {
          const shape = generateShape();
          drawShape(shape);
        }
      }
      
      // Listen for canvas click events
      canvas.addEventListener("click", generateArt);
      
      // Start the generative art game
      generateArt();
    </script>
  </body>
</html>
```