CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK ~ Blogul lui Petre Vitan

1. Copiază Codul Sursă (Click în casetă sau pe buton)

<!-- CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK -->
<canvas id="canvas-explozie-soc" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999999;"></canvas>

<script>
(function() {
  var canvas = document.getElementById('canvas-explozie-soc');
  var ctx = canvas.getContext('2d');
  var particule = [];
  var undeSoc = [];

  var culoriVii = [
    '#00f6ff', '#03d16a', '#ff007f', '#ffea00', 
    '#ff5722', '#8f003c', '#9d00ff', '#ffffff'
  ];

  function reancadreazaCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  window.addEventListener('resize', reancadreazaCanvas);
  reancadreazaCanvas();

  function UndaSoc(x, y) {
    this.x = x;
    this.y = y;
    this.raza = 5;
    this.vitezaExpansiune = 12;
    this.alfa = 1;
    this.degradare = 0.04;
    this.culoare = culoriVii[Math.floor(Math.random() * culoriVii.length)];
    this.grosimeLinie = 3;
  }

  UndaSoc.prototype.update = function() {
    this.raza += this.vitezaExpansiune;
    this.vitezaExpansiune *= 0.92;
    this.grosimeLinie *= 0.94;
    this.alfa -= this.degradare;
  };

  UndaSoc.prototype.draw = function() {
    if (this.alfa <= 0) return;
    ctx.save();
    ctx.globalAlpha = this.alfa;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.raza, 0, Math.PI * 2);
    ctx.strokeStyle = this.culoare;
    ctx.lineWidth = this.grosimeLinie;
    ctx.shadowBlur = 20;
    ctx.shadowColor = this.culoare;
    ctx.stroke();
    ctx.restore();
  };

  function ParticulaMegaExplozie(x, y, tip) {
    this.x = x;
    this.y = y;
    this.tip = tip;
    var unghi = Math.random() * Math.PI * 2;
    
    if (this.tip === 'scanteie') {
      var viteza = Math.random() * 16 + 8;
      this.vx = Math.cos(unghi) * viteza;
      this.vy = Math.sin(unghi) * viteza - (Math.random() * 3);
      this.raza = Math.random() * 3.5 + 1.5;
      this.culoare = culoriVii[Math.floor(Math.random() * culoriVii.length)];
      this.alfa = 1;
      this.degradare = Math.random() * 0.04 + 0.025;
    } else {
      var vitezaFum = Math.random() * 5 + 1;
      this.vx = Math.cos(unghi) * vitezaFum;
      this.vy = Math.sin(unghi) * vitezaFum - 1.5;
      this.raza = Math.random() * 8 + 5;
      this.culoare = ['#222222', '#3a3a3a', '#4f4f4f'][Math.floor(Math.random() * 3)];
      this.alfa = 0.5;
      this.degradare = Math.random() * 0.02 + 0.015;
    }
  }

  ParticulaMegaExplozie.prototype.update = function() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.tip === 'scanteie') {
      this.vy += 0.35; 
      this.vx *= 0.96; 
      this.vy *= 0.96;
    } else {
      this.vy -= 0.04; 
      this.raza += 0.25; 
      this.vx *= 0.94;
      this.vy *= 0.94;
    }
    this.alfa -= this.degradare;
  };

  ParticulaMegaExplozie.prototype.draw = function() {
    if (this.alfa <= 0) return;
    ctx.save();
    ctx.globalAlpha = this.alfa;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.raza, 0, Math.PI * 2);
    ctx.fillStyle = this.culoare;
    if (this.tip === 'scanteie') {
      ctx.shadowBlur = 18;
      ctx.shadowColor = this.culoare;
    }
    ctx.fill();
    ctx.restore();
  };

  window.addEventListener('click', function(e) {
    undeSoc.push(new UndaSoc(e.clientX, e.clientY));
    for (var i = 0; i < 60; i++) {
      particule.push(new ParticulaMegaExplozie(e.clientX, e.clientY, 'scanteie'));
    }
    for (var j = 0; j < 20; j++) {
      particule.push(new ParticulaMegaExplozie(e.clientX, e.clientY, 'fum'));
    }
  });

  function animeaza() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = undeSoc.length - 1; i >= 0; i--) {
      var u = undeSoc[i];
      u.update();
      if (u.alfa <= 0) { undeSoc.splice(i, 1); } else { u.draw(); }
    }
    for (var j = particule.length - 1; j >= 0; j--) {
      var p = particule[j];
      p.update();
      if (p.alfa <= 0) { particule.splice(j, 1); } else { p.draw(); }
    }
    requestAnimationFrame(animeaza);
  }
  requestAnimationFrame(animeaza);
})();
</script>

<style>
html, body, :root {
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
  scrollbar-color: #05a0a1 #0d1518 !important;
}
::-webkit-scrollbar {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}
::-webkit-scrollbar-track {
  background: #0d1518 !important;
  border-radius: 20px !important;
}
::-webkit-scrollbar-thumb {
  background: #05a0a1 !important;
  background: linear-gradient(180deg, #05a0a1 0%, #0b98ff 100%) !important;
  border-radius: 20px !important;
  border: 3px solid #0d1518 !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #0b98ff !important;
  background: linear-gradient(180deg, #0b98ff 0%, #7e0188 100%) !important;
}
</style>

2. Zonă de Previzualizare Activă

Apasă un click oriunde în interiorul chenarului de mai jos pentru a testa efectul vizual.

CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK

1. Copiază Codul Sursă (Click în casetă sau pe buton)

2. Zonă de Previzualizare Activă

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut