【编程游戏】贺岁放礼花。（点燃续帖1-77楼muxrwc的焰火）-优快云博客

本文介绍了一个使用JavaScript实现的烟花效果模拟程序。通过自定义类来创建烟花、烟花碎片等元素，并运用位移公式模拟烟花的飞行轨迹及爆炸效果。文章详细展示了如何通过定时器控制烟花的发射和爆炸过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=830" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>燃放烟花山寨版</title> <script type="text/javascript"> if ('undefined' != typeof HTMLElement && HTMLElement.prototype && !HTMLElement.prototype.insertAdjacentHTML) HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) { //BlueDestiny var df; var r = this.ownerDocument.createRange(); switch (String(sWhere).toLowerCase()) { case "beforebegin": r.setStartBefore(this); df = r.createContextualFragment(sHTML); this.parentNode.insertBefore(df, this); break; case "afterbegin": r.selectNodeContents(this); r.collapse(true); df = r.createContextualFragment(sHTML); this.insertBefore(df, this.firstChild); break; case "beforeend": r.selectNodeContents(this); r.collapse(false); df = r.createContextualFragment(sHTML); this.appendChild(df); break; case "afterend": r.setStartAfter(this); df = r.createContextualFragment(sHTML); this.parentNode.insertBefore(df, this.nextSibling); break; } }; var FireworksBase = function (member) { //烟花基类 if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; if (member.prototype) for (var i in member.prototype) this[i] = member.prototype[i]; with ({ domid : '', velocity : 0, angle : 0, side : 0, startX : 0, startY : 0, end : 0, t : 0 }) //初始值 with (member) { this.domid = domid; //DOM对象ID this.velocity = velocity; //初始速度 this.angle = angle; //角度 this.side = side; //边长 this.startX = startX; //初始x值 this.startY = startY; //初始y值 this.end = end; //最大y值 this.t = t; //当前时间 } }; var Fireworks = function (member) { //烟花类 if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; this.constructor.prototype.constructor.call(this, member); //call super with ({ length : 15, time : 0 }) with (member) { this.length = length //碎片个数 this.time = time; //最大时间 } this.x = this.y = 0; //当前位置 this.dom = null; }; var FireworksFragment = function (member) { //烟花碎片类 if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; this.constructor.prototype.constructor.call(this, member); //call super with ({ length : 5, interval : 4 }) with (member) { this.length = length; //碎片轨迹个数 this.interval = interval; //间隔 } this.path = [[this.startX, this.startY]]; //路径 this.doms = []; }; FireworksBase.prototype = { displacement : function (v, t) { //位移公式：vt - 0.5gt^2 = S return v * t - t * t * 98 * .5; //重力加速度98像素 } , v : function (velocity, angle) { //速度 var radian = Math.PI / 180 * angle; return { x : -Math.cos(radian) * velocity, y : -Math.sin(radian) * velocity }; } , set : function () {} //设置位置 , run : function () {} //执行流程 , initDOM : function () {} //初始化DOM , destruction : function () { //销毁对象 this.domid = ''; //DOM对象ID this.velocity = 0; //初始速度 this.angle = 0; //角度 this.side = 0; //边长 this.startX = 0; //初始x值 this.startY = 0; //初始y值 this.end = 0; //最大y值 this.t = 0; } }; Fireworks.prototype = new FireworksBase({ prototype : { initDOM : function () { if (!document.body) throw new Error('Body未初始化'); document.body.insertAdjacentHTML('beforeEnd', '<div id="' + this.domid + '" style="position:absolute;width:' + this.side + 'px;height:' + this.side + 'px;font-size:' + this.side + 'px;">●</div>'); this.dom = document.getElementById(this.domid); //DOM对象 this.set(this.startX, this.startY); //初始化位置 } , set : function (x, y) { //设置位置 this.dom.style.left = (this.x = x) + 'px'; this.dom.style.top = (this.y = y) + 'px'; } , run : function (time) { this.t += time; var v = this.v(this.velocity, this.angle); var x = this.startX + Math.ceil(v.x * this.t); var y = this.startY - Math.ceil(this.displacement(v.y, this.t)); if (this.time > this.t && y < this.end) { this.set(x, y); return true; } else { return false; } } , blast : function (list) { list = list || []; for (var i = 0 ; i < this.length ; i ++) { list[list.length] = new FireworksFragment({ domid : this.dom.id + '_' + i , side : 5 , velocity : 49 + Math.round(Math.random() * 49) , angle : Math.floor(Math.random() * 360) , startY : this.y + Math.floor(this.side / 2) - 2 , startX : this.x + Math.floor(this.side / 2) - 2 , end : this.end }); list[list.length - 1].initDOM(); } return list; } , destruction : function (list) { this.blast(list); this.constructor.prototype.constructor.prototype.destruction.call(this); //call super destruction this.dom.parentNode.removeChild(this.dom); this.dom = null; this.time = this.x = this.y = this.length = 0; } }}); FireworksFragment.prototype = new FireworksBase({ prototype : { initDOM : function () { if (!document.body) throw new Error('Body未初始化'); var s = this.side / this.length; for (var i = 0 ; i < this.length ; i ++) { var side = (i + 1) * s; document.body.insertAdjacentHTML('beforeEnd', '<div id="' + this.domid + '_' + i + '" style="position:absolute;width:' + side + 'px;height:' + side + 'px;font-size:' + side + 'px;">●</div>'); this.doms[i] = document.getElementById(this.domid + '_' + i); } this.set(); //初始化位置 } , set : function (x, y) { //设置位置 var n = this.path[this.path.length - 1]; for (var l = this.doms.length - 1, i = l ; i > -1 ; i --) { if (this.path[i * this.interval]) n = this.path[i * this.interval]; this.doms[i].style.left = n[0] + 'px'; this.doms[i].style.top = n[1] + 'px'; } } , run : function (time) { if (this.doms.length == this.length) { this.t += time; var v = this.v(this.velocity, this.angle); var x = this.startX + Math.ceil(v.x * this.t); var y = this.startY - Math.ceil(this.displacement(v.y, this.t)); this.path.push([x, y]); } this.cutPath(); if (y < this.end || this.remove()) { this.set(x, y); return true; } else return false; } , cutPath : function () { //剪切路径 this.path = this.path.slice(-(this.doms.length - 1) * this.interval); } , remove : function () { //去掉路径DOM对象 var dom = this.doms.pop(); dom && dom.parentNode.removeChild(dom); return !!this.doms.length; } , destruction : function () { this.constructor.prototype.constructor.prototype.destruction.call(this); //call super destruction this.length = this.interval = 0; this.path = this.doms = null; } }}); var Timer = function (member) { with ({ list : [] }) with (member) { this.list = list;this.time = time;this.step = step; } }; Timer.prototype.run = function (F, one) { var wc = this, next = false; with (this) { for (var i = 0 ; i < list.length ; i ++) { if (!list[i]) continue; if (list[i].run(step)) next = true; else { list[i].destruction(list); list[i] = null; } }clear(); !one && next && window.setTimeout(function () { wc.run(F) }, time) || F && F(); } }; Timer.prototype.clear = function () {for (var i = this.list.length - 1 ; i > -1 ; i --) (this.list[i] === null) && this.list.splice(i, 1);}; window.onload = function () { var N = 0; var C = function (id) { var t = new Fireworks({ domid : id + (++ N), velocity : 300 + Math.floor(Math.random() * 200) //每秒200到500像素的发射速度 , angle : 240 + Math.floor(Math.random() * 60) , side : 10, startY : 500, startX : 500, end : 500, time : 1, length : 20 }); t.initDOM(); return t; }; var t = new Timer({ list : [C('example')], time : 10, step : 10 / 1000 }); t.run(function () { t.list.push(C('example'));t.run(arguments.callee); }); }; </script> </head><body></body></html>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]