当前位置：首页 > JavaScript

js实现爆炸

2026-03-15 03:46:33JavaScript

实现爆炸效果的JavaScript方法

使用Canvas绘制爆炸动画

Canvas是HTML5提供的绘图API，适合实现动态爆炸效果。以下是一个基础实现：

js实现爆炸

const canvas = document.getElementById('explosionCanvas');
const ctx = canvas.getContext('2d');
const particles = [];

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 5 + 1;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
    this.color = `hsl(${Math.random() * 60}, 100%, 50%)`;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.size > 0.2) this.size -= 0.1;
  }

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

function createExplosion(x, y) {
  for (let i = 0; i < 50; i++) {
    particles.push(new Particle(x, y));
  }
}

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  particles.forEach((particle, index) => {
    particle.update();
    particle.draw();
    if (particle.size <= 0.2) {
      particles.splice(index, 1);
    }
  });

  requestAnimationFrame(animate);
}

canvas.addEventListener('click', (e) => {
  createExplosion(e.clientX, e.clientY);
});

animate();

使用CSS动画实现简易爆炸

对于不需要复杂物理效果的场景，CSS动画也能实现视觉爆炸：

js实现爆炸

<div class="explosion"></div>

<style>
  .explosion {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff5722;
    border-radius: 50%;
    animation: explode 0.5s ease-out forwards;
  }

  @keyframes explode {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(20); opacity: 0; }
  }
</style>

<script>
  function createCSSExplosion(x, y) {
    const explosion = document.createElement('div');
    explosion.className = 'explosion';
    explosion.style.left = `${x}px`;
    explosion.style.top = `${y}px`;
    document.body.appendChild(explosion);

    setTimeout(() => {
      explosion.remove();
    }, 500);
  }

  document.addEventListener('click', (e) => {
    createCSSExplosion(e.clientX, e.clientY);
  });
</script>