用代码写个烟花之圆周版

最新推荐文章于 2023-02-13 14:10:27 发布

星野丶Z

最新推荐文章于 2023-02-13 14:10:27 发布

阅读量432

点赞数 2

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

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

版权

面向对象同时被 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代码：move.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){
                // 随机目标
                
                // 计算每个元素的角度
                    // 个数：10
                    // 圆：360
                    // 每两个元素之间间隔：360/10
                    // 第一个元素0：0度
                    // 第二个元素1：36度
                    // 第三个元素2：72度
                    // 。。。
                var deg = 360/this.num * ele.getAttribute("index");
                // console.log(deg);
                // 根据每个元素的角度，计算在圆的某一点的坐标
                var x = parseInt(Math.cos( Math.PI/180*deg ) * this.r + this.x);
                var y = parseInt(Math.sin( Math.PI/180*deg ) * this.r + this.y);

                // 开始运动
                move(ele,{
                    left:x,
                    top:y
                },()=>{
                    // 删除小烟花
                    ele.remove();
                })
            }
        }

        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>

下面来展示效果：
在这里插入图片描述
还有个最终版，明天更新，觉得好看的点个赞吧

星野丶Z

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
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> <sty
复制链接

扫一扫