用代码写个烟花之基础版

最新推荐文章于 2024-05-07 12:49:12 发布

星野丶Z

最新推荐文章于 2024-05-07 12:49:12 发布

阅读量1w

点赞数 2

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

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

版权

css样式同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

面向对象

5 篇文章 0 订阅

订阅专栏

js烟花

4 篇文章 2 订阅

订阅专栏

今天用代码来写个烟花吧，先写个基础版的，后面的版本后续继续更新
下面上代码：

1、这是html+css

<!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>

2、下面是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(){
                var num = random(10,20);
                // 创建小烟花
                for(var i=0;i<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 x = random(0,this.cont.offsetWidth-ele.offsetWidth);
                var y = random(0,this.cont.offsetHeight-ele.offsetHeight);
                // 开始运动
                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>

3、下面是封装的move函数，可直接引入调用

function move(ele, data, cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        var onoff = true;
        for(var attr in data){
            var iNow = attr === "opacity" ? getStyle(ele, attr) * 100 : parseInt(getStyle(ele, attr));

            var speed = (data[attr] - iNow)/10;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);

            if(data[attr] !== iNow) onoff = false;

            ele.style[attr] = attr === "opacity" ? (iNow + speed)/100 : iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            cb && cb();
        }
    }, 30);
}

这是效果
在这里插入图片描述

好了，大家把代码复制到自己的编辑器可以试试，终于可以自己放烟花了，记得调用move.js，不然可用不了在这里插入图片描述

星野丶Z

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
4
评论
用代码写个烟花之基础版

今天用代码来写个烟花吧，先写个基础版的，后面的版本后续继续更新下面上代码：1、这是html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
复制链接

扫一扫