js实现自由落体

本文介绍了一种使用JavaScript实现自由落体运动的方法。通过设置元素的位置属性,并利用定时器来更新元素的位置,实现了物体下落的效果。文章还考虑了速度变化及碰撞反弹的情况。

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

实现自由落体运动需要理解的几个简单属性:

clientHeight:浏览器客户端整体高度

offsetHeight:对象(比如div)的高度

offsetTop:对象离客户端最顶端的距离

 1 <!doctype html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>free_movement</title>  
 6     <style type="text/css">  
 7         #div1{  
 8             position: absolute;  
 9             height: 100px;  
10             width: 100px;  
11             background: red;  
12         }  
13     </style>  
14     <script type="text/javascript">  
15         window.onload=function  () {  
16             var btn=document.getElementById('btn');  
17             var div1=document.getElementById('div1');  
18   
19             var Time=null;  
20             var speed=0;  
21             btn.onclick=function () {  
22                 startMove();  
23             }  
24   
25             function startMove () {  
26                 clearInterval(Time);   //clearTnterval(Time)://防止多次点击事件的产生
27                 Time=setInterval(function(){  
28                     speed+= 3;  
29                     var T = div1.offsetTop + speed;  
30                     if(T > document.documentElement.clientHeight - div1.offsetHeight){  
31                         T = document.documentElement.clientHeight - div1.offsetHeight;  
32                         speed *= -1;  
33                         speed *= 0.75;  
34                     }  
35                     div1.style.top=T+'px';  
36                 }, 30)  
37             }  
38         }  
39     </script>  
40 </head>  
41 <body>  
42     <input type='button' value='开始运动' id="btn">  
43     <div id="div1"></div>  
44 </body>  
45 </html> 

转自: 

javascript---之自由落体运动实现

转载于:https://www.cnblogs.com/guorange/p/7142611.html

实现自由落体的效果,可以使用 Three.js 中的物理引擎 Ammo.js 来模拟重力和碰撞。下面是一个简单的示例代码,实现一个球体自由落体的动画: ```javascript // 创建场景和摄像机 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建球体和材质 const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshBasicMaterial({color: 0xff0000}); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // 创建物理引擎 const physicsWorld = new Ammo.btDiscreteDynamicsWorld(new Ammo.btDefaultCollisionConfiguration(), new Ammo.btDbvtBroadphase(), new Ammo.btSequentialImpulseConstraintSolver(), new Ammo.btDefaultCollisionConfiguration()); physicsWorld.setGravity(new Ammo.btVector3(0, -9.8, 0)); // 设置重力 // 将球体添加到物理引擎中 const mass = 1; const localInertia = new Ammo.btVector3(0, 0, 0); const shape = new Ammo.btSphereShape(1); shape.calculateLocalInertia(mass, localInertia); const transform = new Ammo.btTransform(); transform.setIdentity(); const motionState = new Ammo.btDefaultMotionState(transform); const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, motionState, shape, localInertia); const body = new Ammo.btRigidBody(rbInfo); physicsWorld.addRigidBody(body); // 动画循环 function animate() { requestAnimationFrame(animate); // 模拟物理引擎 physicsWorld.stepSimulation(1 / 60, 10); // 更新球体位置 const transform = new Ammo.btTransform(); body.getMotionState().getWorldTransform(transform); const position = transform.getOrigin(); sphere.position.set(position.x(), position.y(), position.z()); renderer.render(scene, camera); } animate(); ``` 上述代码中,我们使用了 `Ammo.btDiscreteDynamicsWorld` 来创建物理世界,并设置了重力。然后将球体添加到物理引擎中,并使用 `physicsWorld.stepSimulation` 模拟物理引擎的运行。在动画循环中,通过 `body.getMotionState().getWorldTransform` 获取球体的位置,并更新球体的位置。 需要注意的是,为了让物理引擎运行更加稳定,我们需要在每一帧中调用 `physicsWorld.stepSimulation` 函数进行模拟,而不是直接修改球体的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值