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>
  <script type="text/javascript">
  function boll(option){
    //属性
    //x位置
    this.x = option.x ? option.x : 0;
    //y位置
    this.y = option.y ? option.y : 0;
    //半径
    this.raduis = option.raduis ? option.raduis : 10;
    //颜色
    this.color = option.color ? option.color : '#000';
    //x轴加速度
    this.vx = option.vx ? option.vx : 5;
    //y轴加速度
    this.vy = option.vy ? option.vy : 5;
    //摩擦损耗
    this.spring = 0.9;
    //元素
    this.Element = document.createElement('div');
    this.Element.style.position = 'absolute';
    this.Element.style.left = this.x;
    this.Element.style.top = this.y;
    this.Element.style.width = (this.raduis * 2) + 'px';
    this.Element.style.height = (this.raduis * 2) + 'px';
    this.Element.style.backgroundColor = this.color;
    //环境
    this.boxWidth = document.documentElement.clientWidth;
    this.boxHeight = document.documentElement.clientHeight;
    var _this =this;
    window.onresize = function(){
        _this.boxWidth = document.documentElement.clientWidth;
        _this.boxHeight = document.documentElement.clientHeight;
    };
    //定时器实例
    this.interval = false;
    document.body.appendChild(this.Element);
  }
  boll.prototype = {
      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);
      },
      SetX:function(x){
            this.x = x;
            this.Element.style.left = x + 'px';
      },
      SetY:function(y){
            this.y = y;
            this.Element.style.top = y + 'px';
      }
  };
  for(var i=0; i < 200; i++){
     (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();
  }
  </script>