AI game creator

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

No:24453

146

←

Prev Next

→

Generative Art
Developer User11602｜Date and time 23/11/9 6:00:14
Build time 39.097 sec｜Game capacity 2.173KB｜

Script

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

This game consists of a canvas element where generative art is displayed. Each time the game starts, random shapes are drawn on the canvas. When the player touches a shape, the game alerts the RGB values of the color at the touch position. After that, the canvas is cleared, and new art is generated. Please note that this is a simple example and can be further expanded and customized according to your specific requirements and design preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, here's a simple example of a 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>

// Start the game
    function startGame() {
      // Generate random art
      generateArt();

// Handle touch events
      canvas.addEventListener('touchstart', handleTouchStart);
    }

// Generate random art
    function generateArt() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw random shapes
      for (let i = 0; i < 10; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 50 + 10;

// Draw a rectangle
        ctx.fillRect(x, y, size, size);
      }
    }

// Handle touch events
    function handleTouchStart(e) {
      e.preventDefault();

// Check if the touch position is inside a shape
      const touchX = e.touches[0].clientX - canvas.offsetLeft;
      const touchY = e.touches[0].clientY - canvas.offsetTop;

const imageData = ctx.getImageData(touchX, touchY, 1, 1);
      const red = imageData.data[0];
      const green = imageData.data[1];
      const blue = imageData.data[2];

// Alert the color values
      alert(`RGB: ${red}, ${green}, ${blue}`);

// Generate new art
      generateArt();
    }

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

Please note that this is a simple example and can be further expanded and customized according to your specific requirements and design preferences.