【编程游戏】贺岁放礼花。（点燃34楼zjsfdxbao的焰火）

最新推荐文章于 2025-12-11 16:09:33 发布

最新推荐文章于 2025-12-11 16:09:33 发布 · 104 阅读

文章标签：

本文介绍了一个使用JavaScript实现的烟花效果程序。通过定义不同类如Firework和star来模拟烟花发射和绽放的过程，利用HTML和CSS进行展示。文章包含了完整的代码示例，并详细解释了如何通过数学运算模拟真实烟花的各种特性。

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=808" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <html> <head> <title>【编程游戏】贺岁放礼花。</title> </head> <body> <script> var FireColor = ["red","blue","yellow","orange","pink"]; var FireStyle = ["¤","●","○","◎","▲"]; var StarStyle = ["☆","★","※","∵","◆"]; function xo() { this.x=0;this.y=0;this.power=Math.floor(Math.random()*arguments[0]+arguments[1]); } function star(c) { var handle=this; xo.call(this,100,0); this.star=StarStyle[Math.floor(Math.random()*4)]; this.angle=2*Math.PI*Math.random()+1; this.o=document.createElement("span"); document.body.appendChild(this.o); this.o.innerHTML=this.star; this.style=this.o.style; this.color=c; this.exist=false; with(this.style) { visibility="hidden"; position="absolute"; color=this.color; } this.move=function() { if(this.y<this.power) { this.y+=2; with(this.style) { top=this.y; left=this.x+this.y*Math.sin(this.angle); } }else { this.clear(); } } this.burn=function(x,y) { this.style.left=this.x=x; this.style.top=this.y=y; } this.shine=function(x,y) { this.burn(x,y); this.style.visibility="visible"; this.gogo=setInterval(function(){handle.move()},17); } this.clear=function() { this.o.parentNode.removeChild(this.o); clearInterval(this.gogo); } } function Firework() { var handle=this; xo.call(this,10,25); this.color=FireColor[Math.floor(Math.random()*4)]; this.shape=FireStyle[Math.floor(Math.random()*4)]; this.starnum=Math.floor(Math.random()*7)+5; this.star = new Array(); this.exist=true; for(var i=0;i<this.starnum;i++) { this.star[i]=new star(this.color); } this.starnum=Math.floor(Math.random()*4)+4; this.o = document.createElement("span"); document.body.appendChild(this.o); this.o.innerHTML=this.shape; this.style=this.o.style; this.style.color=this.color; this.style.position="absolute"; this.setX=function(x){this.style.left=x+"px";this.x=x;} this.setY=function(y){this.style.top=y+"px";this.y=y;} this.move=function() { this.y -=this.power/3; if(this.y>this.power) this.style.top=this.y + "px"; else { if(this.exist)this.clear(); } } this.fire=function() { this.gogo=setInterval(function(){handle.move()},17); }; this.clear=function() { this.o.parentNode.removeChild(this.o); clearInterval(this.gogo); this.exist=false; for(var i=0,j=this.star.length;i<j;i++) { this.star[i].shine(this.x,this.y); } } } function FireScene(n) { this.num=n; this.SceneWidth=document.body.clientWidth; this.SceneHeight=document.body.clientHeight; this.step=Math.floor(this.SceneWidth/this.num); this.firework=new Array(); for(var i=0;i<this.num;i++) { this.firework[i]=new Firework(); this.firework[i].setX(this.step*i); this.firework[i].setY(this.SceneHeight-50); } this.fire=function() { for(var i=0,j=this.firework.length;i<j;i++) { this.firework[i].fire(); } } } window.onload=function() { document.body.style.backgroundColor = "Black"; new FireScene(8).fire() setInterval("new FireScene(8).fire()",2000); } </script> </body> </html>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]