【编程游戏】贺岁放礼花。（第一名奖励10000可用分）（续1）
【编程游戏】贺岁放礼花。（第一名奖励10000可用分）（续2）
【编程游戏】贺岁放礼花。（第一名奖励10000可用分）（续1）
【编程游戏】贺岁放礼花。（第一名奖励10000可用分）
博客
说明：
2009年新年即将到来，让我们一起用代码点燃属于程序员的礼花！
这个活动是我个人发起的，简单的说：就是用程序模拟燃放礼花的过程，色彩、轨迹等自由发挥，娱乐为主。
要求：
单一的html文件，8000字内（能一次贴出来）；
尽量不含图片；
兼容IE6/7/8、FF2/3。
考评：
动画效果 50%
可读性/代码简洁 30%
运行效率 20%
奖项：
一等奖一名（100专家分、税前10000可用分）
二等奖一名（50专家分、税前2000可用分）
截止日期：
2009春节
祝福大家新年快乐
集中燃放点：（实时更新）
【编程游戏】贺岁放礼花。（点燃续帖2-142楼sharp_ice的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-141楼sharp_ice的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-133楼langtse的焰火）（修改自169楼Free_Wind22）
【编程游戏】贺岁放礼花。（点燃续帖2-132楼dh20156的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-123楼dh20156的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-8楼wcwtitxu的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-6楼lshdic的焰火）
【编程游戏】贺岁放礼花。（点燃续帖2-5楼zswang的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-194楼lshdic的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-188楼zswang的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-172楼yonghengdexingxing的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-164楼lshdic的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-145楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-143楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-142楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-141楼YH_Random的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-131楼lshdic的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-123楼cicadu的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-116楼cgisir的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-106楼cgisir的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-77楼muxrwc的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-58楼froole的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-56楼hongmaohouzi的焰火）（请在IE下运行）
【编程游戏】贺岁放礼花。（点燃续帖1-47楼0009的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-37楼muxrwc的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-36楼cgisir的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-24楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃续帖1-18楼Free_Wind22的焰火）
【编程游戏】贺岁放礼花。（点燃201楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃200楼KiteGirl的焰火）
【编程游戏】贺岁放礼花。（点燃190楼lshdic的焰火）（请在IE下运行）
【编程游戏】贺岁放礼花。（点燃175楼web_show的焰火）（修改自169楼Free_Wind22）
【编程游戏】贺岁放礼花。（点燃169楼Free_Wind22的焰火）
【编程游戏】贺岁放礼花。（点燃106楼zhanghezheng的焰火）（请在IE下运行）
【编程游戏】贺岁放礼花。（点燃78楼lsc1202001的焰火）
【编程游戏】贺岁放礼花。（点燃60楼Free_Wind22的焰火）
【编程游戏】贺岁放礼花。（点燃46楼dh20156的焰火）
【编程游戏】贺岁放礼花。（点燃34楼zjsfdxbao的焰火）
【编程游戏】贺岁放礼花。（点燃17楼dh20156的焰火）
已经加入投票，请大家参与评分。
[解决办法]
居然在没有任何说明情况下，能把我的vbs改编成JS，实在够强！
不过有个地方有点不对：R位平面和B位平面是反的，导致爆炸变成了蓝色。
CreateColors()里的RGB算法和VBS有点区别，应该是下面的效果。烟花爆炸的效果应该是橙红色而不是蓝色。
VBS里理应也是下面这样，但不清楚为什么按照R、G、B的顺序在VBS下就是不对。因此VBS下我是倒序的。
- Java code
function CreateColors() { var tColor = {}; for (var tColorIndex = 0; tColorIndex <= 255; tColorIndex++) { tColor[0] = Math.random(); tColor[1] = Math.random(); tColor[2] = Math.random(); tColor[Math.floor(Math.random() * 3)] = 1; tLightLen = Math.floor(Math.random() * 50) + 50; for (var tLightIndex = 0; tLightIndex <= 99; tLightIndex++) { pubColors[tColorIndex * 256 + tLightIndex] = rgb( (tLightIndex * 255) / 100, (tLightIndex * 128) / 100,0); } for (var tLightIndex = 100; tLightIndex <= 199; tLightIndex++) { pubColors[tColorIndex * 256 + tLightIndex] = 0; } for (var tLightIndex = 100; tLightIndex <= 100 + tLightLen; tLightIndex++) { pubColors[tColorIndex * 256 + tLightIndex] = rgb((tColor[0] * (tLightIndex - 100) * 255) / tLightLen, (tColor[1] * (tLightIndex - 100) * 255) / tLightLen, (tColor[2] * (tLightIndex - 100) * 255) / tLightLen); } for (var tLightIndex = 200; tLightIndex <= 224; tLightIndex++) { pubColors[tColorIndex * 256 + tLightIndex] = rgb((tLightIndex - 200) * 128 / 24, (tLightIndex - 200) * 64 / 24, 0); } for (var tLightIndex = 225; tLightIndex <= 255; tLightIndex++) { pubColors[tColorIndex * 256 + tLightIndex] = Math.floor(Math.random() * 3) == 0 ? rgb(255, 255, 255) : rgb(0, 0, 0); } } }
------解决方案--------------------
新添加了一种爆炸效果, 刚开始那下有点卡, 不知道是不是我电脑问题...
- HTML code
<!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=gb2312" /><title>【编程游戏】贺岁放礼花 -- freewind</title><style type="text/css"> html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;} .ball{color:#FF0000; position:absolute; font-size:16px;} .star{color:#FF0000; position:absolute; font-size:4px;}</style><script type="text/javascript">function Fireworks(sky, loop){ this.sky = sky; this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth; this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight; this.x = this.y = 0; this.step = 20; this.delay = 30; this.stars = []; this.r = 10; this.step2 = 7; this.radius = 90; this.angle = 45; this.num = 16; this.loop = loop; this.degree = 2; this.t = 0; this.delt = 0; this.max = 30; this.cur = 1; this.points = null;}Fireworks.prototype = { init : function(){ this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8; this.y = this.skyHeight; this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5; }, setOpacity : function(obj, p){ if(p > 85){ var opacity = 100 - (p - 85) * 4; if(document.all){ obj.style.filter = "alpha(opacity=" + opacity + ")"; }else{ obj.style.MozOpacity = opacity / 100; } } }, getNextPoint : function(degree, coeff, t){ var tt = 1.0 - t; for(var rr = 1; rr <= degree; rr++){ for(var i=0; i <= degree-rr; i++){ coeff[i] = tt * coeff[i] + t * coeff[i+1]; } } return coeff[0]; }, showBall : function(){ this.ball = document.createElement("div"); this.ball.innerHTML = "●"; this.ball.className = "ball"; this.ball.style.left = this.x + "px"; this.ball.style.top = this.y + "px"; this.sky.appendChild(this.ball); }, moveBall : function(){ var self = this; if(this.y > this._y){ var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10); this.y -= (this.step - p * 1.6); this.ball.style.fontSize = 16 - p + "px"; this.ball.style.top = this.y + "px"; setTimeout(function(){self.moveBall();}, this.delay); }else{ this.fire(); } }, hideBall : function(){ this.sky.removeChild(this.ball); this.ball = null; }, showStars : function(){ var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00']; var n = cs = parseInt(Math.random() * colors.length / 2); var cc = parseInt(Math.random() * colors.length / 2); var colorMode = parseInt(Math.random() * 2); var star = Math.round(Math.random()) == 1 ? "★" : "☆"; this.r = 10; this.radius = Math.round(Math.random() * 30) + 60; this.num = Math.round(Math.random() * 5 + 5) * 2; this.angle = 180 / this.num * 2; for(var i=1; i<=this.num; i++){ this.stars[i] = document.createElement("div"); this.stars[i].innerHTML = star; this.stars[i].className = "star"; if(colorMode == 1){ this.stars[i].style.color = colors[n]; if(++n > cs + cc) n = cs; }else{ this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)]; } this.sky.appendChild(this.stars[i]); } }, moveStars : function(){ var self = this; if(this.r < this.radius){ var p = this.step2 - parseInt(this.r / this.radius * 5); p = p < 1 ? 1 : p; this.r += p; p = parseInt(this.r / this.radius * 100); for(var i=1; i<=this.num; i++){ this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px"; this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px"; this.stars[i].style.fontSize = 4 + p/10 + "px"; this.setOpacity(this.stars[i], p); } setTimeout(function(){self.moveStars();}, this.delay); }else{ setTimeout(function(){self.hideStars();}, 200 * Math.random()); } }, initBezier : function(){ var coeff_x = []; var coeff_y = []; this.points = []; this.t = 0; this.delt = 1.0 / this.max; this.cur = 1; var a = parseInt(Math.random() * 5) * 90; coeff_x[0] = this.x; coeff_y[0] = this.y; for(var i=1; i<=this.num; i++){ coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2; coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2; coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; this.points[(i-1)*2] = coeff_x.slice(0); this.points[(i-1)*2+1] = coeff_y.slice(0); } }, moveStars2 : function(){ var self = this; if(this.cur < this.max){ this.t += this.delt; this.cur++; p = parseInt(this.cur / this.max * 100); for(var i=1; i<=this.num; i++){ this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px"; this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px"; this.stars[i].style.fontSize = 4 + p/10 + "px"; this.setOpacity(this.stars[i], p); } setTimeout(function(){self.moveStars2();}, this.delay); }else{ setTimeout(function(){self.hideStars();}, 200 * Math.random()); } }, hideStars : function(){ for(var i=1; i<=this.num; i++){ this.sky.removeChild(this.stars[i]); this.stars[i] = null; if(this.points != null){ delete this.points[(i-1)*2]; delete this.points[(i-1)*2+1]; } } if(this.points){ delete this.points; } this.points = null; if(this.loop){ this.play(); } }, fire : function(){ this.hideBall(); this.showStars(); var effect = parseInt(Math.random() * 2) + 1; switch(effect){ case 1: this.moveStars(); break; case 2: this.initBezier(); this.moveStars2(); break; } }, play : function(){ this.init(); this.showBall(); this.moveBall(); }};window.onload = function(){ for(var i=0; i<5; i++) new Fireworks(document.body, true).play();};</script></head><body></body></html>
[解决办法]
新效果来啦！比较恶搞的一个焰火（稍微离屏幕有点距离，仔细看喔）……
- HTML code
<html> <head> <title></title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p id="idInsertObject"></p> </body> <script languate="VBScript" type="text/VBScript"> Dim pubOrbits_X(15, 255) Dim pubOrbits_Y(15, 255) Dim pubSpanObjects(15, 15) Dim pubColors(15, 15) Dim pubStepOn Dim pubStepOnB Dim pubWorkOn Dim pubX Dim pubY Dim pubScale Dim pubTime Sub window_onload() CreateObjects CreateColors CreateOrbits pubOrbits_X, pubOrbits_Y NewSkyrocket ShowSkyrocket End Sub Sub NewSkyrocket() pubX=Int(Rnd * 640) pubY=Int(Rnd * 100)+480 pubScale = Rnd * 1 + 1 pubStepOn = 21 pubStepOnB = 21 pubTime = window.setTimeout("ShowSkyrocket", 1) End Sub Sub ShowSkyrocket() If pubStepOn > 1 Then pubStepOn = pubStepOn - 1 If pubStepOnB > 1 Then pubStepOnB = pubStepOnB - 1 Else pubStepOnB = pubStepOnB - 0.1 End If pubY=pubY - (pubStepOnB * pubScale) If pubWorkOn < 256 Then pubWorkOn = pubWorkOn + pubStepOn ViewObjects pubScale, pubWorkOn, pubX, pubY pubTime = window.setTimeout("ShowSkyrocket", 1) Else pubWorkOn = 0 ViewObjects pubScale, pubWorkOn, pubX, pubY NewSkyrocket End If End Sub Sub ViewObjects(pScale, pIndex, pX, pY) If pIndex < 256 And pIndex > 15 Then For tIndexA = 0 To 15 For tIndexB = 0 To 14 With pubSpanObjects(tIndexA,tIndexB).style .top = pubSpanObjects(tIndexA,tIndexB + 1).style.top .left = pubSpanObjects(tIndexA,tIndexB + 1).style.left End With Next With pubSpanObjects(tIndexA,15).style .top = pubOrbits_Y(tIndexA, pIndex) * pScale + pY .left = pubOrbits_X(tIndexA, pIndex) * pScale + pX End With For tIndexB = 0 To 15 With pubSpanObjects(tIndexA,tIndexB).style .color = pubColors(tIndexA, tIndexB) End With Next Next End If End Sub Sub CreateObjects() For tIndexA = 0 To 15 For tIndexB = 0 To 15 Set pubSpanObjects(tIndexA, tIndexB) = document.createElement("SPAN") With pubSpanObjects(tIndexA, tIndexB) .innerText = "." End With With pubSpanObjects(tIndexA, tIndexB).style .position = "absolute" .color = Rgb(0, 0, 0) End With idInsertObject.insertAdjacentElement "beForeEnd", pubSpanObjects(tIndexA, tIndexB) Next Next End Sub Sub CreateColors() Dim tColor(2) For tColorIndex = 0 To 15 tColor(0) = Rnd : tColor(1) = Rnd : tColor(2) = Rnd tColor(Int(Rnd*3)) = 1 tLightLen = Int(rnd * 50) + 50 For tLightIndex = 0 To 15 tLightValue = tLightIndex * 255 / 15 pubColors(tColorIndex, tLightIndex)=rgb(tColor(0)*tLightValue, tColor(1)*tLightValue, tColor(2)*tLightValue) Next Next End Sub Sub CreateOrbits(pOrbits_X(), pOrbits_Y()) For tOrbitsIndex = 0 To 15 tAxis_R = Int(Rnd * 50) + 50 tAxis_XY = Int(Rnd * 360) tAxis_YZ = Int(Rnd * 360) tAxis_ZX = Int(Rnd * 360) For tLightIndex = 0 To 255 tAxis_ZX = tAxis_ZX + 2 '(tAxis_ZX + 0.5) Mod 360 GetOrbits tAxis_XY, tAxis_YZ, tAxis_ZX, tAxis_R * tLightIndex / 255, tOrbits_X, tOrbits_Y pOrbits_X(tOrbitsIndex, tLightIndex) = tOrbits_X pOrbits_Y(tOrbitsIndex, tLightIndex) = tOrbits_Y Next Next End Sub Sub GetOrbits(pAxis_XY, pAxis_YZ, pAxis_ZX, pAxis_R, pOrbits_X, pOrbits_Y) tAxis_XY = RadianGetByAngle(pAxis_XY) tAxis_YZ = RadianGetByAngle(pAxis_YZ) tAxis_ZX = RadianGetByAngle(pAxis_ZX) pOrbits_X = pAxis_R * Cos(tAxis_XY) * Cos(tAxis_ZX) pOrbits_Y = pAxis_R * Sin(tAxis_XY) * Sin(tAxis_YZ) End Sub Function RadianGetByAngle(pAngle) RadianGetByAngle =pAngle * 3.1415926 / 180 End Function </script></html>
[解决办法]
先祝大家新年快乐!
以后有时间我在更新,先贴出来占个位子
- HTML code
<!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=gb2312" /><title>烟火</title><style> html{height:100%; overflow:hidden} body{background:black; height:100%} div{position:absolute; overflow:hidden; font-size:6px; Arial, Helvetica, sans-serif; color:yellow}</style><script> var Browser ={ IE: !!(window.attachEvent && !window.opera), Opera: !!window.opera, WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1, Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1, MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/) } Object.extend = function(destination, source) { for (var property in source) destination[property] = source[property]; return destination; } var Element = { setOpacity: function(val){ if(Browser.IE){ this.style.filter = 'alpha(opacity='+val+')'; }else{ this.style.opacity = parseFloat(val/100); } } } //var m=1, ms=12, r = 1; function start(pos){ var angel = pos.m&1 && 60 || 120; for(var i=0; i<3; i++){ angel += 120; createStart({x:pos.x, y:pos.y, r:pos.r, angel: angel, m:pos.m, c:pos.c}); } pos.m++ if(pos.m>pos.ms) return; var o = arguments.callee; setTimeout(function(){o(pos)},10); } function createStart(pos){ var d = document.createElement('div'); Object.extend(d, Element); //d.innerHTML = pos.m&1&&'1'||'0'; d.innerHTML = '●'; d.style.color = colors[Math.floor(Math.random()*7)]; //d.style.color = pos.c; d.style.left = pos.x - parseInt(pos.r*Math.sin(pos.angel*2*Math.PI/360)) + 'px'; d.style.top = pos.y - parseInt(pos.r*Math.cos(pos.angel*2*Math.PI/360)) + 'px'; document.body.appendChild(d); d.n = 1+pos.m*1.6; d.o = 150; d.op = d.o/d.n; d.play = function(pos){ this.n--; pos.r += this.n/0.5; pos.y -= this.n-12; d.style.left = pos.x - parseInt(pos.r*Math.sin(pos.angel*2*Math.PI/360)) + 'px'; d.style.top = pos.y - parseInt(pos.r*Math.cos(pos.angel*2*Math.PI/360)) + 'px'; this.o = this.o - this.op; this.setOpacity(this.o); if(this.n<=0){ clearInterval(this.t); document.body.removeChild(this); } } pos.m *= 5; d.t = setInterval(function(){d.play.call(d,pos)}, 5+pos.m); } function bp(){ var x = document.documentElement.scrollWidth, y = document.documentElement.scrollHeight; var d = document.createElement('div'); d.innerHTML = '↑'; d.style.fontSize=12; d.style.color = colors[Math.floor(Math.random()*6)]; d.h = y; d.e = Math.floor(Math.random()*300) d.s = 30; d.style.top = y + 'px'; d.style.left = Math.floor(Math.random()*x) + 'px'; document.body.appendChild(d); d.t = setInterval(function(){re(d)}, 25) } function re(o,par){ o.s<=10?o.s=10:o.s--; o.style.top = o.offsetTop - o.s*1.5 + 'px' if(o.offsetTop < o.h/2-o.e){ clearInterval(o.t); start({m:1, ms:8, r:1, x:o.offsetLeft, y:o.offsetTop, c:o.style.color}); document.body.removeChild(o); } } var colors = ['red','yellow','blue', 'white', '#f36','#0f9'];onload = function(){ setInterval(bp, 1500);}</script></head><body><div style="z-index:999; border:1px solid #666; height:118px; width:500px; left:50%; top:50%; margin-left:-250px; margin-top:-58px; text-align:center; font-size:35px; line-height:118px; font-weight:bold; color:red">新年快乐! 万事如意!</div></body></html>
[解决办法]
发个山寨的...潜...
- JScript code
<!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=gb2312" /><title>燃放烟花Bata版</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, x : 0, y : 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.x = x, this.y = y; //当前位置 this.t = t; //当前时间 } if (this.domid) { 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对象 if (!this.dom) throw new Error('烟—OM元素不存在'); }};var Fireworks = function (member) {//烟花类 if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; this.constructor.prototype.constructor.call(this, member); //call super this.time = member.time || 0; //最大时间};var FireworksFragment = function (member) {//烟花碎片类 if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee; this.constructor.prototype.constructor.call(this, member); //call super this.set(this.startX, this.startY);};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 (x, y) { //设置位置 if ('undefined' != typeof x) this.dom.style.left = (this.x = x) + 'px'; if ('undefined' != typeof y) this.dom.style.top = (this.y = y) + 'px'; } , run : function () {} , destruction : function () { //销毁对象 this.dom.parentNode.removeChild(this.dom); 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.x = 0; this.y = 0; this.t = 0; this.dom = null; }};Fireworks.prototype = new FireworksBase({ prototype : { run : function (time) { this.t += time; var v = this.v(this.velocity, this.angle); var x = Math.ceil(v.x * this.t); var y = Math.ceil(this.displacement(v.y, this.t)); if (this.time > this.t && this.startY - y < this.end) { this.set(this.startX + x, this.startY - y); return true; } else { return false; } } , blast : function (list) { list = list || []; for (i = 0 ; i < 15 ; 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 }); } return list; } , destruction : function (list) { this.blast(list); this.constructor.prototype.constructor.prototype.destruction.call(this); //call super destruction }}});FireworksFragment.prototype = new FireworksBase({ prototype : { run : function (time) { this.t += time; var v = this.v(this.velocity, this.angle); var x = Math.ceil(v.x * this.t); var y = Math.ceil(this.displacement(v.y, this.t)); if (this.startY - y < this.end) { this.set(this.startX + x, this.startY - y); return true; } else { return false; } }}});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) { return 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 }); }; var t = new Timer({ list : [C('example')], time : 10, step : 10 / 1000 }); window.setInterval(function () { t.run(null, true); }, t.time); window.setInterval(function () { t.list.push(C('example')); }, 2000);};</script></head><body></body></html>
[解决办法]
我也瞎写一个
- HTML code
<!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><title>Untitled Page</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body { background: #000; font-size: 4pt;}</style><script type="text/javascript">var Scene = function(){ this.Left = 200; this.Right = document.documentElement.clientWidth - 200; this.Width = document.documentElement.clientWidth - 400; this.Top = 200; this.Bottom = document.documentElement.clientHeight - 10; this.Height = document.documentElement.clientHeight - 210;}Scene.Cache = [];Scene.prototype.Play = function(){ if (document.body.childNodes.length - Scene.Cache.length > 60) return; var symbol = ["☆", "★", "○", "●", "◎", "◇", "◆", "□", "■", "※"]; var x = parseInt(Math.random() * this.Width) + this.Left; var y = this.Bottom; var n = parseInt(Math.random() * 30) + 50; // 散开数量 var top = this.Top + parseInt(Math.random() * 150); var s = Scene.Cache.shift(); if (!s) { s = document.createElement("span"); s.innerHTML = symbol[parseInt(Math.random() * symbol.length)]; s.style.position = "absolute"; document.body.appendChild(s); } s.style.color = "rgb(256,256,256)"; s.style.left = x + "px"; s.style.top = y + "px"; (function() { y -= 20; if (y > top) { s.style.top = y + "px"; setTimeout(arguments.callee, 1); } else { for (var i = 0; i < n; i++) { (function() { var x2 = x; var y2 = y - 20; var s2 = Scene.Cache.shift(); if (!s2) { s2 = document.createElement("span"); s2.innerHTML = symbol[parseInt(Math.random() * symbol.length)]; s2.style.position = "absolute"; document.body.appendChild(s2); } var r2 = 256; var g2 = 256; var b2 = 256; var top2 = y2 - parseInt(Math.random() * 100); var horizon2 = x2 + parseInt(Math.random() * 200) - 100; var count = parseInt(Math.random() * 30) + 20; var hStep = (horizon2 - x2) / count; var vStep = (top2 - y2) / count; var n = 0; setTimeout(function() { if (n < count) { x2 += hStep; y2 += vStep; r2 -= parseInt(Math.random() * 8); g2 -= parseInt(Math.random() * 8); b2 -= parseInt(Math.random() * 8); s2.style.color = "rgb(" + r2 + "," + g2 + "," + b2 + ")"; s2.style.left = x2 + "px"; s2.style.top = y2 + "px"; n++; setTimeout(arguments.callee, 1); } else { top2 = y2 + parseInt(Math.random() * 100) + 250; vStep = (top2 - y2) / count; n = 0; setTimeout(function() { if (n < count) { x2 += hStep; y2 += vStep; r2 -= parseInt(Math.random() * 4); g2 -= parseInt(Math.random() * 4); b2 -= parseInt(Math.random() * 4); s2.style.color = "rgb(" + r2 + "," + g2 + "," + b2 + ")"; s2.style.left = x2 + "px"; s2.style.top = y2 + "px"; n++; setTimeout(arguments.callee, 1); } else { s2.style.color = "rgb(0,0,0)"; Scene.Cache.push(s2); } }, 0); } }, 0); })(); } s.style.color = "rgb(0,0,0)"; Scene.Cache.push(s); } })();}window.onload = function(){ var scene = new Scene(); (function() { scene.Play(); setTimeout(arguments.callee, Math.random() * 1000 + 500); })();}</script></head><body style=""></body></html>
[解决办法]
<html>
<head>
<title>释放烟花</title>
</head>
<body bgcolor=#000000 >
<layer name="a0" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,1,1"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></layer>
<layer name="a7" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a8" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a9" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a10" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a11" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a12" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer>
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div>
<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">
var Clrs = new Array(9);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
Clrs[5] = 'ffff00';
Clrs[6] = '00ff00';
Clrs[7] = 'ffffff';
Clrs[8] = 'fffff0';
var sClrs = new Array(5);
sClrs[0] = 'ffa500';
sClrs[1] = '55ff66';
sClrs[2] = 'AC9DFC';
sClrs[3] = 'fff000';
sClrs[4] = 'fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function Fireworks() {
if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else if (document.layers) {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}
if (document.all) {
step = 5;
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
}
}
else if (document.layers) {
step = 5;
for ( j = 0 ; j < 24 ; j++ ) {
var templayer = "a"+j;
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.layers[templayer].bgColor=initialStarColor;
if (currStep > 90)
document.layers[templayer].bgColor=Clrs[c];
document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
}
}
currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];
if (document.all) {
Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
}
else if (document.layers) {
Dleft = window.innerWidth - 100;
Dtop = window.innerHeight - 100;
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
document.layers[templayer].top = Mtop;
document.layers[templayer].left = Mleft;
}
if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
}
}
}
Fireworks();
</script>
</body>
</html>
[解决办法]
- JScript code
<!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=gb2312" /><title>燃放烟花山寨版</title><script type="text/javascript">if ('undefined' != typeof HTMLElement && HTMLElement.prototype && !HTMLElement.prototype.insertAdjacentHTML)HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {//BlueDestinyvar 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>