纯js实现烟花效果

最新推荐文章于 2024-07-25 11:15:00 发布

super code

最新推荐文章于 2024-07-25 11:15:00 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 小案例文章标签： js css class 前端

本文链接：https://blog.csdn.net/m0_52128556/article/details/118926411

版权

JavaScript 小案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述

在网页背景中实现鼠标点击出现模拟烟花爆炸的特效

思路

/*
    document - 点击事件 - 坐标值

    火花 - 接收坐标值
        创建火花
        设置样式
        定位 - left = x   top = document.documentElement.clientHeight - 50
        添加到页面 
        运动到点击的位置 - 到达位置 - 火花消失 - 产生爆炸 = 传递坐标值

    爆炸 
        数量 = 随机
        遍历数量 - 创建烟花 - 传递坐标值

    烟花类（坐标值）
        创建烟花
        大小-随机
        颜色-随机
        定位-单击的坐标值
        x-速度 - 随机（一定的概率 +  -）
        y-速度 - 随机（一定的概率 +  -）

        让碎片飞一会儿
            计时器
                碎片的left = 碎片的当前left + x-速度 + 'px'
                碎片的top = 碎片的当前top + y-速度 ++ + 'px';

                当碎片接触到地面时，碎片消失，计时器关闭
*/

html / css 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background: black;
        }
        .fire{
            width: 3px;
            height: 5px;
            position: absolute;
            background: white;
        }
    </style>
</head>
<body>
     //js准备代码
    <script src="js/sport.js"></script>
    //js主要实现功能部分
    <script src="js/spark.js"></script>
</body>
</html>

js 准备代码部分 sport.js

function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}

function sport(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        let flag = true;
        for(let attr in json){
            let cur = null;
            if(attr === 'opacity'){
                cur = Math.floor(parseFloat(getStyle(obj,attr)) * 100);
            }else{
                cur = parseInt(getStyle(obj,attr));
            }
            let speed = (json[attr] - cur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(cur !== json[attr]){
                flag = false;
            }
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn instanceof Function){
                fn();
            }
        }
    }, 30);
}

js 实现功能代码 spark.js

document.onclick = function(evt){
    let e = evt || window.event;
    //设置火花
    fnFire({x : e.pageX,y : e.pageY});
}
//火花
function fnFire(target){
    // 创建火花
    let div = document.createElement('div');
    // 设置样式
    div.className = 'fire';
    // 定位 - left = x   top = document.documentElement.clientHeight - 50
    div.style.left = target.x + 'px';
    div.style.top = document.documentElement.clientHeight - 50 + 'px';
    // 添加到页面 
    document.body.appendChild(div);
    // 运动到点击的位置 - 到达位置 - 火花消失 - 产生爆炸 = 传递坐标值
    sport(div,{left : target.x,top : target.y},() => {
        div.remove();
        boom(target);
    })
}
//爆炸
function boom(target){
    //数量
    let num = randInt(50,80);
    for(let i = 0;i < num;i ++){
        new Spark(target); //创建烟花
    }
}

//烟花类
class Spark{
    constructor(target){
        //属性
        this.target = target;
        //创建
        this.ele = document.createElement('div');
        //初始化烟花
        this.init();
    }
    init(){
        document.body.appendChild(this.ele);
        
        // 大小-随机
        this.ele.style.width = randInt(3,8) + 'px';
        this.ele.style.height = randInt(3,8) + 'px';
        // 颜色-随机
        this.ele.style.backgroundColor = '#' + randInt(0,0xffffff).toString(16);
        // 定位-单击的坐标值
        this.ele.style.position = 'absolute';
        this.ele.style.left = this.target.x + 'px';
        this.ele.style.top = this.target.y + 'px';
        // x-速度 - 随机（一定的概率 +  -）
        this.speed_x = randInt(3,17) * (Math.random() > 0.5 ? 1 : -1);
        // y-速度 - 随机（一定的概率 +  -）
        this.speed_y = randInt(3,17) * (Math.random() > 0.5 ? 1 : -1);
        //飞
        this.fly();
    }
    fly(){
        this.timer = setInterval(() => {
            this.ele.style.left = this.ele.offsetLeft + this.speed_x + 'px';
            this.ele.style.top = this.ele.offsetTop + this.speed_y ++ + 'px';
            if(this.ele.offsetTop >= document.documentElement.clientHeight){
                this.ele.remove();
                clearInterval(this.timer);
            }
        }, 30);
    }
}

//工具
function randInt(min,max){
    if(min > max){
        [min,max] = [max,min];
    }
    return Math.floor(Math.random() * (max - min + 1) + min);
}