js粒子弹力小实验

这只是个简单的js粒子运动实验，有很多地方都问题，如没有考虑粒子与粒子之间的碰撞，只是简单将粒子做自由落体抛射，如有不足请大家多多指教。

原理如下：

 定义了一个boll类，这个类拥有自由落体及回弹的行为，包含一系列的属性：

 

 1       // x位置
 2       this .x  =  option.x  ?  option.x :  0 ;
 3       // y位置
 4       this .y  =  option.y  ?  option.y :  0 ;
 5       // 半径
 6       this .raduis  =  option.raduis  ?  option.raduis :  10 ;
 7       // 颜色
 8       this .color  =  option.color  ?  option.color :  ' #000 ' ;
 9       // x轴加速度
10       this .vx  =  option.vx  ?  option.vx :  5 ;
11       // y轴加速度
12       this .vy  =  option.vy  ?  option.vy :  5 ;
13       // 摩擦损耗
14       this .spring  =   0.9 ;

通过下面两个方法来设置粒子的位置：

1        SetX: function (x){
2               this .x  =  x;
3               this .Element.style.left  =  x  +   ' px ' ;
4        },
5        SetY: function (y){
6               this .y  =  y;
7               this .Element.style.top  =  y  +   ' px ' ;
8        }

 下面这个start方法用来启动自由落体，它会每隔42ms执行位置计算，也差不多是每秒钟执行24次，就如同电影的24帧一样。回弹的原理：如果粒子位置出了窗口，就将其加速度取反，同时乘以摩擦系数。这里也加入了一个向下的引力。

      start: function (){
            var  _this  =   this ;
            this .interval  =  setInterval( function (){
                _this.vy  +=  (_this.y  >=  _this.boxHeight - 60 )  ?   0  :  2 ;
                 if (_this.x  >=  _this.boxWidth  - 50 ){
                    _this.vx  =   - Math.abs(parseInt(_this.vx  *=  _this.spring, 10 ));
                }
                 if (_this.x  <=   50 ){
                    _this.vx  =  Math.abs(parseInt(_this.vx  *=  _this.spring, 10 ));
                }
                 if (_this.y  >=  _this.boxHeight - 50 ){
                    _this.vy  =   - Math.abs(parseInt(_this.vy  *=  _this.spring, 10 ));
                    _this.vx  =  parseInt(_this.vx  *=  _this.spring, 10 );
                }
                 if (_this.y  <=   50 ){
                    _this.vy  =  Math.abs(parseInt(_this.vy  *=  _this.spring, 10 ));
                }
                _this.SetY(_this.y  +  _this.vy );
                _this.SetX(_this.x  +  _this.vx );    
           }, 42 );
      }

 全部代码：

View Code

 1  <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN "   " http://www.w3.org/TR/html4/loose.dtd " >
 2  < html >
 3    < head >
 4     < title >  粒子实验  < / title>
 5    < / head>
 6    < body >
 7  < div id = " out " >< / div>
 8    < / body>
 9  < / html>
10     < script type = " text/javascript " >
11     function  boll(option){
12       // 属性
13       // x位置
14       this .x  =  option.x  ?  option.x :  0 ;
15       // y位置
16       this .y  =  option.y  ?  option.y :  0 ;
17       // 半径
18       this .raduis  =  option.raduis  ?  option.raduis :  10 ;
19       // 颜色
20       this .color  =  option.color  ?  option.color :  ' #000 ' ;
21       // x轴加速度
22       this .vx  =  option.vx  ?  option.vx :  5 ;
23       // y轴加速度
24       this .vy  =  option.vy  ?  option.vy :  5 ;
25       // 摩擦损耗
26       this .spring  =   0.9 ;
27       // 元素
28       this .Element  =  document.createElement( ' div ' );
29       this .Element.style.position  =   ' absolute ' ;
30       this .Element.style.left  =   this .x;
31       this .Element.style.top  =   this .y;
32       this .Element.style.width  =  ( this .raduis  *   2 )  +   ' px ' ;
33       this .Element.style.height  =  ( this .raduis  *   2 )  +   ' px ' ;
34       this .Element.style.backgroundColor  =   this .color;
35      
36       // 环境
37       this .boxWidth  =  document.documentElement.clientWidth;
38       this .boxHeight  =  document.documentElement.clientHeight;
39       var  _this  = this ;
40      window.onresize  =   function (){
41          _this.boxWidth  =  document.documentElement.clientWidth;
42          _this.boxHeight  =  document.documentElement.clientHeight;
43          
44      };
45       // 定时器实例
46       this .interval  =   false ;
47      document.body.appendChild( this .Element);
48    }
49    boll.prototype  =  {
50        start: function (){
51              var  _this  =   this ;
52              this .interval  =  setInterval( function (){
53                  _this.vy  +=  (_this.y  >=  _this.boxHeight - 60 )  ?   0  :  2 ;
54                   if (_this.x  >=  _this.boxWidth  - 50 ){
55                      _this.vx  =   - Math.abs(parseInt(_this.vx  *=  _this.spring, 10 ));
56                  }
57                   if (_this.x  <=   50 ){
58                      _this.vx  =  Math.abs(parseInt(_this.vx  *=  _this.spring, 10 ));
59                  }
60                   if (_this.y  >=  _this.boxHeight - 50 ){
61                      _this.vy  =   - Math.abs(parseInt(_this.vy  *=  _this.spring, 10 ));
62                      _this.vx  =  parseInt(_this.vx  *=  _this.spring, 10 );
63                  }
64                   if (_this.y  <=   50 ){
65                      _this.vy  =  Math.abs(parseInt(_this.vy  *=  _this.spring, 10 ));
66                  }
67                  _this.SetY(_this.y  +  _this.vy );
68                  _this.SetX(_this.x  +  _this.vx );    
69             }, 42 );
70        },
71        SetX: function (x){
72               this .x  =  x;
73               this .Element.style.left  =  x  +   ' px ' ;
74        },
75        SetY: function (y){
76               this .y  =  y;
77               this .Element.style.top  =  y  +   ' px ' ;
78        }
79    };
80    
81     for ( var  i = 0 ; i  <   200 ; i ++ ){
82       ( new  boll({vx:(Math.random()  *   30 ),vy:(Math.random()  *   12 ),color:( ' # ' + parseInt(Math.random()  *   255 ).toString( 16 ) + parseInt(Math.random()  *   255 ).toString( 16 ) + parseInt(Math.random()  *   255 ).toString( 16 )),raduis: 1 ,x: 60 ,y: 60 })).start();
83    }
84     < / script>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 粒子实验 </title> </head> <body> <div id="out"></div> </body> </html>

 

 

转载于:https://www.cnblogs.com/xingzhi/archive/2011/06/03/2072055.html