用代码写个烟花之下落版

最新推荐文章于 2024-02-02 10:00:00 发布

星野丶Z

最新推荐文章于 2024-02-02 10:00:00 发布

阅读量398

点赞数 2

分类专栏：放烟花面向对象 js烟花文章标签： js css javascript html html5

本文链接：https://blog.csdn.net/weixin_49256908/article/details/107895479

版权

面向对象同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

js烟花

4 篇文章 2 订阅

订阅专栏

放烟花

2 篇文章 0 订阅

订阅专栏

前面写的烟花都是四散开消失，今天是最后一个版本，烟花炸开后掉落下来
下面上代码好吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

js代码，依然是在之前的基础上做修改，大家看有不懂的地方可以随时私信我

<script src="../move.js"></script>
<script>

    // 分析：
        // 创建主体元素
        // 设置样式，初始位置，拿到鼠标点击时传的坐标
        // 向上运动，目标:鼠标的坐标
        // 结束，删除主体元素
        // 创建一批小元素，设置初始位置为鼠标点击的坐标
        // 运动到随机目标，结束，删除所有


    // 设计：
        // class Fire{
        //     constructor(pos){
        //         // 接收参数，处理参数，定义属性
        //     }
        //     createFire(){
        //         // 创建主体元素
        //         // 设置位置
        //         // 设置样式
        //         // 开始运动
        //         this.fireMove();
        //     }
        //     fireMove(){
        //         // 开始运动
        //         move(主体烟花,属性和目标,()=>{
        //             // 删除主体烟花
        //             // 创建小烟花
        //             this.createSmall()
        //         })
        //     }
        //     createSmall(){
        //         // 创建小烟花
        //         // 设置初始位置
        //         // 设置样式
        //         // 开始运动
        //         this.smallMove();
        //     }
        //     smallMove(){
        //         move(小烟花,属性和目标,()=>{
        //             // 删除小烟花
        //         })
        //     }
        // }
        // var ocont = document.getElementById("container");
        // ocont.onclick = function(){
        //     new Fire(坐标);
        // }
    // 编程
        class Fire{
            constructor(ops){
                // 接收参数，处理参数，定义属性
                this.cont = ops.cont;
                this.x = ops.x;
                this.y = ops.y;

                this.createFire();
            }
            createFire(){
                // 创建主体元素
                this.ele = document.createElement("div");
                // 设置样式
                this.ele.className = "fire";
                this.ele.style.background = randomColor();
                // 设置位置
                this.ele.style.left = this.x + "px";
                this.cont.appendChild(this.ele);
                // 开始运动
                this.fireMove();
            }
            fireMove(){
                // 开始运动
                move(this.ele,{top:this.y},()=>{
                    // 删除主体烟花
                    this.ele.remove();
                    // 创建小烟花
                    this.createSmall()
                })
            }
            createSmall(){
                this.num = random(10,20);
                this.r = random(100,200);
                // 创建小烟花
                for(var i=0;i<this.num;i++){
                    var small = document.createElement("div");
                    // 设置样式
                    small.className = "small-fire";
                    small.style.background = randomColor();
                    small.setAttribute("index",i);
                    // 设置初始位置
                    small.style.left = this.x + "px";
                    small.style.top = this.y + "px";
                    this.cont.appendChild(small);
                    // console.log(small);
                    // 开始运动
                    this.smallMove(small);
                }
            }
            smallMove(ele){
                // 随机步长
                var speedX = random(-10,10);
                var speedY = random(-20,10);

                // 开始运动
                ele.t = setInterval(() => {
                    // 当烟花运动出容器
                    if(ele.offsetTop > this.cont.offsetHeight){
                        // 清除计时器
                        clearInterval(ele.t);
                        // 删除当前烟花
                        ele.remove();
                    }else{
                        // 根据随机步长,设置小烟花的运动
                        ele.style.left = ele.offsetLeft + speedX + "px";
                        ele.style.top = ele.offsetTop + speedY + "px";
                        // 每次运动后，给下次的步长增加(垂直步长)
                        speedY++;
                    }
                }, 30);
            }
        }

        var ocont = document.getElementById("container");
        ocont.onclick = function(eve){
            var e = eve || window.event;
            // 每次点击时，创建烟花对象，并传入当前点击的坐标和容器标签
            new Fire({
                cont:ocont,
                y:e.clientY-ocont.offsetTop,
                x:e.clientX-ocont.offsetLeft
            });
        }


    

    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>
</body>
</html>