Artificii

🎆 Generator Script Artificii

Script realizat de Petre-Vitan

Previzualizare Live (Efect de jos în sus):

Apasă click în căsuța de test pentru a exploda manual

💡 Dă un singur click pe codul de mai jos pentru a-l selecta, apoi apasă Ctrl+C:

<canvas id="blogFireworksCanvas"></canvas> <style> #blogFireworksCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; background: transparent; } </style> <script type='text/javascript'> //<![CDATA[ (function() { const canvas = document.getElementById("blogFireworksCanvas"); if (!canvas) return; const ctx = canvas.getContext("2d"); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener("resize", resize); resize(); let parts = []; let rocs = []; const colors = ["#FF0033", "#00FF66", "#00FFFF", "#FFFF00", "#FF00FF", "#3300FF", "#FF3300"]; class FRoc { constructor(sx, sy, tx, ty, c) { this.x = sx; this.y = sy; this.tx = tx; this.ty = ty; this.c = c; this.v = { x: 0, y: -5.5 }; this.al = true; } up() { this.y += this.v.y; if(this.y <= this.ty) { this.al = false; burst(this.x, this.y, this.c); } } draw() { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, 3.5, 0, Math.PI*2); ctx.fillStyle = "#ffffff"; ctx.shadowBlur = 15; ctx.shadowColor = this.c; ctx.fill(); ctx.restore(); } } class FPart { constructor(x, y, c) { this.x = x; this.y = y; this.c = c; this.r = Math.random() * 3.5 + 1; const a = Math.random() * Math.PI * 2, s = Math.random() * 5.5 + 1.5; this.v = { x: Math.cos(a) * s, y: Math.sin(a) * s }; this.al = 1; this.dec = Math.random() * 0.012 + 0.012; } up() { this.v.y += 0.045; this.x += this.v.x; this.y += this.v.y; this.al -= this.dec; } draw() { ctx.save(); ctx.globalAlpha = this.al; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.c; ctx.shadowBlur = 20; ctx.shadowColor = this.c; ctx.fill(); ctx.restore(); } } function burst(x, y, c) { const randC = c || colors[Math.floor(Math.random() * colors.length)]; for(let i=0; i<65; i++) parts.push(new FPart(x, y, randC)); } function spawn() { const sx = Math.random() * (canvas.width * 0.8) + (canvas.width * 0.1); const ty = Math.random() * (canvas.height * 0.4) + (canvas.height * 0.1); rocs.push(new FRoc(sx, canvas.height, sx, ty, colors[Math.floor(Math.random()*colors.length)])); } setInterval(spawn, 1500); window.addEventListener("click", (e) => { burst(e.clientX, e.clientY); }); function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i = rocs.length - 1; i >= 0; i--) { rocs[i].up(); if(!rocs[i].al) rocs.splice(i, 1); else rocs[i].draw(); } for(let i = parts.length - 1; i >= 0; i--) { parts[i].up(); parts[i].draw(); if(parts[i].al <= 0) parts.splice(i, 1); } requestAnimationFrame(loop); } requestAnimationFrame(loop); })(); //]]> </script>