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

最新推荐文章于 2020-03-04 12:31:55 发布

原创最新推荐文章于 2020-03-04 12:31:55 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编程 #游戏 #function #hex #colors #class

【编程游戏】贺岁放礼花。专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的烟花动画效果，通过自定义类和方法，实现了烟花升空、爆炸及火花四溅等视觉效果。

【编程游戏】贺岁放礼花。（第一名奖励10000可用分）
作者：

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=840" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400">

<html>
<head>
<title>学毛标兵来给大家放烟花！祝大家新年快乐，心想事成！ </title>
</head>
<body bgcolor="black" text="white" LINK="yellow" ALINK="red" VLINK="red">

if(!window.JSFX) JSFX=new Object();

if(!JSFX.createLayer)
{/*** Include Library Code ***/
var ns4 = document.layers;
var ie4 = document.all;
var icolor = 0;
JSFX.objNo=0;

JSFX.getObjId = function(){return "JSFX_obj" + JSFX.objNo++;};

JSFX.createLayer = function(theHtml)
{
var layerId = JSFX.getObjId();

document.write(" <DIV id='"+layerId+"' style='position:absolute'>"+theHtml+" </DIV>" );

var el = document.getElementById ? document.getElementById(layerId) :
document.all ? document.all[layerId] :
  document.layers[layerId];

return el;
}
JSFX.fxLayer = function(theHtml)
{
if(theHtml == null) return;
this.el = JSFX.createLayer(theHtml);
}
var proto = JSFX.fxLayer.prototype

proto.moveTo    = function(x,y){this.el.style.left = x;this.el.style.top=y;}
proto.setBgColor = function(color) { this.el.style.backgroundColor = color; }
proto.clip      = function(x1,y1, x2,y2){ this.el.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4){
proto.clip = function(x1,y1, x2,y2){
this.el.style.clip.top =y1;this.el.style.clip.left =x1;
this.el.style.clip.bottom=y2;this.el.style.clip.right =x2;
}
proto.setBgColor=function(color) { this.el.bgColor = color; }
}
if(window.opera)
proto.setBgColor = function(color) { this.el.style.color = color==null?'transparent':color; }

if(window.innerWidth)
{
gX=function(){return innerWidth;};
gY=function(){return innerHeight;};
}
else
{
gX=function(){return document.body.clientWidth;};
gY=function(){return document.body.clientHeight;};
}

/*** Example extend class ***/
JSFX.fxLayer2 = function(theHtml)
{
this.superC = JSFX.fxLayer;
this.superC(theHtml + "C");
}
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}/*** End Library Code ***/

/*************************************************/
/*** Firework Spark - extends fxLayer ***/
JSFX.FireworkSpark = function(x, y)
{
this.superC = JSFX.fxLayer;
this.superC("@");

this.dx = Math.random() * 4 - 2;
this.dy = Math.random() * 4 - 2;
this.ay = .09;
this.x = x;
this.y = y;
this.type = 0;
}
JSFX.FireworkSpark.prototype = new JSFX.fxLayer;
/*** END Class FireworkSpark Constructor - start methods ***/

JSFX.FireworkSpark.prototype.fire0 = function()
{
var a = Math.random() * 6.294;
var s = Math.random() * 2;
if(Math.random() >.6) s = 2;
this.dx = s*Math.sin(a);
this.dy = s*Math.cos(a) - 2;

}
JSFX.FireworkSpark.prototype.fire1 = function()
{
var a = Math.random() * 6.294;
var s = Math.random() * 2;
this.dx = s*Math.sin(a);
this.dy = s*Math.cos(a) - 2;
}
JSFX.FireworkSpark.prototype.fire2 = function()
{
var a = Math.random() * 6.294;
var s = 2;
this.dx = s*Math.sin(a);
this.dy = s*Math.cos(a) - 2;
}
JSFX.FireworkSpark.prototype.fire3 = function()
{
var a = Math.random() * 6.294;
var s = a - Math.random();
this.dx = s*Math.sin(a);
this.dy = s*Math.cos(a) - 2;
}
JSFX.FireworkSpark.prototype.fire4 = function()
{
var a = Math.random() * 6.294;
var s = (Math.random() > 0.5) ? 2 : 1;
if(s==1)this.setBgColor("#FFFFFF");
s -= Math.random()/4;
this.dx = s*Math.sin(a);
this.dy = s*Math.cos(a) - 2;
}
JSFX.FireworkSpark.prototype.fire = function(sx, sy, fw, cl)
{
this.setBgColor(cl);

if(fw == 1)
this.fire1();
else if(fw == 2)
this.fire2();
else if(fw == 3)
this.fire3();
else if(fw == 4)
this.fire4();
else
this.fire0();

this.x = sx;
this.y = sy;
this.moveTo(sx, sy);
}
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
return(parseInt(hex,16))
}
JSFX.FireworkSpark.prototype.animate = function(step)
{
var color = (step < 30) ? 255-(step*4) : Math.random()*(356-(step*4));
if(step>30)
{
/*set color*/
  var hex = dec2hex(color);
  if(icolor == 3)
  var str = "#" + hex + hex + "00";//yellow color
else if(icolor == 0)
      var str = "#" + hex + "0000";//red color
    else if(icolor == 1)
      var str = "#" + "00" + hex + "00"; //green color
    else if(icolor == 2)
      var str = "#" + "00" + hex + hex;//blue color
    else if(icolor == 4)
    var str = "#" + hex + hex + hex;//white color
this.setBgColor(str);
/*end set color*/
}
    this.dy += this.ay;
this.x += this.dx;
this.y += this.dy;
this.moveTo(this.x, this.y);
}
/*** END Class FireworkSpark Methods***/

/*** Class Firework extends Object ***/
JSFX.Firework = function(numSparks)
{
window[ this.id = JSFX.getObjId() ] = this;

this.sparks = new Array();
for(i=0 ; i <numSparks; i++)
{
this.sparks[i]=new JSFX.FireworkSpark(-10, -10);
this.sparks[i].clip(0,0,3,3);
this.sparks[i].setBgColor("#00FF00");
}
this.step = 0;
this.timerId = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.ay = 0.2;
this.state = "OFF";
}
JSFX.Firework.prototype.explode = function()
{
var fw = Math.floor(Math.random() * 5);
    for(i=0 ; i <this.sparks.length ; i++)
{
this.sparks[i].fire(this.x, this.y, fw, this.color);
this.sparks[i].dx += this.dx;
this.sparks[i].dy += this.dy;
}
}
JSFX.Firework.prototype.getMaxDy = function()
{
var ydiff = gY() - 30;
var dy    = 1;
var dist  = 0;
var ay    = this.ay;
while(dist <ydiff)
{
dist += dy;
dy+=ay;
}
return -dy;
}
JSFX.Firework.prototype.animate = function()
{

if(this.state=="OFF")
{
var colors = new Array("#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FFFFFF");
icolor = Math.floor(Math.random()*colors.length)
this.color = colors[icolor];
this.step = 0;
this.x = gX()/2;
this.y = gY()-10;
this.dy = this.getMaxDy();
this.dx = Math.random()*-8 + 4;
this.dy += Math.random()*3;
for(i=0 ; i <this.sparks.length ; i++)
this.sparks[i].moveTo(-10,-10);
this.sparks[0].setBgColor(this.color);
this.state = "TRAVEL";
}
else if(this.state=="TRAVEL")
{
this.x += this.dx;
this.y += this.dy;
this.dy += this.ay;
this.sparks[0].moveTo(this.x,this.y);
if(this.dy > 1)
{
this.state="EXPLODE"
this.explode();
}
}
else
{
if(this.step > 50)
this.state="OFF";

this.step++;

for(i=0 ; i <this.sparks.length ; i++)
this.sparks[i].animate(this.step);
}

}
JSFX.Firework.prototype.start = function()
{
if(this.timerId == -1)
{
this.state = "OFF";
this.timerId = setInterval("window."+this.id+".animate()", 40);
}
}
/*** END Class Firework***/

JSFX.FWStart = function()
{
if(JSFX.FWLoad)JSFX.FWLoad();
myFW.start();
}
myFW = new JSFX.Firework(80);
JSFX.FWLoad=window.onload;
window.onload=JSFX.FWStart;
</SCRIPT>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]