Fireworks counterattack classes to learn the whereabouts

Fireworks whereabouts
<!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
在这里插入代码片
Here Insert Picture Description
Code of white farmers in
Released nine original articles · won praise 4 · views 91
Private letter concerns
Fireworks counterattack classes to learn the whereabouts

Guess you like
