AI game creator

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

No:18987

←

Prev Next

→

Generative Art
Developer User8375｜Date and time 23/10/1 11:09:42
Build time 7.928 sec｜Game capacity 2.21KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    canvas {
      background-color: #000;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <canvas></canvas>

// Resize canvas to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Particle class
    function Particle(x, y, size, color) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.velX = Math.random() * 4 - 2;
      this.velY = Math.random() * 4 - 2;

this.update = function () {
        this.x += this.velX;
        this.y += this.velY;
      };

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

// Function to create particles
    function createParticles(e) {
      var xPos = e.clientX;
      var yPos = e.clientY;
      var size = Math.random() * 20 + 10;
      var color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';

particles.push(new Particle(xPos, yPos, size, color));
    }

// Function to update and render particles
    function renderParticles() {
      context.clearRect(0, 0, canvas.width, canvas.height);

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

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

requestAnimationFrame(renderParticles);
    }

// Event listener for mouse clicks
    canvas.addEventListener('click', createParticles);

// Start the rendering process
    renderParticles();
  </script>
</body>
</html>