AI game creator

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

No:40607

←

Prev Next

→

Generative Art
Developer User18216｜Date and time 24/2/3 19:57:04
Build time 8.96 sec｜Game capacity 2.515KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags:

To play the game, simply open the HTML file on your smartphone or any browser, and click on the screen to generate colorful particles that move around the canvas. The particles gradually shrink in size, and once they reach a size of 0, they disappear. Have fun playing with generative art!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags:

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

canvas.width = width;
    canvas.height = height;

const particles = [];

class Particle {
      constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.speedX = Math.random() * 4 - 2;
        this.speedY = Math.random() * 4 - 2;
      }

update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.size -= 0.05;

if (this.size < 0) {
          this.size = 0;
        }
      }

draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      }
    }

function createParticle(x, y) {
      const size = Math.random() * 15 + 5;
      const color = getRandomColor();
      particles.push(new Particle(x, y, size, color));
    }

function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

function handleMouseClick(event) {
      const clientX = event.clientX;
      const clientY = event.clientY;
      createParticle(clientX, clientY);
    }

function animate() {
      ctx.clearRect(0, 0, width, height);

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

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

requestAnimationFrame(animate);
    }

canvas.addEventListener('click', handleMouseClick);

animate();
  </script>
</body>
</html>
```