DDR爱好者之家

JS实现小球的弹性碰撞效果
站长资源 2025/1/12 佚名
28 1538
DDR爱好者之家 Design By 杰米

一、HTML代码（body部分） 

 <body>
   <!--只需要做一个大div包裹几个小div即可，你想要几个小球碰撞就在内部做几个div即可，这里我们做了6个小球-->
   <div id="main">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
   </div> 
 </body>

　　上面body部分这样就算是完成了，下面我们给body中的div做一些小样式。

二、CSS小球样式部分 

<style type="text/css">
   /*将body默认的margin和padding部分去掉*/
   *{
     margin: 0px;
     padding: 0px;
    }
    /*采用定位的方式，让小球运动起来*/
    #main{
      margin: 0px auto;
     position: relative;
   }
   /*小球的样式*/
   #main div{
     overflow: hidden;
     position: absolute;
     width: 80px;
     height: 80px;
    opacity: 0.5;
     border-radius: 50%;
     background-color: red;
   }
 </style>

 　　小球是要运动起来的，我们通过给小球和它的父元素添加定位，最后用js改变其top、bottom、left、right值来让小球运动。现在我们小球的样式已经做好了，下面的js代码才是重中之重。

3.1 Android 事件基础知识

其实，我们通过上面的代码就可以完全实现一个小球碰撞检测的功能了。但是仅仅是上面的代码，还是会存在一定的bug，就是当整个网站存在右侧滚动条时，当小球碰到屏幕右侧的时候，会出现一瞬的横向滚动条，这就是做网站比较忌讳的了，横向滚动条的出现太丑了。所以我们可以通过以下代码来解决。

//滚动条宽度计算函数
    function getScrollbarWidth() {
      var oP = document.createElement("p"),
        styles = {
          width: "100px",
          height: "100px",
          overflowY: "scroll"
        }, i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i];
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }

以上是一个计算滚动条宽度的函数，此函数可以计算右侧滚动条的宽度，我们只需要在“根据浏览器窗口的大小自动调节小球的运动空间”上面，调用此函数

var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大运动宽度   maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;这样这个bug就修改好了。

总结

以上所述是小编给大家介绍的JS实现小球的弹性碰撞效果 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米