AI game creator

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

No:46967

←

Prev Next

→

particle
Developer User20334｜Date and time 24/2/26 22:19:53
Build time 8.623 sec｜Game capacity 1.928KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<html>
  <head>
    <title>Particle Game</title>
  </head>
  <body>
    <canvas id="particleCanvas" width="400" height="400"></canvas>
    
    <script>
      const canvas = document.getElementById('particleCanvas');
      const ctx = canvas.getContext('2d');
      
      let particles = [];
      
      function Particle(x, y, radius, color, dx, dy) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = dx;
        this.dy = dy;
        
        this.draw = function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        }
        
        this.update = function() {
          this.x += this.dx;
          this.y += this.dy;
          
          if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
            this.dx = -this.dx;
          }
          
          if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
            this.dy = -this.dy;
          }
        }
      }
      
      function createParticles() {
        for (let i = 0; i < 10; i++) {
          let x = Math.random() * canvas.width;
          let y = Math.random() * canvas.height;
          let radius = 10;
          let color = 'rgb(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ')';
          let dx = (Math.random() - 0.5) * 2;
          let dy = (Math.random() - 0.5) * 2;
          particles.push(new Particle(x, y, radius, color, dx, dy));
        }
      }
      
      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
          particle.draw();
          particle.update();
        });
      }
      
      createParticles();
      animate();
    </script>
  </body>
</html>