AI game creator

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

No:12513

119

←

Prev Next

→

Generative Art
Developer Ayobami User5156｜Date and time 23/8/19 0:30:00
Build time 14.211 sec｜Game capacity 2.45KB｜

Script

Sure! Here's a simple example of a generative art game implemented as a single HTML file using JavaScript. The game allows you to create art by clicking and dragging on the screen to draw different shapes. You can play it on a smartphone by opening the HTML file in a web browser.

To play the game, you can open the HTML file in a web browser on your smartphone. Once the file is opened, you'll see a canvas element where you can draw with your finger or stylus. Simply touch and drag on the screen to create different shapes and patterns. The previous coordinates of the touch/mouse movements are stored to create smooth lines. This implementation uses JavaScript and the HTML5 Canvas API to create the generative art experience. It provides a basic drawing functionality where you can create interesting patterns by moving your finger or mouse on the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script>
    // Initialize canvas and context
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // Store previous mouse coordinates
    let prevX = 0;
    let prevY = 0;
    
    // Event listeners for touch screen devices
    canvas.addEventListener('touchstart', handleStart);
    canvas.addEventListener('touchmove', handleMove);
    
    // Event listeners for non-touch devices
    canvas.addEventListener('mousedown', handleStart);
    canvas.addEventListener('mousemove', handleMove);
    canvas.addEventListener('mouseup', handleEnd);
    
    // Handle touch/mouse start event
    function handleStart(event) {
      event.preventDefault();
      const touch = event.touches ? event.touches[0] : event;
      prevX = touch.clientX;
      prevY = touch.clientY;
    }
    
    // Handle touch/move event
    function handleMove(event) {
      event.preventDefault();
      const touch = event.touches ? event.touches[0] : event;
      const currentX = touch.clientX;
      const currentY = touch.clientY;
      
      ctx.beginPath();
      ctx.moveTo(prevX, prevY);
      ctx.lineTo(currentX, currentY);
      ctx.stroke();
      
      prevX = currentX;
      prevY = currentY;
    }
    
    // Handle touch/mouse end event
    function handleEnd(event) {
      event.preventDefault();
    }
  </script>
</body>
</html>
```

This implementation uses JavaScript and the HTML5 Canvas API to create the generative art experience. It provides a basic drawing functionality where you can create interesting patterns by moving your finger or mouse on the canvas.