Custom particle creator's game

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

No:20280

117

←

Prev Next

→

Custom particle creator
Developer User8892｜Date and time 23/10/9 3:21:48
Build time 10.78 sec｜Game capacity 2.925KB｜

Script

Нажимайте чтобы частицы появились!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Custom Particle Creator Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
 
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const particles = [];
      
      // Function to create particles
      function createParticle(x, y, size) {
        const particle = {
          x: x,
          y: y,
          size: size,
          speedX: Math.random() * 4 - 2,
          speedY: Math.random() * 4 - 2,
          color: "rgb(" + getRandomInt(0, 255) + ", " +
                         getRandomInt(0, 255) + ", " +
                         getRandomInt(0, 255) + ")"
        };
        
        particles.push(particle);
      }
      
      // Function to generate a random integer
      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      
      // Function to update particle positions
      function updateParticles() {
        particles.forEach(function(particle) {
          particle.x += particle.speedX;
          particle.y += particle.speedY;
          
          if (particle.size > 0.1) {
            particle.size -= 0.1;
          }
        });
        
        particles.forEach(function(particle, index) {
          if (particle.size <= 0.1) {
            particles.splice(index, 1);
          }
        });
      }
      
      // Function to draw particles on the canvas
      function drawParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(function(particle) {
          ctx.beginPath();
          ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
          ctx.fillStyle = particle.color;
          ctx.fill();
        });
      }
      
      // Function to handle touch/mouse events
      function handleEvent(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        
        createParticle(x, y, Math.random() * 10 + 5);
      }
      
      // Attach event listener to the canvas
      canvas.addEventListener("touchstart", handleEvent);
      canvas.addEventListener("mousedown", handleEvent);
      
      // Function to start the game loop
      function startGame() {
        setInterval(function() {
          updateParticles();
          drawParticles();
        }, 30);
      }
      
      // Start the game
      startGame();
    });
  </script>
</body>
</html>
Нажимайте чтобы частицы появились!