JavaScript模拟烟花炸裂
使用JavaScript模拟烟花的炸裂，这里实现圆形炸裂和随机炸裂两种方式，模拟烟花炸裂的操作步骤为从下而上一个大烟花，到达鼠标的位置后大烟花消失，然后有多个移动到各个地方各种颜色的小烟花，再让其消失，实现代码如下：
两种烟花都需要再js中添加，所以body内只需要一个div：
需要在css中对div进行修饰，并且提前对两种方式的烟花进行修饰：
#container{
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin:20px auto;
cursor: pointer;
position: relative;
overflow: hidden;
}
.fire{
width: 10px;
height:10px;
position: absolute;
bottom: 0;
}
.small-fire{
width: 10px;
height:10px;
position: absolute;
border-radius: 50%;
}
因为是两种烟花，所以需要两个实例，使用ES6新增的class语法实现：
class Fire{}
class SmallFire{}
大烟花：
class Fire{
constructor(pos){
this.cont = document.getElementById("container");
// 因为传给了new的方法，那么constructor负责接收
// 接收之后，直接解析到this，方便在后续方法中使用
this.x = pos.x;
this.y = pos.y;
}
create(){
// 创建元素设置样式和位置
this.f = document.createElement("div");
this.f.className = "fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
// 位置为鼠标点击的坐标的位置
this.f.style.left = this.x + "px";
// 初始信息设置完成后，开始运动
this.fireMove();
}
fireMove(){
// 调用了运动函数，传入要运动的元素，运动的属性和目标，结束后要做的事情
move(this.f,{
top:this.y
},()=>{
// 当主体烟花运动到目标后，删除主体烟花
this.f.remove();
// 准备创建小烟花：
// 准备总个数
var randomNum = random(10,20);
// 准备小烟花炸出来的圆的半径
var r = random(100,200);
// 根据个数，重复创建小烟花实例
for(var i=0;i<randomNum;i++){
// 创建实例时，需要将：以下信息都传到小烟花的实例中
// 大框，坐标，半径，个数，当前烟花的索引
var sf = new SmallFire({
cont:this.cont,
x:this.x,
y:this.y,
r:r,
sum:randomNum,
i:i
});
// 执行创建方法
sf.create();
}
});
}
}
小烟花：
class SmallFire{
constructor(obj){
// 接收并解析：大框，坐标，半径，个数，当前烟花的索引
this.cont = obj.cont;
this.x = obj.x;
this.y = obj.y;
this.r = obj.r;
this.sum = obj.sum;
this.i = obj.i;
}
create(){
// 创建小烟花的元素，设置位置，和样式
this.f = document.createElement("div");
this.f.className = "small-fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
this.f.style.left = this.x + "px";
this.f.style.top = this.y + "px";
// 小烟花开始运动
this.smallMove();
}
smallMove(){
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 ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
// 获取坐标，准备给将来的烟花元素使用
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 创建烟花元素，时，将坐标传进去，方便将来使用
var f = new Fire({
x:x,
y:y
});
// 执行创建烟花的方法
f.create();
}
move移动函数：
function move(ele,obj,cb){
clearInterval(ele.t);
ele.t = setInterval(() => {
var i = true;
for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
if(i){
clearInterval(ele.t);
if(cb){
cb();
}
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
由于烟花颜色是随机的，所以需要构造一个随机颜色的函数
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColr(){
return `reg(${random(0,255)},${random(0,255)},${random(0,255)})`
}
以上为圆形炸裂，也可让其随机炸裂，在随机炸裂里，不需要move函数，而是使用步长，并对其添加一个自由落体的运动，其代码如下：
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.background = randomColor();
this.cont.appendChild(this.f);
this.f.style.left = this.x + "px";
this.fireMove();
}
fireMove(){
move(this.f,{
top:this.y
},()=>{
this.f.remove();
// 准备创建小烟花：
// 准备总个数
var randomNum = random(10,20);
// 根据个数，重复创建小烟花实例
for(var i=0;i {
// 因为是自由落体，判断元素是否超过了大框
if(this.f.offsetTop > this.cont.offsetHeight){
// 超出了，清除计时器，删除对应小烟花
clearInterval(this.f.t);
this.f.remove();
}else{
// 没有超出，正常根据步长移动
this.f.style.left = this.f.offsetLeft + speedX + "px";
// 过程中，将Y的步长，不断的增大，造成重力加速效果
this.f.style.top = this.f.offsetTop + speedY++ + "px";
}
}, 30);
}
}
var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
// 获取坐标，准备给将来的烟花元素使用
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 创建烟花元素，时，将坐标传进去，方便将来使用
var f = new Fire({
x:x,
y:y
});
// 执行创建烟花的方法
f.create();
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
}
作者：mikkfe
