AI game creator

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

No:22832

←

Prev Next

→

Generative Art
Developer User10546｜Date and time 23/10/25 20:10:38
Build time 43.604 sec｜Game capacity 2.305KB｜

Script

Sure! Here's a simple generative art game implemented as a single HTML file using JavaScript, enclosed in `` tags: <br><br> <br> <style> canvas { border: 1px solid black; } </style> <canvas id="canvas"></canvas>

This game creates particles on the canvas whenever the user clicks on it. The particles move around randomly and gradually shrink in size until they disappear. The canvas is continuously cleared and redrawn to create an animation effect. The game responds to smartphone touch events as well. You can customize the appearance of the particles, canvas size, and other parameters based on your preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple generative art game implemented as a single HTML file using JavaScript, enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Generative Art Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

const particles = [];

class Particle {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.size = Math.random() * 10 + 1;
          this.speedX = Math.random() * 3 - 1.5;
          this.speedY = Math.random() * 3 - 1.5;
        }
        update() {
          this.x += this.speedX;
          this.y += this.speedY;
          if (this.size > 0.2) this.size -= 0.1;
        }
        draw() {
          ctx.fillStyle = "rgba(255, 0, 0, 0.8)";
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
        }
      }

function handleParticles() {
        for (let i = 0; i < particles.length; i++) {
          particles[i].update();
          particles[i].draw();

if (particles[i].size <= 0.2) {
            particles.splice(i, 1);
            i--;
          }
        }
      }

function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        handleParticles();
        requestAnimationFrame(animate);
      }
      animate();

canvas.addEventListener("click", function (event) {
        const x = event.clientX;
        const y = event.clientY;
        for (let i = 0; i < 5; i++) {
          particles.push(new Particle(x, y));
        }
      });
    </script>
  </body>
</html>
```

This game creates particles on the canvas whenever the user clicks on it. The particles move around randomly and gradually shrink in size until they disappear. The canvas is continuously cleared and redrawn to create an animation effect. The game responds to smartphone touch events as well. You can customize the appearance of the particles, canvas size, and other parameters based on your preferences.