演示部分截图
资源描述
JS生成弹性小球碰撞工具插件
使用说明:
1、此插件纯原生js编写，使用时引入此collision.js即可。
2、生成容器，假设现有一个id为container的盒子做容器。
注：容器必须是有宽高的定位元素。尽量不要有边线。
1 | var oB=new BallBox(‘container’); |
3、生成小球
1 | var ball=new Ball(); |
4、把小球放入容器
1 | oB.addBall(ball); |
5、调用容器的ballRun方法，让小球开始运动。注意：此运动是完全弹性碰撞，不会损失能量。
1 | oB.ballRun(); |
参数说明：
1、容器参数 new BallBox(‘container’，opts);
1 | opts:{width:num,height:num}//没有边线和padding的时候可不写。有的情况下需要把容器真实宽高填进去。 |
2、小球参数 new Ball(opts);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | opts:{ e:小球DOM元素/原生对象，可填入页面DOM，不写则生成新DIV DOM, b:小球半径 默认30;包含边 c:小球背景颜色/图片， 默认'pink' borderWidth:边线宽度 默认0 borderColor:边线颜色 默认#000 x:小球中心点的横坐标 默认为半径 y:小球中心点的纵坐标 默认为半径 sx:小球在x轴方向速度每30ms，默认3 sy:小球在y轴方向速度每30ms，默认3 m:小球的质量，默认b/30; html:小球内部的内容，不填则不会改变DOM本身的内容。 fontSize:字体大小，默认12; opa:小球透明度，默认1； callBack:function 碰撞时的回掉函数，参数为碰撞的总次数，方法中this指向此球对象} |
小球方法：
1 2 3 4 5 6 7 | setB(num)//重新设置小球半径setC(str);//重新设置小球背景颜色/图片setBorderWidth(n);//重新设置小球边线宽度setBorderColor(str);//重新设置边线颜色setM(n);//重设小球质量,如果不给参数，则按照半径重新默认质量setHTML(str);//重设小球内容setOpa(n);//重设小球透明度 |
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/773.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
