• 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>
  • 相关阅读:
    kafka学习(八)
    kafka学习(七)
    kafka学习(六)
    kafka学习(五)
    kafka学习(四)
    kafka学习(三)
    kafka学习(二)
    kafak学习(一)
    ssh远程登录
    pycharm
  • 原文地址：https://www.cnblogs.com/xingzhi/p/2072055.html
Copyright © 2020-2023  润新知