js模拟小球重力回弹效果

PublicStatic0816

于 2019-09-01 17:37:29 发布

阅读量934

点赞数

CC 4.0 BY-SA版权

分类专栏： javas 文章标签：小球重力回弹效果

本文链接：https://blog.youkuaiyun.com/PublicStatic0816/article/details/100185519

本文介绍如何用JavaScript模拟小球的重力下降及碰撞反弹效果。通过CSS设置基本场景，如容器尺寸和背景色，然后用JS为小球添加动态行为，使其在容器内上下运动，真实呈现物理世界的重力与反弹现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.cont{
width: 1000px;
height: 600px;
background: #eee;
margin: 20px auto;
position: relative;
}
.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}

// 目标1: 让小球从上面落下来
// 准备:获取节点,绑定事件
var contObj = document.querySelector(’.cont’);
var boxObj = document.querySelector(’.box’);
document.onclick =()=>{
// 1 设置每次增加值的步长
var speed = 10;
// 2 重力加速的值
var g=2;
// 3 获取最大的top值,(下落最大高度)
// 用cont的高度减去box的高度
var target = contObj.offsetHeight - boxObj.offsetHeight;
// 4 设置定时器,让小球的top值,累加speed
var times = setInterval(()=>{
speed+=g;
// 5 判断小球是否下落到最大高度,是则停止下落
//
if((boxObj.offsetTop+speed)>target){
// console.log(target)
// console.log(boxObj.offsetTop);
// console.log(speed)
//目标:实现回弹,top值减小
//6 将spe