原生JS实现多个小球碰撞反弹效果示例

本文实例讲述了原生JS实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：

实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹

小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹

实现代码：

  
    
    
    
      * {
 margin: 0;
 padding: 0;
      }
      #wrap {
 height: 800px;
 width: 1300px;
 border: 1px solid red;
 
 position: relative;
 margin: 0 auto;
 overflow: hidden;
      }
      p {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: red;
 position: absolute;
 top: 0;
 left: 0;
 color: white;
 font-size: 25px;
 text-align: center;
 line-height: 40px;
      }
    
  
  
    
    
  
  
  

运行效果：

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript运动效果与技巧汇总》、《Javascript动画特效与技巧汇总》、《Javascript图形绘制技巧总结》、《Javascript切换特效与技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。