Mushroom cloud particle effect's game

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

No:38707

←

Prev Next

→

Mushroom cloud particle effect
Developer User17421｜Date and time 24/1/25 7:57:10
Build time 12.243 sec｜Game capacity 2.523KB｜

Script

Sure, here's a simple mushroom cloud particle effect game implemented as a single HTML file with enclosed JavaScript code:

When you open the HTML file in your web browser (on a smartphone or computer), you'll see a canvas where you can tap/click to create a mushroom cloud particle effect. Each tap/click generates multiple particles that move in different directions with randomized colors and gradually fade away. The game continuously updates and animates the particles on the canvas.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple mushroom cloud particle effect game implemented as a single HTML file with enclosed JavaScript code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mushroom Cloud Particle Effect Game</title>
  <style>
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game Variables
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    const particles = [];

// Particle Class
    class Particle {
      constructor(x, y, vx, vy, color) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.color = color;
        this.opacity = 1;
      }

update() {
        this.x += this.vx;
        this.y += this.vy;
        this.opacity -= 0.01;
      }

draw() {
        ctx.save();
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, 10, 10);
        ctx.restore();
      }
    }

// Game Loop
    function update() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw particles
      particles.forEach((particle, index) => {
        particle.update();
        particle.draw();

if (particle.opacity <= 0) {
          particles.splice(index, 1);
        }
      });

requestAnimationFrame(update);
    }

// Event Listener
    canvas.addEventListener("click", function (event) {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

for (let i = 0; i < 50; i++) {
        const velocity = Math.random() * 8 + 2;
        const angle = Math.random() * Math.PI * 2;
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;
        const color = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 1)`;

particles.push(new Particle(mouseX, mouseY, vx, vy, color));
      }
    });

// Start the Game
    update();
  </script>
</body>
</html>
```