2021-05-06

开发工具与关键技术：DW ，JQ
作者：甘建豪
撰写时间：2021/5/5

案例反弹的小球

案例原理：在一个大盒子里面放一个小球让它在一个随机的定位上开始移动，移动的速率也是随机的，当碰到边界时就会折返。

1. html,就两个内容一个大盒子 ，里有一个小球，大盒子相对定位，小球绝对定位。
2. css样式给大盒子一个边框或者是一个阴影box-shadow: 0 0 10px #333;。小球样式 就是 border-radius: 50%，颜色自定;
3. 后我们来看代码
   

一． 首先给小球一个随机定位，获取到大盒子的宽减去小球的宽，就是小球横轴上的活动范围，命名为x，以此类推小球竖轴上活动范围命名为y。
二． 然后再确定一个开始的运动趋势，快和慢，左或右，都是由一个dx=parseInt(Math.random()*30-15);的随机数决定的，dy决定的是 上或下的运动方向。
三． 以上两种条件都满足了之后就就开始执行动画效果，首先一个连续触发定时器了每30毫秒调用一次，每调用一次x就要加等一次dx，就会有了运动的趋势，结合上y+=dy的运动，就形成了斜向运动，再调用 小球的css修改里面的left和top,每30毫秒更新一些定位就可以让小球动起来了。
四． 最后关键的一步如果想要小球碰撞到边界都会反弹必须要给它们两个判断条件，当碰到左右边框的时候即小球横轴定位：x小于等于0(左壁)或者大于boxw(右壁)的时候将运动趋势dx赋值给-dx，就可以左到碰到边界就折返。以此类推碰到上下边框也是如此，修改一下参数即可。

最后我们来看下图片