火花的写法
//有一个大盒子的背景,在用鼠标随机点击大盒子的任意位置,都能生成一个小盒子,在底部的任何位置
//所以生成小盒子的时候是小盒子的底部为零,X轴的位置是任意的就要获取光标点击的X轴的位置了
//然后在往上运动,用move运动函数来实现,这时改变的是y轴的位置,到达指定位置之后再那会生产很多的小圆点(小盒子)
//生成的许多小盒子都在同一位置上,此时的原来小盒子就要消失了,然后哪一些小圆点开始往不同的方向运动(用move函数来运动)
function Fire(classname) {
this.box = document.querySelector('.' + classname);
setstyle(this.box, {
width: '1000px',
height: '600px',
border: '10px solid skyblue',
background: '#000',
position: 'relative'
});
//点击生成一个小方块,把他交给一个方法去做但是这里的this不是那个盒子了,所以用箭头函数来写
this.box.addEventListener('click', (e) => {//这里是为了得到事件源,以便获取鼠标光标的位置
//根据鼠标点击盒子的位置来设置生成小盒子的位置
var x = e.offsetX;
var y = e.offsetY;
this.createFire(x, y);
});//flase/ture是事件监听的阶段不一样这是在,false在冒泡阶段执行,加不加都也可以,false是默认值
}
Fire.prototype.createFire = function (x, y) {
var div = document.createElement('div');
setstyle(div, {
width: '10px',
height: '10px',
background: getcolor(),//这里小盒子的背景颜色我们给一个随机的函数来取值
position: 'absolute',
left: x + 'px',//这是在底部随机生成小盒子
bottom: 0
})
// 将div放到box中
this.box.appendChild(div);
//让生成的小盒子运动起来,交给一个方法来做
this.toUP(div, x, y);
}
Fire.prototype.toUP = function (div, x, y) {
var _this = this;
move(div, {
top: y
}, function () {//运动结束的时候做的事情,有许多小圆点生成
//在这个对象中写方法
_this.createManyFire(div, x, y);//move实在定时器里写的所以这里的this不是那个对象要在定义一下
})
}
Fire.prototype.createManyFire = function (ele, x, y) {
//生产很多小盒子的时候原先的那个盒子应该消失
this.box.removeChild(ele);
var num = getRandom(25, 30);//生成一到三十个之间
var attr = [];//定义一个空的数组,生成的每一个都放入里面
for (var i = 0; i <= num; i++) {
var div = document.createElement('div');
setstyle(div, {
width: '10px',
height: '10px',
background: getcolor(),
position: 'absolute',
left: x + 'px',
top: y + 'px',
borderRadius:'50%'
})
attr.push(div);
this.box.appendChild(div);
}
//炸开原来的盒子让生成的许多小盒子都移动到随机的位置上
this.boom(attr);
}
Fire.prototype.boom = function(attr){
var _this = this;
for(let i=0;i move(attr[i],{ left:getRandom(0,this.box.clientWidth-10), top:getRandom(0,this.box.clientHeight-10) },function(){ _this.box.removeChild(attr[i]); }) } } var fire = new Fire('box') function setstyle(ele, styleObj) { for (var attr in styleObj) { ele.style[attr] = styleObj[attr]; } } function getRandom(a, b) { var diff = Math.abs(a - b); var min = a > b ? b : a;//这是用三元运算法算出最小值的方法 return parseInt(Math.random() * diff) + min; } function getcolor() { return `rgb(${getRandom(0, 256)},${getRandom(0, 256)},${getRandom(0, 256)})`//这是模板字符串的写法 }