`data/artifacts/0ac1af2eaed4/kimi.html`

57 lines
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;overflow:hidden;background:#000}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
let w=c.width=innerWidth,h=c.height=innerHeight;
onresize=()=>{w=c.width=innerWidth;h=c.height=innerHeight};
const R=[],P=[];
class Particle{
constructor(x,y,c){
this.x=x;this.y=y;
const a=Math.random()*6.28,v=Math.random()*6;
this.vx=Math.cos(a)*v;this.vy=Math.sin(a)*v;
this.l=1;this.c=c;this.g=0.08;
}
update(){
this.vy+=this.g;this.x+=this.vx;this.y+=this.vy;this.l-=0.015;
x.globalAlpha=this.l;x.fillStyle=this.c;x.beginPath();x.arc(this.x,this.y,2.5,0,7);x.fill();
}
}
class Rocket{
constructor(tx,ty){
this.x=Math.random()*w;this.y=h;this.tx=tx;this.ty=ty;
const dx=tx-this.x,dy=ty-h,d=Math.sqrt(dx*dx+dy*dy);
this.vx=dx/d*12;this.vy=dy/d*12;this.dead=0;
this.c=`hsl(${Math.random()*360},100%,60%)`;
}
update(){
this.x+=this.vx;this.y+=this.vy;
if(Math.hypot(this.x-this.tx,this.y-this.ty)<10||this.vy>0){
this.dead=1;
for(let i=0;i<40;i++)P.push(new Particle(this.x,this.y,this.c));
}
x.fillStyle=this.c;x.beginPath();x.arc(this.x,this.y,3,0,7);x.fill();
}
}
function loop(){
x.globalCompositeOperation='source-over';
x.fillStyle='rgba(0,0,0,0.15)';x.fillRect(0,0,w,h);
x.globalCompositeOperation='lighter';
for(let i=R.length-1;i>=0;i--){R[i].update();if(R[i].dead)R.splice(i,1)}
for(let i=P.length-1;i>=0;i--){P[i].update();if(P[i].l<=0)P.splice(i,1)}
requestAnimationFrame(loop);
}
c.onclick=e=>R.push(new Rocket(e.clientX,e.clientY));
setInterval(()=>R.push(new Rocket(Math.random()*w,Math.random()*h*0.6)),600);
loop();
</script>
</body>
</html>