【编程游戏】贺岁放礼花。（点燃续帖2-102楼yvhkiawy的焰火）

最新推荐文章于 2025-12-02 21:41:05 发布

最新推荐文章于 2025-12-02 21:41:05 发布 · 75 阅读

文章标签：

本编程游戏通过JavaScript实现动态烟花效果，包括烟花发射、爆炸及火花四溅等细节，提供了一个完整的HTML页面示例代码。

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=911" 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> <title>Untitled Page </title> <style type="text/css"> body{margin:0px;padding:0px;width:100%;height:100%;background-color:#000000;color:#ffffff;overflow:hidden;} div{overflow:hidden;font-size:10px;} </style> </head> <body> </body> <script type="text/javascript"> function Random(start,end){if(start||end) return Math.round(start+Math.random()*(end-start));else return Math.random();} function Sparks(point,count,r,g,b,sky,n) { var da=Math.PI*2/count; var r=Random(80,150); var step = Random(5, 15); for(var i=0;i <count;i++) { var ele = document.createElement("div"); ele.innerHTML = "●"; ele.style.color = "rgb(" + r + "," + g + "," + b + ")"; ele.pos = function(point) { if (point) { this.style.left = point.x + "px"; this.style.top = point.y + "px"; } else { return new Point(this.offsetLeft, this.offsetTop); } }; ele.size = function(size) { if (size) { this.style.width = size.x + "px"; this.style.height = size.y + "px"; this.style.fontSize = size.x + "px"; } else { return new Point(this.offsetWidth, this.offsetHeight) } }; ele.opac=function(o){this.style.opacity = (o / 100);this.style.MozOpacity=o/100;this.style.KhtmlOpacity=o/100;this.style.filter= "alpha(opacity=" + o + ")";}; ele.r=r; ele.nstep=0; ele.step=step; ele.d=da*i; ele.spoint=point; sky.appendChild(ele); ele.style.position="absolute"; ele.size(new Point(10,10)); ele.pos(new Point(point.x-5,point.y-5)); ele.run = function() { if (this.nstep >= this.step) { this.parentNode.removeChild(this); return; } this.nstep++; var nr = (this.r / this.step) * this.nstep; this.pos(new Point(nr * Math.cos(this.d) + this.spoint.x - 5, nr * Math.sin(this.d) + this.spoint.y - 5)); if (this.nstep >= this.step/2) { var bl = 1 - (this.nstep - this.step / 2) / this.step / 2; this.opac(Math.round(100 * bl)); var p = Math.round(10 * bl); this.size(new Point(p, p)); } var obj = this; setTimeout(function() { obj.run(); }, 200); } ele.run(); } if (!n) n = 0; n++; if(n <Random(1,5)) setTimeout(function() { new Sparks(point,count,r,g,b,sky,n) }, 300); } function Point(x,y){this.x=x;this.y=y;} ({ fire:function(){ var r=Random(0,255);var g=Random(0,255);var b=Random(0,255); var pos=Random(100,this.sky.width-100); new this.fireWork(r,g,b,pos,this.sky);var obj=this;setTimeout(function(){obj.fire();},1000);}, sky:(function(){ var obj=document.body; obj.width=document.documentElement.clientWidth; obj.height=document.documentElement.clientHeight; return obj; })(), fireWork:function(r,g,b,position,sky) { this.ele=document.createElement("div"); this.ele.style.position="absolute"; this.sky=sky; this.color={"r":r,"g":g,"b":b}; this.ele.pos=function(point){if(point){this.style.left=point.x+"px";this.style.top=point.y+"px";}else{return new Point(this.offsetLeft,this.offsetTop);}}; //this.ele.size=function(size){if(size){this.style.width=size.x+"px";this.style.height=size.y+"px";}else{return new Point(this.offsetWidth,this.offsetHeight)}}; //this.ele.opac=function(o){this.style.opacity = (o / 100);this.style.MozOpacity=o/100;this.style.KhtmlOpacity=o/100;this.style.filter= "alpha(opacity=" + o + ")";}; this.flyH=this.sky.height-Random(200,this.sky.height*0.8); this.ele.pos(new Point(position,this.sky.height-10)); this.ele.style.backgroundColor="rgb("+r+","+g+","+b+")"; this.ele.style.width="5px"; this.ele.style.height="10px" document.body.appendChild(this.ele); this.fire=function(){if(this.ele.pos().y <=this.flyH){new Sparks(this.ele.pos(),Random(5,12),this.color.r,this.color.g,this.color.b,this.sky);this.ele.parentNode.removeChild(this.ele);return;}var pos=this.ele.pos();this.ele.pos(new Point(pos.x,pos.y-20));var obj=this;setTimeout(function(){obj.fire();},100);}; this.fire(); } }).fire(); </script> </html>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]