【编程游戏】贺岁放礼花。（点燃续帖1-194楼lshdic的焰火）

最新推荐文章于 2025-12-03 13:04:04 发布

最新推荐文章于 2025-12-03 13:04:04 发布 · 94 阅读

文章标签：

本文介绍了一个使用纯JavaScript实现的烟花动画效果，包括多种烟花绽放样式，如星星、五角星等，并通过随机颜色和大小增强视觉效果。代码展示了如何创建字体元素来模拟烟花上升和爆炸的过程。

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=872" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <HTML><HEAD><META http-equiv='Content-Type' content='text/html;charset=utf8'> <TITLE>最牛Js烟花之一,无名氏,5效果,非滤镜.</TITLE> <STYLE>font{position:absolute;z-index:10}</STYLE> </HEAD><BODY bgcolor="black" text="white" style="overflow:hidden;"> <div id="a" style="width:100%;height:100%;background-color:black";></div> <script> /* 呵呵,先前以为我骄傲?委屈,别这样说俺,这不?当真引来大牛们更加优质的作品了,必不食言加上[之一]^-^! 而且,大家更能真真正正一饱眼福,这才是本人真正目的:) 比赛实际是第2,而同仁,更注重欣赏各自不同的编码习惯,作品风采,找乐子的同时,也互相更优质写法. 更想各自试试到底能在8000字js程序内玩到什么程度而已. 另本人下次还会升级本作品 - 并将没有[最牛Js烟花]标题,这次,还是想激起更多大牛/更多烟花闪亮登场,准备珍藏!^-^/ 原作:风云舞博客:http://blog.sina.com.cn/shenmoduijue */ var xall=screen.availWidth,yall=screen.availHeight-180,$=Math.random function gcor(){return ($()*4096).toString(16)} onload=function(){var i=0;while(i++<8)p.add();} var p={ add:function(){ var size1=6+Math.floor($()*25),x=Math.floor($()*xall) var d=document.createElement("font"),ad=Math.ceil($()*4),t="●" d.color=gcor();d.dx=size1;with(d.style){fontSize=size1;left=x;top=yall;} if(ad==2){t="★"}else if(ad==3){t="*"}else if(ad==4){t="·"}; d.innerText=t;d.ad=ad;d.go=setInterval(function(){p.go(d)},30);a.appendChild(d) }, go:function(obj){ var y=obj.offsetTop,dx=obj.dx;obj.style.top=y-(dx/5) if(y<yall-(dx*15))return p.bao(obj) }, bao:function(obj){ var x=obj.offsetLeft,y=obj.offsetTop,ad=obj.ad clearInterval(obj.go); if(ad!=3){a.removeChild(obj);p.add()} if(ad==1){for(var i=0;i<($()*12)+6;i++){flash1.add(x,y,obj.style.fontSize,obj.color)}} else if(ad==2){for(var i=0;i<($()*10)+15;i++){flash2.add(x,y,i+6,obj.style.fontSize)}} else if(ad==3){ var sz=parseInt(obj.style.fontSize) obj.face="楷体_GB2312";obj.jia=0;obj.innerText="恭/n喜" obj.style.fontSize=sz*3;obj.style.left=obj.offsetLeft-(sz*2);obj.style.top=obj.offsetTop-(sz*2); clearInterval(obj.go);obj.go=setInterval(function(){p.flash3_go2(obj)},30); var i=0;while(i++<5){setTimeout(function(){flash3.add(x,parseInt(obj.style.fontSize)/3)},i*350)} }else if(ad==4){flash4.add(x,y,obj.style.fontSize,obj.color)} }, flash3_go2:function(obj){ //颜色计算/模拟alpha思路共享. var c=obj.color.substr(1),r=c.substr(0,2),g=c.substr(2,2),b=c.substr(4,2),dx=3,jia=obj.jia r=Math.floor(("0x"+r).toString(10));g=Math.floor(("0x"+g).toString(10));b=Math.floor(("0x"+b).toString(10)); if(jia==0){r+=dx;g+=dx;b+=dx;obj.color="rgb("+r+","+g+","+b+")"} else if(jia==30){r-=dx;g-=dx;b-=dx;obj.color="rgb("+r+","+g+","+b+")"} else{obj.color=gcor();jia++;obj.jia=jia;if(jia==30)obj.innerText="发/n财"} if(r>255||g>255||b>255){obj.jia=1;obj.innerText="牛/n年"} if(r+g+b<0){clearInterval(obj.go);a.removeChild(obj);p.add()} }} //end var flash1={ add:function(x,y,size1,color1){ var dx=Math.round($()*40)-20,dy=Math.round($()*40)-20 if(Math.abs(dx)<2)dx=5;if(Math.abs(dy)<2)dy=-5; var d=document.createElement("font"); with(d.style){fontSize=size1;left=x;top=y;} d.color=color1;d.oldx=x;d.oldy=y;d.dx=dx;d.dy=dy; d.innerText="●";d.go=setInterval(function(){flash1.go(d)},30);a.appendChild(d) }, go:function(obj){ var x=obj.oldx,y=obj.oldy,x2=obj.offsetLeft,y2=obj.offsetTop if(Math.abs(x-x2)<125&&Math.abs(y-y2)<125){obj.style.left=x2+Math.floor(obj.dx);obj.style.top=y2+Math.floor(obj.dy);}else{clearInterval(obj.go);a.removeChild(obj);} }} //end var flash2={ add:function(x,y,pos,size1){ var d=document.createElement("font"); with(d.style){fontSize=size1;left=x;top=y;} d.color=gcor();d.oldx=x;d.oldy=y;d.pos=pos;d.innerText="★"; d.go=setInterval(function(){flash2.go(d)},30);a.appendChild(d) }, go:function(obj){ var x=obj.oldx,y=obj.oldy,x2=obj.offsetLeft,y2=obj.offsetTop,p=obj.pos; if(Math.abs(x-x2)<100&&Math.abs(y-y2)<100){obj.style.left=x2+(p*Math.cos(p));obj.style.top=y2+(p*Math.sin(p));}else{clearInterval(obj.go);a.removeChild(obj);} }} //end var flash3={ add:function(x,size1){ var arr=[],size2=parseFloat(size1)+2,x2=Math.round($()*100)-50+x,d=document.createElement("div"); with(d.style){position="absolute";zIndex=5;left=x2;top=yall;} for(var i=0;i++<5;){var os=size2-(i*2);if(os<=0)os=1;arr[i]="<font color='"+gcor()+"' style='font-size:"+os+"'>*</font><br>"} d.innerHTML=arr.join("");d.go=setInterval(function(){flash3.go(d)},30);a.appendChild(d); }, go:function(obj){ var top1=obj.offsetTop;obj.style.top=top1-30;if(top1<-50){clearInterval(obj.go);a.removeChild(obj)} }} //end var flash4={ add:function(x,y,size1,color1){ var arr=[],d=document.createElement("div");d.ci=1; with(d.style){position="absolute";left=x;top=y;fontSize=size1;color=color1;} for(var i=0;i++<($()*60)+40;){ var gx=parseFloat(size1)*12,sx=Math.ceil($()*gx)-(gx/2),sy=Math.ceil($()*gx)-(gx/2); arr[i]="<font color='"+color1+"' style='left:"+sx+";top:"+sy+"'>.</font>" } d.innerHTML=arr.join("");d.go=setInterval(function(){flash4.go(d)},70);a.appendChild(d); }, go:function(obj){ var ci=obj.ci;ci++;if(ci==35){clearInterval(obj.go);return a.removeChild(obj)}obj.ci=ci; if((ci/2).toString().indexOf(".")==-1){obj.style.visibility="visible"}else{obj.style.visibility="hidden"} }} //end //不过老实说,FF限制过大,很难写出连串动画效果+效率并重,还是非常欢迎ieonly老手上台表演绝技,十分期待欣赏! </script></BODY></HTML>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]