AI game creator

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

No:50994

←

Prev Next

→

Particles
Developer User21444｜Date and time 24/3/10 11:19:49
Build time 4.369 sec｜Game capacity 1.562KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Juego de Partículas</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

let particles = [];

canvas.addEventListener("click", function(event) {
      const particle = {
        x: event.clientX - canvas.getBoundingClientRect().left,
        y: event.clientY - canvas.getBoundingClientRect().top,
        color: getRandomColor(),
        speedX: Math.random() * 4 - 2,
        speedY: Math.random() * 4 - 2
      };
      particles.push(particle);
    });

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

function updateParticles() {
      particles.forEach(particle => {
        particle.x += particle.speedX;
        particle.y += particle.speedY;
      });
    }

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

particles.forEach(particle => {
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = particle.color;
        ctx.fill();
      });
    }

function gameLoop() {
      updateParticles();
      drawParticles();
      requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>