庆元旦，放烟花(纯javascript版烟花效果)

       2008年过去了，新的2009年到来了，2008太不平凡，发生了太多事，包括我自己，不管怎么样，困难过去就是一个新的阶段，继续+U。

       在这里写了一个JS的烟花特效，以此来庆祝新的一年，祝大家元旦快乐！

       实现原理：每个烟花颗粒是一个div对象，让每一个烟花颗粒对象以一个坐标点，按随机角度由内向外移动，每组烟花的颗粒数不同，发射的速度也不同，颜色也不同，都是随机产生的。当多个烟花颗粒同时移动的时候，就产生了类似烟花爆炸的效果，ok，现在看看效果和相关代码：

   

 

firework.js代码 ：

var  Utils = {} ;

Utils.$E = function (id) {
    return document.getElementById(id);
} ;

Utils.$C = function (tagName) {
    return document.createElement(tagName);
} ;

Utils.getIntervalRandom = function (min,max) {
    return parseInt(Math.random()*(max-min)+min);
} ;

Utils.INTERVAL_SPEED = 30 ;
if (navigator.appName.toLowerCase().indexOf( " netscape " ) !=- 1 )
{
    Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6);
}

String.prototype.padLeft = function (sLen,padChar) {
    var result=this;
    for(i=this.length;i<sLen;i++){
        result=padChar+result;
    }
    return result;
} ;


var  Firework = function (x,shotHeight,radius,particleCount,color,speed) {
    this.shotHeight=shotHeight || 200;
    this.radius=radius || 100;
    this.particleCount=particleCount || 10;
    this.color=color || "#FF0000";
    this.parentElement=document.body;
    this.x=x;
    this.shottingSpeed=speed || 3;
    this.isShoted=false;
    this.isFlash=true;
    
    this._particles=[];
    this._particleShape=unescape("%u25CF");
    this._shottingShape="|";
    this._depth=3;
    this._shotting=Utils.$C("div");
    this._flashing=Utils.$C("div");
    this._disposeCount=0;
    
    var _this=this;
    
    void function initialize(){
        for(var i=0;i<_this.particleCount;i++){
            _this._particles[i]=Utils.$C("div");
            _this._particles[i].style.position="absolute";
            _this._particles[i].style.left=_this.x+"px";
            _this._particles[i].style.top=_this.shotHeight+"px";
            _this._particles[i].style.zIndex=100;
            _this._particles[i].style.color=_this.color;
            _this._particles[i].style.display="none";
            _this._particles[i].innerHTML=_this._particleShape;
            _this._particles[i].distance=Utils.getIntervalRandom(1,_this.radius-parseInt((i%_this._depth)*(_this.radius/_this._depth)));
            _this._particles[i].speed=Utils.getIntervalRandom(1,4)*_this._particles[i].distance*0.06;
            _this.parentElement.appendChild(_this._particles[i]);
            _this._setSize(_this._particles[i],5);
        }
        
        _this._shotting.speed=_this.shottingSpeed;
        _this._shotting.innerHTML=_this._shottingShape;
        _this._shotting.style.position="absolute";
        _this._shotting.style.fontWeight="900";
        _this._shotting.style.left=_this.x+"px";
        //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px";
        _this._shotting.style.top="700px";
        _this._shotting.style.zIndex=100;
        _this._shotting.style.color=_this.color;
        _this._setSize(_this._shotting,15);
        _this.parentElement.appendChild(_this._shotting);
        
        _this._flashing.style.width="100%";
        _this._flashing.style.height="100%";
        _this._flashing.style.left="0";
        _this._flashing.style.top="0";
        _this._flashing.style.backgroundColor="#ffffee";
        _this._flashing.style.position="absolute";
        _this._flashing.style.zIndex=200;
        _this._flashing.style.display="none";
        _this._flashing.style.MozOpacity=0.5;
        _this._flashing.style.filter="alpha(opacity=50)";
        _this.parentElement.appendChild(_this._flashing);
        
    }();
} ;

Firework.prototype.shot = function () {
    var _this=this;
    _this.isShoted=true;
    var shotInterval=window.setInterval(function(){
        if(parseInt(_this._shotting.style.top)>_this.shotHeight){
            _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px";
        }
        else{
            window.clearInterval(shotInterval);
            _this.parentElement.removeChild(_this._shotting);
            _this.bomb();
            _this._shotting=null;
        }    
    },Utils.INTERVAL_SPEED);
} ;

Firework.prototype.bomb = function () {
    var _this=this;
    if(_this.isFlash){
        _this._flashing.style.display="";
        var flashTimeout=window.setTimeout(function(){
            _this.parentElement.removeChild(_this._flashing);
            window.clearTimeout(flashTimeout);
        },10);
    }
    else{
        _this.parentElement.removeChild(_this._flashing);
    }
    
    for (var i = 0; i <_this._particles.length; i++) {
        _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360));
    }
} ;

Firework.prototype._setSize = function (obj,value) {
    obj.style.fontSize=parseInt(value)+"px";
} ;

Firework.prototype._moveParticle = function (particle,angle) {
    var _this=this;
    var initX=parseInt(particle.style.left);
    var initY=parseInt(particle.style.top);
    var currentDistance=0;
    var currentX=initX;
    var currentY=initY;
    particle.style.display="";
    
    particle.intervalId=window.setInterval(function(){
        if(currentDistance<particle.distance){
            var newX,newY;
            var xAngle=angle*(2*Math.PI/360);
            var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle);
            var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle);
    
            if(Math.abs(Math.tan(xAngle))<=1){
                var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection;
                newX=currentX+deltaX;
                newY=-(newX-initX)*Math.tan(xAngle)+initY;
                currentDistance+=Math.abs(deltaX);
            }
            else{
                var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection;
                newY=currentY-deltaY;
                newX=-(newY-initY)/Math.tan(xAngle)+initX;
                currentDistance+=Math.abs(deltaY);
            }
            currentX=newX;
            currentY=newY;
            particle.style.left=currentX+"px";
            particle.style.top=currentY+"px";
        }
        else{
            window.clearInterval(particle.intervalId);
            _this.parentElement.removeChild(particle);
            particle=null;
            if(++_this._disposeCount==_this.particleCount){
                _this._particles.length=0;
                _this.parentElement=null;
                _this=null;
            }
        }
    },Utils.INTERVAL_SPEED);

};

 

HTML页面代码：

 

<! 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 >
         < script  type ="text/javascript"  src ="firework.js" ></ script >
         < script  type ="text/javascript" >
            function test(){
                var fireworks=[];
                var total=15;
                window.setInterval(function(){
                    for (var i = 0; i < total; i++) {
                        if (!fireworks[i] || !fireworks[i].parentElement) {
                            var x=Utils.getIntervalRandom(50,document.body.offsetWidth-50);
                            var shotHeight=Utils.getIntervalRandom(100,450);
                            var radius=Utils.getIntervalRandom(50,200);
                            var particleCount=Utils.getIntervalRandom(40,80);
                            var speed=Utils.getIntervalRandom(10,20);
                            var color="#"+Utils.getIntervalRandom(0,16777215).toString(16).padLeft(6,"f");
                            fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed);
                        }
                    }
                },100);
                
                window.setInterval(function(){
                    var currentIndex=Utils.getIntervalRandom(0,total);
                    if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){
                        fireworks[currentIndex].shot();
                    }
                },500);
            }
         </ script >
     </ head >
     < body  bgColor ="#000000"  onload ="test();" >
         < div  style ="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:yellow;" > Happy New Year </ div >
         < div  style ="width:100%;text-align:center;font:100px 'Comic Sans MS',Arial,sans-serif;color:red;" > 2009 </ div >
         < a  href ="http://random.cnblogs.com"  target ="newWindow" >< div  style ="width:100%;font-size:12px;text-align:center;color:#fff" > Copyright by Random 2009 All Rights Reserved </ div ></ a >
     </ body >
</ html >

 

 

 

 

转载于:https://www.cnblogs.com/Random/archive/2009/01/01/1366394.html