烟花----事件对象event

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量132 收藏
点赞数
分类专栏： JavaScript学习 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43677817/article/details/115256867
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./utils.js"></script>
</head>

<body>
    <div id="tips"><a id="auto" href="javascript:;" class="">自动放烟花</a></div>

    <script>
        /*
            （1）对象：烟花 Fire
                【1】创建对象
                【2】描述对象
                    属性：位置（水平和垂直位置），目标值,烟火的数量,爆炸半径
                    方法：
                        初始化：创建节点，添加样式，添加在页面中
                        移动：从底部往光标的位置 动画
                        爆炸：随机生成很多的烟火
                【3】操作对象

            （2）对象：烟火 Spark
                【1】创建对象
                【2】描述对象
                    属性：随机半径，烟火角度，当前的烟火对象，随机背景颜色,位置（left 和top）
                    方法：
                        初始化：创建对象，添加样式，添加在烟花中
                        移动：指定到相应的位置
                        移出：移出整个烟花（让爷爷移出我爸爸）
                【3】操作对象
        */
        window.onload = function () {
            let auto = document.querySelector('#auto');
            let flag = true;
            let timer;

            document.onclick = function (e) {
                if (flag) {
                    new Fire(e.clientX, e.clientY);
                }
            }

            // 自动放烟花
            auto.onclick = function (e) {
                if (flag) {
                    timer = setInterval(() => {
                        new Fire();
                        flag = false;
                    }, 1500)
                } else {
                    flag = true;
                    clearInterval(timer);
                }
                e.stopPropagation()
            }

            // 创建烟花
            function Fire(x, y) {
                this.left = x || getRandomNum(5, window.innerWidth - 5);
                this.top = y || getRandomNum(20, window.innerHeight - 100);
                this.qty = getRandomNum(15, 30);
                this.r = getRandomNum(100, 200);

                // 执行初始化
                this.init()
                this.move();
            }
            Fire.prototype = {
                constructor: Fire,
                init: function () {
                    this.dv = document.createElement('div');
                    this.dv.classList.add('fire');
                    this.dv.style.left = this.left + 'px';
                    document.body.appendChild(this.dv);
                    return this;
                },
                move: function () {
                    move(this.dv, { top: this.top, height: 3 }, () => {
                        this.boom();
                    })
                },
                // 根据烟火个数创建烟火对象那个
                boom: function () {
                    let deg = 360 / this.qty;
                    for (let i = 0; i < this.qty; i++) {
                        this.dv.style.background = 'rgba(0,0,0,0)'
                        // 把角度和半径传到烟火对象中
                        new Spark(deg * i, this.r, this.dv)
                    }
                }
            }
            Object.defineProperty(Fire.prototype, "constructor", { enumerable: false, writable: false });

            function Spark(deg, r, parent) {
                this.deg = deg;
                this.r = r;
                this.bgColor = getRandomColor();
                this.rad = Math.PI * this.deg / 180;
                this.left = this.r * Math.cos(this.rad);
                this.top = this.r * Math.sin(this.rad);
                this.parent = parent;
                this.init().move();
            }
            Spark.prototype = {
                constructor: Spark,
                init: function () {
                    this.span = document.createElement('span');
                    this.span.classList.add('spark');
                    this.span.style.background = this.bgColor;
                    this.parent.appendChild(this.span);
                    return this;
                },
                move: function () {
                    move(this.span, { left: parseInt(this.left), top: parseInt(this.top), opacity: 30 }, () => {
                        this.remove();
                    })
                },
                remove: function () {
                    // 把整个烟花从body的中移除
                    this.parent.remove()
                }
            }
            Object.defineProperty(Spark.prototype, "constructor", { enumerable: false, writable: false });
        }
    </script>
</body>

</html>

        html,
        body {
            overflow: hidden;
            height: 100%;
        }

        body,
        div,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
            font: 12px/1.5 arial;
            color: #7A7A7A;
        }

        a {
            text-decoration: none;
            outline: none;
        }

        #tips,
        #copyright {
            position: absolute;
            width: 100%;
            height: 50px;
            text-align: center;
            background: #171717;
            border: 2px solid #484848;
        }

        #tips {
            top: 0;
            border-width: 0 0 2px;
        }

        #tips a {
            font: 14px/30px arial;
            color: #FFF;
            background: #F06;
            display: inline-block;
            margin: 10px 5px 0;
            padding: 0 15px;
            border-radius: 15px;
        }

        #tips a.active {
            background: #FE0000;
        }

        .fire {
            width: 3px;
            height: 30px;
            background: white;
            position: absolute;
            top: 100%;
        }

        .spark {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 0;
            top: 0;
        }

// 生成一个任意范围内的随机整数
function getRandomNum(a, b) {
    if (a > b) {
        return parseInt(Math.random() * (a - b + 1)) + b
    }
    return parseInt(Math.random() * (b - a + 1)) + a
}

// 封装一个随机颜色（不依赖 getRandomNum(a, b))
function getRandomColor(a) {
    if (a === 16) {
        var str = '0123456789abcdef';
        var res = '';
        for (var i = 0; i < 6; i++) {
            var idx = parseInt(Math.random() * 16);
            res += str[idx];
        }
        return '#' + res;
    }

    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

/* 
    封装获取元素的函数：
    函数的实参形式：
    【1】#id名    表示通过id名获取元素
    【2】.class名 表示通过class名获取元素
    【3】标签名    表示同给标签名获取元素
*/
function getEle(ele) {
    // substr(参数1，参数2)
    // 参数1表示开始的索引位置
    // 参数2表示截取个数，如果没有参数2表示从开始位置截取到最后
    var str1 = ele.substr(0, 1); //拿到前面的字符
    var str2 = ele.substr(1);

    if (str1 === '#') {
        return document.getElementById(str2)
    } else if (str1 === '.') {
        return document.getElementsByClassName(str2);
    } else {
        return document.getElementsByTagName(ele);
    }
}

// 获取非行内样式的
function getStyle(ele, attr) {
    var style;
    if (window.getComputedStyle) {
        style = window.getComputedStyle(ele)[attr];
    } else {
        style = ele.currentStyle[attr];
    }
    return style;
}

// 动画函数
/*
    【1】dom节点
    【2】对象，要改变属性和属性值
    【3】回调函数（动画结束之后要执行的操作）
*/
function move(ele, obj, callback) {

    let timerLen = 0;
    for (const attr in obj) {

        // 防止抖动
        clearInterval(ele[attr]);

        timerLen++;
        ele[attr] = setInterval(() => {
            let curStyle;
            if (attr === 'opacity') {
                curStyle = getStyle(ele, attr) * 100;
            } else {
                curStyle = parseInt(getStyle(ele, attr));
            }
            let speed = (obj[attr] - curStyle) / 5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //取整
            if (curStyle === obj[attr]) {
                clearInterval(ele[attr]);
                timerLen--
                if (timerLen === 0) {
                    callback && callback();
                }
            } else {
                if (attr === 'opacity') {
                    ele.style[attr] = (speed + curStyle) / 100;
                } else {
                    ele.style[attr] = speed + curStyle + 'px';
                }
            }
        }, 30)
    }
}
鱼儿在游哦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 文字转换烟花,用HTML5制作烟火效果的教程
weixin_42515380的博客
05-31 623
要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。直接上DEMO吧：放烟火原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true...
面向对象-烟花
Black_Straight的博客
06-05 73
面向对象-烟花
直播--FFPLAY 的原理
wolaikanyanhau的博客
06-12 1168
电影文件有很多基本的组成部分。首先,文件本身被称为容器 Container,容器的类型决定了信息被存放在文件中的位置。AVI 和 Quicktime 就是容器的例子。接着,你有一组流,例如,你经常有的是一个音频流和一个视频流。(一个流只是一种想像出来的词语,用来表示一连串的通过时间来串连的数据元素)。在流中的数据元素被称为帧 Frame。每个流是由不同的编码 器来编码生成的。编解码器描述了
cocos2d-js项目全过程
qq_37849776的博客
03-12 3206
命令新建项目： cocos new -l js projectname运行项目：cocos run -p web项目打包：cocos compile -p web -m release字典Scene:场景，pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景，回到上一个场景。Director:导演，cc.director.runScene,这个函数用来加载或切换场景...
有趣之matlab-烟花
try_trying_try的博客
03-14 665
3 .m文件路径下放back1.jpg back4.jpg…点击screen 就会有小白点升起，爆炸。
自动放烟花 （对象+原型+构造函数）
08-10 902
自动放烟花 （对象+原型+构造函数）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>烟花+原型+构造函数</title> </head> <style> *{ margin: 0; padding: 0;
pygame-简单烟花发射
yu126long的博客
10-04 308
python游戏开发，pygame游戏开发，烟花小游戏，python GUI编程
Cocos2d-x2.0 各种粒子效果详解
u010912122的专栏
12-16 1427
Cocos2d-x 2.0 粒子系统深入分析三部曲（三） 长平狐 发表于 2013-3-19 18:39 9个月前, 0回/1184阅 开源中国诚邀您参加 Cloud Foundry 中国群英会！（北京、上海、杭州、成都、深圳） [Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址：http://blog.csdn.net/honghai
原生js--烟花效果
TiAmo_907的博客
10-22 608
文章目录效果实例引入封装好的common.js、animate.js结构及样式原生js 效果实例 原生js---烟花效果 引入封装好的common.js、animate.js common.js /** * Created by jameswatt2008 on 20...
swift-Fireworks-为UIView添加烟花动画效果
08-15
6. **事件触发（Event Triggers）**：为了在特定时刻启动烟花动画，可以监听用户的触摸事件或程序中的特定事件。例如，当用户点击屏幕时，启动烟花动画。 7. **性能优化（Performance Optimization）**：由于粒子...
跨年烟花代码-python3
12-08
总之，跨年烟花代码利用Python3的pygame库展示了编程艺术的一面，通过学习和实践这样的项目，你可以提升对图形编程、对象导向编程以及随机数和动画原理的理解。同时，这也是一个很好的机会去探索和创新，尝试添加更...
python（pygame）新年快乐-烟花
01-25
同时，它也是实践面向对象编程的一个好例子，因为烟花可能被设计成独立的对象，拥有自己的属性（如位置、速度）和方法（如发射、上升、爆炸）。 总的来说，"Python Pygame新年快乐-烟花"项目是一个结合了编程、图形...
JS基于面向对象实现的放烟花效果
01-19
本文实例讲述了JS基于面向对象实现的放烟花效果。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...<...js放烟
用Python写几种不同的烟花效果-烟花代码.rar
05-14
6. **事件处理**：在`pygame.event`模块中，我们可以监听用户的键盘输入和鼠标点击，这在交互式烟花模拟中可能很有用，例如允许用户控制烟花的发射。 7. **循环与迭代**：烟花动画通常是循环的，需要不断更新和绘制...
vue ref和reactive区别
最新发布
灰海
08-25 244
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
2024前端面试题-js篇
FormAda的博客
08-22 856
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 371
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 363
【代码】【js】各类前端输入校验方法。
新年快乐烟花python
12-28
很高兴为您介绍一下新年快乐烟花的Python实现方法。根据您提供的引用内容，这个项目使用了Python的图形模块tkinter来实现烟花的效果。在代码中，通过设置烟花的重力向量和生命周期来模拟烟花在不同时期的展现效果。 由于您没有提供具体的代码示例，我无法给出详细的演示。但是，我可以为您提供一个基本的烟花效果的Python代码示例，供您参考： ```python import tkinter as tk import random # 创建画布 canvas_width = 800 canvas_height = 600 canvas = tk.Canvas(width=canvas_width, height=canvas_height) canvas.pack() # 定义烟花类 class Firework: def __init__(self, x, y): self.x = x self.y = y self.gravity = 0.1 self.lifespan = 100 self.vx = random.uniform(-1, 1) self.vy = random.uniform(-5, -1) self.color = random.choice(['red', 'green', 'blue', 'yellow', 'purple']) def update(self): self.x += self.vx self.y += self.vy self.vy += self.gravity self.lifespan -= 1 def draw(self): canvas.create_oval(self.x-2, self.y-2, self.x+2, self.y+2, fill=self.color) # 创建烟花列表 fireworks = [] # 创建烟花函数 def create_firework(event): x = event.x y = event.y fireworks.append(Firework(x, y)) # 更新烟花函数 def update_fireworks(): for firework in fireworks: firework.update() firework.draw() if firework.lifespan <= 0: fireworks.remove(firework) # 绑定鼠标点击事件 canvas.bind('<Button-1>', create_firework) # 主循环 def main_loop(): update_fireworks() canvas.after(10, main_loop) main_loop() canvas.mainloop() ``` 这段代码使用tkinter创建了一个画布，并定义了一个Firework类来表示烟花。通过鼠标点击事件，可以在画布上创建烟花对象，并在主循环中更新和绘制烟花。烟花的颜色、位置和运动轨迹都是随机生成的。 希望这个示例能够帮助您实现新年快乐烟花的效果。如果您有任何进一步的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值