烟花 下落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#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%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../move.2.0.js"></script>
<script>
// 烟花就是一个实例
// 主体烟花实例
// 创建元素,设置默认位置,颜色
// 运动到点击的位置
// 删除主体烟花
// 创建小烟花↓
// 炸开的小烟花实例
// 创建,设置位置,颜色
// 计算应该运动到哪,目标
// 运动
// 删除
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<randomNum;i++){
// 创建实例时,需要将:以下信息都传到小烟花的实例中
// 大框,坐标
var sf = new SmallFire({
cont:this.cont,
x:this.x,
y:this.y
});
// 执行创建方法
sf.create();
}
});
}
}
class SmallFire{
constructor(obj){
// 接收并解析:大框,坐标
this.cont = obj.cont;
this.x = obj.x;
this.y = obj.y;
}
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(){
var speedX = random(-10,10);
var speedY = random(-20,0);
// 开启计时器
this.f.t = setInterval(() => {
if(this.f.offsetTop > this.cont.offsetHeight){
clearInterval(this.f.t);
this.f.remove();
}else{
this.f.style.left = this.f.offsetLeft + speedX + "px";
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)})`;
}
</script>
</html>
```javascript
在这里插入代码片