搞来两端模拟自由落体与抛物运动的JS玩

这里有更详细的讲解呵呵

http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html

自由落体

<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>

提示:你可以先修改部分代码再运行。

抛物运动

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<style type="text/css">

*{padding:0;margin:0;}

body{font-size:13px;padding:10px;}

p{margin:2px;}

.wrap{position:relative;width:1000px;height:550px;margin:0 auto;border:1px solid #ccc;margin-top:50px;}

#fall{width:20px;font-size:1px;height:20px;background:#000;position:absolute;top:0;left:0;}

</style>

</head>

<body>

<h3>模拟重力状态下的抛物运动(假使1px==1mm)</h3>

<p>横向初速度:<input id="Vx" type="text" value="2" />px/ms</p>

<p>纵向初速度:<input id="Vy" type="text" value="-2" />px/ms</p>

<p>重力加速度:<input id="a" type="text" value="0.0098" />px/平方ms</p>

<p>(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了。)</p>

<p>单位时间:<input id="t" type="text" value="10" />(记录运动的时间间隔)

<p><input type="button" value="演示" onclick="demo(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"/></p>

<body>

<div class="wrap">

<div id="fall">o</div>

</div>

</body>

<script type="text/javascript">

function demo(x,y,a,t) {

var f=document.getElementById('fall');

var Vx=parseInt(x),

Vy=parseInt(y),

g=a,

t=parseInt(t),

h=0,l=0,Sx=0,Sy=0;

var i=setInterval(function(){

if(f){

Sx+=Vx*t;

l=Sx;

Vy+=g*t;

h+=Vy*t;

f.style.left=l+'px';

f.style.top=h+'px';

if(h>500||l>900)clearInterval(i);

}

},t);

}

</script>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

iOS音视频播放(Audio Unit播放音频+OpenGL ES绘制视频)

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

57390
来自专栏佳爷的后花媛

如何自制条形码扫描器

在文章之前要先感谢我的老师黄小平先生,在制作这个扫描器期间,给了我们很大的帮助和指导. 先说下这个条形码扫描器的预期功能: 如名称所示,主要达到的功能就是实...

58030
来自专栏生信技能树

【Python版】 极简单方式实现 Circos

很高兴再次见到生信技能树的粉丝们,我是技能树VIP小编tsznxx,目前在安德森肿瘤医院工作,记忆力好的小朋友应该对我之前的教程有印象: 用GenePred注释...

535100
来自专栏JackeyGao的博客

关于此博客我是H1标题

此博客为静态博客, 直接对 markdown 文件生成的 html 静态文件。 请参考 script 目录的脚本。

9620
来自专栏知晓程序

举报!这里有人,在光天化日之下聚众撸猫

但并不是每个人都有机会成为「猫奴」。这时候,你需要 「吸猫君」 ,来帮你开启「云吸猫」的生活。

9720
来自专栏知晓程序

现实生活压力大,不如用这 4 款小程序去二次元世界找「老婆」

纸片人那么好那么可爱,画出来的场景那么美那么酷炫,低等维度像一个梦,梦里什么都有。

12150
来自专栏嵌入式程序猿

博世小功率变频器拆解

变频器在工业生产中应用非常的广泛,橡胶行业的轮胎产线就有很多,而且轮胎产线环境恶劣,灰尘大,今天帮朋友修理一台力士乐的变频器,因为长期使用加上环境恶劣,变频器里...

53020
来自专栏疯狂的小程序

微信小程序「学科排名」发布了

前几天,教育部公布了《全国第四轮学科评估结果》,在手机上看起来不太方便,于是本人就“撸起袖子加油干”,写了一套脚本把数据收集了一下,做成了微信小程序,叫「学科排...

27690
来自专栏hotqin888的专栏

golang知识图谱NLP实战第二节——解析依存句法分析结果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

28840
来自专栏智能大石头

MF前传——探索者一号简介

    MF让我们这些C#程序员能够把手伸到嵌入式行业,大大增强我们在各种项目中的竞争能力。无奈国内研究MF的人少之又少,为了加速MF技术的研究,我们团队采用少...

22090

扫码关注云+社区

领取腾讯云代金券