JS--烟花效果
程序员文章站
2022-06-01 18:38:29
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container{
width: 80%;
height: 500px;
margin: 30px auto;
background-color: #000000;
border: 2px solid #000000;
cursor: pointer;
position: relative;
overflow: hidden;
}
.fire{
width: 5px;
height: 20px;
position: absolute;
bottom: 0;
border-top-left-radius: 90%;
border-top-right-radius: 90%;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 60%;
}
.s_fire{
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src="move.2.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
class Fire{
constructor(pos) {
this.cont=document.getElementById("container");
this.x=pos.x;
this.y=pos.y;
}
create(){
this.f=document.createElement("div");
this.f.className="fire";
this.f.style.backgroundColor=randColor();
this.cont.appendChild(this.f);
this.f.style.left=this.x+"px";
this.move();
}
move(){
move(this.f,{top:this.y},()=>{
this.f.remove();
var sFireNum=rand(15,30);
var r=rand(150,300);
for(var i=0;i<sFireNum;i++){
var sF=new SmallFire({
cont:this.cont,
x:this.x,
y:this.y,
r:r,
i:i,
sum:sFireNum
});
sF.create();
}
});
}
}
class SmallFire{
constructor(obj) {
this.cont=obj.cont;
this.x=obj.x;
this.y=obj.y;
this.r=obj.r;
this.i=obj.i;
this.sum=obj.sum;
}
create(){
this.f=document.createElement("div");
this.f.className="s_fire";
this.f.style.backgroundColor=randColor();
this.cont.appendChild(this.f);
this.f.style.left=this.x+"px";
this.f.style.top=this.y+"px";
this.move();
}
move(){
move(this.f,{
left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y,
},()=>{
this.f.remove()
});
}
}
var ocant=document.getElementById("container");
ocant.onclick=function(eve){
var e=eve||window.evevt;
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
var f=new Fire({
x:x,
y:y
});
f.create();
}
function rand(min,max){
return Math.round(Math.random()*(max-min)+min);
}
function randColor(){
return`rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;
}
</script>
</html>