JS实现一个物体的自由落体

最新推荐文章于 2022-07-13 08:05:27 发布
最新推荐文章于 2022-07-13 08:05:27 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38289699/article/details/79037255
版权

代码如下

<!DOCTYPE html>  
< html  lang= "zh-cn">  
< head>  
    < meta  charset= "UTF-8">  
    < title>HTML5+CSS3练习</ title>  
   
</ head>  
< body>  
   < title></ title>  
< p>横向系数：< input  id= "hp"  type= "text"  value= "0.1" /> (0-1)</ p>  
< p>纵向系数：< input  id= "vp"  type= "text"  value= "0.6" /> (0-1)</ p>  
< p>速度：< input  id= "sp"  type= "text"  value= "30" />(20-1000)  
< input  type= "button"  value= "demo"  onclick= "demo(document.getElementById('hp').value, document.getElementById('vp').value, document.getElementById('sp').value)" /></ p>  
< div  style= "margin-left:600px;">  
    < div  id= "fall"  style= "width:30px; height:30px; background:#f90; position:relative; right:0px; bottom:40px"></ div>  
</ div>  
< script  type= "text/javascript">  
var i  =  null;  
function  demo( hp, vp, sp) {  
     var f =document. getElementById( 'fall');  
        f.style.right = '0px';  
        f.style.bottom = '40px';  
        i && clearInterval(i);  
     var h = 1,v = 1,hp =(hp > 0 &&hp < 1) ?hp : 0.2,vp =(vp > 0 &&vp < 1) ?vp : 0.5,sp =(sp > 20  || sp < 1000) ?sp : 30;  
        i = setInterval( function(){  
             if(f){  
                 var r = parseInt(f.style.right) +h,b = parseInt(f.style.bottom) -v;  
                f.style.right =r + 'px';  
                f.style.bottom =b + 'px';  
                 if(r > 1000) clearInterval(i);  
                 if(b >- 210){  
                    v += 2  
                }  else {  
                    h =(v > 0) ?v *hp : 0;  
                    v *=(v > 0) ?- 1 *vp : 0  
                }  
            }  
        },sp);  
    }  
</ script>  
      
</ body>  
</ html> 

SnowAnna
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js模仿物理中的自由落体现象
chenke__hxx的专栏
10-23 1245
前几天在一个社区中无意看到，有人在写自由落体运动，当时顺手把他的代码copy下来，运行一下，发现没有成功，于是就有了这篇博客！ 主要是由一个自由落体函数freeFall()，传入参数element，height，speed，即落体元素，高度，水平速度 /*自由落到函数 *param height : 初始高度; *param speed : 初始速度; *
Javascript模拟物体自由落体、反弹运动
08-13
这个是我闲着无聊的时候写的。 用javascript实现。 模拟小物体从高空落下，加速，撞击地面，反弹，减速等的一系列过程。 供javascript初学者学习参考。 希望大家多多批评指正，共同进步。
js实现自由落体
weixin_30838873的博客
07-09 446
实现自由落体运动需要理解的几个简单属性： clientHeight：浏览器客户端整体高度 offsetHeight：对象（比如div）的高度 offsetTop：对象离客户端最顶端的距离 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset=...
javascript异步编程系列【二】----自由落体
weixin_33963594的博客
08-19 133
重力场：地球重力作用的空间。在该空间中，每一点都有惟一的一个重力矢量与之相对应。 各种网络游戏，不管是3D的还是第一视角的，或者横版游戏（如冒险岛），模拟一个重力场是必须的。 先回顾一下谷歌在牛顿诞辰，logo换成了自由落体的苹果。 &lt;html&gt; &lt;script language="javascript"&gt;     var h = 0, v = 1;  ...
JavaScript模拟自由落体
weixin_33995481的博客
08-28 275
1.效果图2.实现分析利用Canvas画圆球、地面；1.下落过程物理知识回顾，物体下落过程（不计损耗）由重力势能转换成动能重力势能 Ep = mgh动能 　　Ek = (1/2)mv^2速度右0增加至gt此间需要计算浏览器每次渲染的圆球y坐标y = (1/2)gt^22.反弹过程动能转化成重力势能速度是逐渐减少直至为0本打算设置 y = (1/2)g(t-t1)^2，t1为下落或者反弹消耗的时长但...
JavaScript模拟实现自由落体效果
10-18
在本文中，我们将探讨如何使用JavaScript来模拟实现一个自由落体效果，这个效果通常会在游戏或动画中用到。自由落体是指物体在只受重力作用的情况下垂直下落的过程。在JavaScript中，我们可以通过结合基本的物理原理...
js前端画布实现动画小球自由落体
05-05
本示例中，我们探讨的主题是“js前端画布实现动画小球自由落体”，这涉及到JavaScript基础、HTML5 Canvas API以及基本的物理学概念。 首先，我们需要一个HTML文件作为容器来展示我们的动画。在这个例子中，`动画....
JavaScript实现自由落体
08-12
在本主题“JavaScript实现自由落体”中，我们将深入探讨如何利用JavaScript模拟物理学中的自由落体运动，创建出一个视觉上逼真的效果。这个话题涉及到的知识点包括基本的JavaScript编程、DOM操作、定时器、CSS动画...
jQuery模拟物体自由落体运动(附演示与demo源码下载)
10-22
标题中的“jQuery模拟物体自由落体运动”是指使用JavaScript库jQuery来实现一个视觉效果，模拟现实世界中的物体在重力作用下的自由落体运动。这个模拟不仅包括物体下落的过程，还包括动能损耗导致的物体向上反弹的...
Javascript模拟自由落体运动
genius760的专栏
08-13 337
本Demo演示了javascript模拟物体自由落体运动。
js+html5实现的自由落体运动效果代码
10-22
主要介绍了js+html5实现的自由落体运动效果,通过JavaScript结合html5元素调用时间函数实时计算实现物体自由下落及动能损耗的效果,需要的朋友可以参考下
js 实现拖动效果 __按回车键，方块还能做自由落体运动。
yiluoAK_47的专栏
04-26 1289
jQuery Div拖动+键盘控制综合效果 预览时看不到效果，刷新一下即可 var msgObj = document.getElementById('text'); var posx = 0; var posy = 0; var moveable = false; var MouseDownEvent = document.onmousedown; var
js实现倒计时+div下落
bakan66065136006的博客
09-22 334
全部由js动态生成结点，body内无内容 <style> #count{ position: absolute; text-align: center; width: 240px; height: 260px; top: 230px; left: 750...
html画布实现小球沿直线下落,js+html5实现的自由落体运动效果代码
weixin_33305027的博客
06-01 463
本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">canvas自由落体var canvasheight = 500;var canvaswidth = 500;var g = 9.8;var plu...
小球自由落体运动粗略模拟
a602482790的博客
06-04 1402
&lt;!DOCTYPE html&gt;  &lt;html&gt;      &lt;head&gt;          &lt;meta charset="UTF-8"&gt;          &lt;title&gt;弹性运动&lt;/title&gt;          &lt;style type="text/css"&gt;         
使用JavaScript实现小球自由落体运动
qq_64314976的博客
07-13 628
使用JavaScript实现小球自由落体运动
javascript---之自由落体运动实现
zz410675629的专栏
05-31 2484
实现自由落体运动需要理解的几个简单属性： clientHeight：浏览器客户端整体高度 offsetHeight：对象（比如div）的高度 offsetTop：对象离客户端最顶端的距离 简单demo如下： free_movement #div1{ position: absolute; height: 100px; width: 100
js模拟小球自由落体运动
qq_41399016的博客
11-02 1083
<script> (function () { //创建小球 var ball = document.createElement("div"); //设置小球的样式 ball.style.width = "100px"; ball.style.height = "100px"; ball.style.backgroundColor = "#ff6700"; ball.style
小球自由落体动态模拟（Position Based Simulation）
weixin_30781775的博客
08-16 477
　　在过去的几十年中，基于物理的三维物体动态模拟成为了计算机图形学的研究热点，其中最常见的方法是基于力（force-based）的模拟方法，比如弹簧质点模型（http://www.cnblogs.com/shushen/p/5473264.html），它把物体抽象成一系列质点以及连接这些质点的弹簧，然后通过离散化牛顿运动定律来模拟物体的运动情况。最近，基于位置的模拟方法在刚体、弹性体以及流体模拟方...
qt/c++ Box2D结合QGraphicsItem 实现物体自由落体
最新发布
01-25
根据引用内容，可以使用Qt和Box2D结合QGraphicsItem来实现物体的自由落体效果。下面是一个示例代码： ```cpp #include <QApplication> #include <QGraphicsScene> #include <QGraphicsView> #include <QTimer> #include <Box2D/Box2D.h> class MyContactListener : public b2ContactListener { void BeginContact(b2Contact* contact) { // 处理碰撞开始事件 } void EndContact(b2Contact* contact) { // 处理碰撞结束事件 } }; int main(int argc, char *argv[]) { QApplication a(argc, argv); // 创建场景和视图 QGraphicsScene scene; QGraphicsView view(&scene); view.setRenderHint(QPainter::Antialiasing); view.setSceneRect(-200, -200, 400, 400); view.show(); // 创建物理世界 b2Vec2 gravity(0.0f, 9.8f); b2World world(gravity); MyContactListener contactListener; world.SetContactListener(&contactListener); // 创建地面 b2BodyDef groundBodyDef; groundBodyDef.position.Set(0.0f, 200.0f); b2Body* groundBody = world.CreateBody(&groundBodyDef); b2PolygonShape groundBox; groundBox.SetAsBox(200.0f, 10.0f); groundBody->CreateFixture(&groundBox, 0.0f); // 创建物体 b2BodyDef bodyDef; bodyDef.type = b2_dynamicBody; bodyDef.position.Set(0.0f, -100.0f); b2Body* body = world.CreateBody(&bodyDef); b2CircleShape dynamicCircle; dynamicCircle.m_radius = 10.0f; b2FixtureDef fixtureDef; fixtureDef.shape = &dynamicCircle; fixtureDef.density = 1.0f; fixtureDef.friction = 0.3f; body->CreateFixture(&fixtureDef); // 创建定时器，模拟物理世界 QTimer timer; QObject::connect(&timer, &QTimer::timeout, [&]() { world.Step(1.0f / 60.0f, 6, 2); b2Vec2 position = body->GetPosition(); qreal x = position.x * 10.0; qreal y = -position.y * 10.0; body->SetTransform(b2Vec2(x, y), 0.0f); body->SetLinearVelocity(b2Vec2(0.0f, 0.0f)); body->SetAngularVelocity(0.0f); scene.clear(); scene.addEllipse(x - 10, y - 10, 20, 20); }); timer.start(16); return a.exec(); } ``` 这段代码使用了Qt的QGraphicsScene和QGraphicsView来显示物体的自由落体效果。通过Box2D物理引擎模拟物体的运动，并在每次模拟后更新物体在场景中的位置。在这个例子中，物体是一个圆形，它会从初始位置自由落体，并在与地面碰撞后反弹。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值