JavaScript实现重力下落与弹性效果的方法分析-创新互联

本文实例讲述了JavaScript实现重力下落与弹性效果的方法。分享给大家供大家参考，具体如下：

这里利用JS语言在Html页面中实现重力作用下落地后弹起的效果，如下所示：

在此例中主要涉及以下几个问题：

1.给球体一个释放初速度，如何实现越向下运动且在接触边缘之前，竖直方向上的速度speedY越大的效果？
答案：可以在计时器中，每及时一次，竖直方向上的速度speedY自增一个固定值来实现，下面代码中speedY += 6;就是实现这个效果。

2.球体接触地面（此例中指浏览器下边缘）后，如何实现速度反向效果？
答案：接触地面后，将方向速度置为当前速度的反方向即可，代码if (iW >= w||iW <= 0){speedX = -speedX;}if中条件表示如果超出运动范围，实现水平方向接触边缘后运动方向相反，代码if (iH >= h||iH <= 0){speedY = -speedY;}则表示Y方向接触边缘后速度变反。

3.球体接触地面反弹后，如何实现再次上升的高度低于上一次高度的效果？
答案：在接触地面后，速度变为负值，计时器开始执行下一个间隔，立即执行了speedY += 6，弹起速度立刻减小了6，其大小相对接触地面前一瞬间小，因此球体不会弹跳到原来的高度。

4.如何实现球体竖直方向上的速度绝对值越来越小直至逼近于0的效果？
答案：事实上，仅利用speedY += 6;此例中竖直方向上速度speedY不可能达到0，因为在该函数设置好了初速度的前提下，某一次落地速度不可能为6（通过后来打印速度每次执行结果可以确定），所以下一次执行不可能为0，那么究竟是怎样实现落到地面静止的效果的呢？实际上，当把speedY增加值设置为6时，当球体某一次落地瞬间它的速度是1，2，3，4，5中的任何一个值是，经加上6后反弹瞬时速度分别为-5，-4，-3，-2，-1，经过一个计时器周期（此例中为30毫秒），速度再加6立刻变为1，2，3，4，5，下一次速度变为-5，-4，-3，-2，-1......，由于speedY += 6在计时器的头处，因此最终结果将总是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一个数值，且计时器始终处于动态，最终球体显示在底部。

5.当球体释放后，也具备有个横向速度speedX，如何使横向速度也逐渐减小值0？
答案：此例中不需要考虑x方向的碰撞，因此每次计时可将speedX乘以一个小于1的数，最终的speedX值将无限趋近于0，显示为静止。
当拖动窗口时如何实现不出现滚动条的效果？
答案：拖动后浏览器窗口后，对球体设置新的运动范围即可。

实现代码及解析如下：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。