CANVAS PENTRU EFECTUL DE EXPLOZIE ȘI UNDĂ DE ȘOC LA CLICK ~ Blogul lui Petre VitanBlogul 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

Articole aleatorii

De unde avem vizite?

Ultimile comentarii

Bine de stiut