小球碰撞(完全弹性碰撞)

所属分类:其他-动画效果

 48138  468  查看评论 (28)
分享到微信朋友圈
X
小球碰撞(完全弹性碰撞) ie兼容10

更新时间:2017/6/28 上午10:32:32

更新说明:

1. 更新了碰撞方法。解决了擦边碰撞不正常的情况。

2. 更新了碰撞回掉函数的调用情况。避免了刚出现小球时如果重叠一直调用的情况。


使用方法说明

1.此插件纯原生js编写,使用时引入此collision.js即可。

2.生成容器,假设现有一个id为container的盒子做容器。

var oB=new BallBox(‘container’);

注:容器必须是有宽高的定位元素。尽量不要有边线。

3.生成小球

var ball=new Ball();

4.把小球放入容器

oB.addBall(ball);

5.调用容器的ballRun方法,让小球开始运动。注意:此运动是完全弹性碰撞,不会损失能量。

oB.ballRun();

over

参数说明

容器参数 

new BallBox(‘container’, opts);
opts: {
    width: num,
    height: num
} //没有边线和padding的时候可不写。有的情况下需要把容器真实宽高填进去。
小球参数 new Ball(opts);
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指向此球对象
   	}
   	
 */

小球方法:

setB(num)//重新设置小球半径
setC(str);//重新设置小球背景颜色/图片
setBorderWidth(n);//重新设置小球边线宽度
setBorderColor(str);//重新设置边线颜色
setM(n);//重设小球质量,如果不给参数,则按照半径重新默认质量
setHTML(str);//重设小球内容
setOpa(n);//重设小球透明度
相关插件-动画效果

jquery实现烟花特效

基于jquery 实现放烟花特效。使用简单,仅仅需要一个div,可以自由配置(感谢“腰长腿却短
  动画效果
 52807  405

基于three.js雪花效果

基于three.js开发的雪花飘落效果,跟随鼠标
  动画效果
 28318  271

CSS3模仿四季交替动画

HTML5 CSS3卡通风格一年四季交替动画特效
  动画效果
 30877  439
  动画效果
 60771  613

讨论这个项目(28)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    jiang1234 0
    2022/6/26 15:48:43
    你好 怎么在vue项目中引用 回复
    王深镇 0
    2020/1/10 10:38:14
    为什么没有删除小球的函数,我觉得这个功能可以增加,删除指定小球,全部删除小球
        暖终你 ??1
        2022/1/11 14:13:26
        var oB=new CollBox('container');
        ...
        删除:
        先清空oB
        然后再把div里面的内容清空掉就可以了
        😀反正我是这样 干的
    回复
    xuanziran 0
    2019/7/3 11:03:20
    移动端撞着撞着某个小球不不动了,被其他就穿过了也没有反应
        kmh02280
        2019/10/9 11:09:43
        因为你鼠标移动到上面了,鼠标移动上面小球就不动了。方便点击
    回复
    微风? 0
    2019/1/18 14:10:57
    小球可以换成页面上写好的多个li吗?
        kmh02280
        2019/1/21 9:45:18
        可以
    回复
    asdafaffsd 0
    2018/12/25 9:11:48
    我想下载你这个插件,却没有jq币
    回复
    /mn★怡琳★ 0
    2018/12/13 10:45:47
    你好我已经下载了,如果不想让小球碰撞,只是到边框才碰撞,怎么改呢?谢谢 回复
    Met a person whitehead 0
    2018/6/6 15:11:46
    大神 这个插件可以只是单纯的碰撞 不改变里面的内容吗 还有小球的样式可以自定义吗
        /mn★怡琳★1
        2018/12/13 17:56:23
        小球的样式也可自定义你找到JS264行,下面可以自己设置CSS样式
    回复
    依凡 0
    2018/5/24 16:16:49
    想问一下e怎么用,另外我要做的效果是 有两行文字,一行是名称一行是数量,字数和数字的长度不确定,应该从哪里入手修改?求大佬指点
        kmh02281
        2018/5/29 9:29:06
        e:document.createElement('div'), 自己建个div,然后里面想放什么放什么
    回复
    ? 倚栏ㄋ? 听风雨 0
    2017/9/7 9:36:00

    老铁呀 花金币了 如何小球撞得时候字不变呀,每个字都是固定进去的数据

        kmh02280
        2017/9/7 23:08:45

        应该是你的回掉函数没写好。每次碰撞都会触发

        谓我心悠0
        2017/11/23 9:53:07

        好用么,能在小程序里用吗

    回复
    love萌99 0
    2017/8/23 16:15:14

    你好,请问collision.js中小球的原型方法ballstop怎么用的?  我想要每1秒删除一个小球,div可以移除,但是定时器移除不掉,页面执行时间长了特别卡

        love萌990
        2017/8/23 16:16:10

        额。。怎么提交了这么条   刚一直刷新不出来页面。。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复