简述

通过setInterval()定时刷新小球位置来完成小球运动状态，模拟自由落体加速度及碰撞反弹效果

构成

整体的物体很少，只有一个小球及一个开始按钮，大概效果是点击开始按钮后赋予小球一个向右的初速度，同时有一个持续向下的趋势构成自由落体的感觉

小球

先生成一个小球

<style>
#ball {width: 40px;height: 40px;position: absolute;top: 20px;overflow: hidden;background: radial-gradient(yellow, transparent, transparent);
}
</style>
<body><div id="ball"></div>
</body>

按钮

然后再设置一个按钮用来出发小球的事件


<body id="body"><button id="btn" onclick="startMove()" type="button">开始</button>
</body>

运动轨迹

这个的话，还是结合代码来看吧

<style type="text/css">body, html{/* 需要先将body和html的高度设置为100%否则很多地方会出问题 */height: 100%;margin: 0;}body {/* 先设置个暗色的背景不那么刺眼*/background-color: dimgray;}#ball {width: 40px;height: 40px;/* 使用绝对定位才能方便的进行小球位置操作 */position: absolute;/* 因为进行了绝对定位所以回和上边的按钮重合往下移动一点*/top: 20px;/* 渐变色小球，比较有质感 */background: radial-gradient(yellow, transparent, transparent);}
</style>
<body id="body"><button id="btn" onclick="startMove()" type="button">开始</button><div id="ball"></div>
</body>
<script type="text/javascript">let body = document.getElementById('body')let ball = document.getElementById('ball')let btn = document.getElementById('btn')/* 首先获取背景的高和宽 */let h = body.offsetHeightlet w = body.offsetWidthlet speed = 5 //纵向初速度let speedX = 4 //横向初速度let bounce = 0 //反弹次数let debuff = 0.001 //横向速度影响系数（参考空气摩擦）let decr = 0.8 //反弹后动力损失系数startMove = () => {btn.disabled = truelet pY = ball.offsetToplet pX = ball.offsetLeftlet itv = setInterval(()=>{speed += 0.5 // 纵向减速speedX -= debuff // 横向减速pY += speedpX += speedXball.style.top = pY + 'px'ball.style.left = pX + 'px'if((pX + 50) > w || pX < 0){ //判断左右是否碰撞，碰撞后反向speedX = (-speedX) * decrdebuff = -debuff}if((pY + 50) >= h){ //判断是否碰底if(bounce < 15){ //弹跳次数小于15次时可继续反弹，否则停止计时器speed = (-speed) * decrbounce += 1}else{clearInterval(itv)bounce = 0}}},30)}
</script>

总结

做的效果比较简陋，而且还有一些小问题，简单的可以演示一下就好了。因为小球本身有大约三分之二的部分是透明的，但其本身的盒子大小还是那么大，所以需要稍微流出一下富余量以保证更好的视觉效果。
pY是没办法保证一定能正好等于h的（小数点及刷新频率的影响），所以如果超出下边界后会出现死循环问题，小球会一直动下去。

小球自由落体及碰撞反弹相关推荐

Silverlight2 边学边练之三小球自由落体
终于看到动画章节了,本篇主要针对物体移动.变形和渐变移动进行练习. 完成小球自由落体慢镜实例,请大家多多拍砖,废话少说快快操练. XAML Code: <UserControl x:Class= ...
第1关：小球自由落体运动-------C语言程序设计技术（循环结构程序设计1）
第1关:小球自由落体运动-------C语言程序设计技术(循环结构程序设计1) #include<stdio.h> #include<math.h>int main(void) ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
matlab 地形模拟程序,MATLAB模拟小球自由落体运动
大部分朋友学习MATLAB,需要一个学习示例用来参考,有一个比较经典的题目就是如何利用Matlab模拟小球自由落体运动,这可能会是你的某次课后作业,这个程序的编写过程可以分为三个步骤: 第一部分,设置 ...
小球自由落体_自由落体瀑布
小球自由落体 2010 update: Lo, the Web Performance Advent Calendar hath moved 2010年更新: Lo, Web Performance ...
matlab小球水平抛出,如何用Matlab制作小球自由落体运动的动画
第一堂课布置了一个Mission Impossible作业,要求学生们用Matlab制作一个动画,模拟小球的自由落体运动. 以下将整个任务的问题解决的过程分享如下: 步骤一,这是一个动画的制作过程,以 ...
C++入门——仿真小球自由落体运动和抛物线运动
参考 <C和C++游戏趣味编程> 童真仿真自由落体的小球实现小球受重力影响加速下落后,碰到地面反弹的效果代码如下: #include <graphics.h> #incl ...
自定义View之小球自由落体弹跳加载控件
本篇文章已授权微信公众号 guolin_blog(郭霖)独家发布效果预览因GIF图压缩的原因动画看起来有些不流畅. 应用为加载框的效果: 使用方法 XML: <com.example.ccy ...
小球自由落体后反弹，计算路线和反弹高度
**题目描述一弹跳小球从120米高度自由落下,每次落地后反跳回原高度的一半:计算n次落地经过的路线总长度和下次反弹的高度. 输入描述输入第几次落下输出描述输出经过的路线总长度和下次反弹的高度. ...

小球自由落体及碰撞反弹

目录

简述

构成

小球

按钮

运动轨迹

总结

小球自由落体及碰撞反弹相关推荐

最新文章

热门文章