Generative Art's game | AI game creator

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

No:28905

79

Generative Art
Developer User14305｜Date and time 23/12/15 2:28:05
Build time 43.489 sec｜Game capacity 2.785KB｜

Sure! Here's an example of a simple generative art game implemented as a single HTML file:

This game creates a canvas where random shapes with random colors are generated and drawn each time the player taps on the canvas. It uses JavaScript code to handle touch events, generate shapes, and draw them on the canvas. The game starts immediately after the page loads the JavaScript code.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple generative art game implemented 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="canvas" width="300" height="300"></canvas>

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      
      // Generate random colors for the background and shapes
      const randomColor = () => {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      };
      
      // Function to generate a random shape
      const generateShape = () => {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const width = Math.random() * 100;
        const height = Math.random() * 100;
        const color = randomColor();
        
        return { x, y, width, height, color };
      };
      
      // Function to draw a shape on the canvas
      const drawShape = (shape) => {
        context.fillStyle = shape.color;
        context.fillRect(shape.x, shape.y, shape.width, shape.height);
      };
      
      // Clear the canvas
      const clearCanvas = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);
      };
      
      // Generate and draw a new shape on the canvas
      const generateAndDrawShape = () => {
        const shape = generateShape();
        drawShape(shape);
      };
      
      // Handle touch events on the canvas
      const handleTouchEvent = (event) => {
        event.preventDefault();
        const touches = event.changedTouches;
        for (let i = 0; i < touches.length; i++) {
          const touch = touches[i];
          const x = touch.pageX - canvas.offsetLeft;
          const y = touch.pageY - canvas.offsetTop;
          
          if (x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height) {
            clearCanvas();
            generateAndDrawShape();
          }
        }
      };
      
      // Add event listener for touch events
      canvas.addEventListener('touchstart', handleTouchEvent);
      
      // Start the game by drawing the initial shape
      generateAndDrawShape();
    });
  </script>
</body>
</html>
```

This game creates a canvas where random shapes with random colors are generated and drawn each time the player taps on the canvas. It uses JavaScript code to handle touch events, generate shapes, and draw them on the canvas. The game starts immediately after the page loads the JavaScript code.