html小球与边框碰撞反弹,通过JS如何实现多个小球碰撞反弹

这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下

本文实例讲述了原生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: wh