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>

 


 

 

posted @ 2011-06-03 16:40  OD  阅读(2712)  评论(9)  编辑  收藏  举报