js模拟引力环境下的撞击、摩擦、落体运动可拖拽

发布时间：2018-09-07 14:37:16 所属栏目：运营来源：站长网

导读：Java script模仿引力情形下的撞击、摩擦、落体行为，摩擦，碰撞的耗损并没有按公式举办计较，纯属于杜撰，是不切合纪律的，仅仅是模仿，但愿偕行们多商议，配合切磋。演示结果如下： htmlheadmeta charset=gbk /title模仿引力情形下的撞击、摩擦、落体

　　Javascript模仿引力情形下的撞击、摩擦、落体行为，摩擦，碰撞的耗损并没有按公式举办计较，纯属于杜撰，是不切合纪律的，仅仅是模仿，但愿偕行们多商议，配合切磋。

　　演示结果如下：

<html> <head> <meta charset="gbk" /> <title>模仿引力情形下的撞击、摩擦、落体行为 - 猛火学院 Liehuo.Net</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} p{margin:2px;font-size:12px;} label{display:inline-block;width:80px;text-align:right;} input{width:80px;} #fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:50px;left:400px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> </head> <body> <p><label>横向初速率：</label><input id="Vx" type="text" value="3" />px/ms</p> <p><label>纵向初速率：</label><input id="Vy" type="text" value="0" />px/ms</p> <p><label>重力加快度：</label><input id="a" type="text" value="0.01" />px/平方ms</p> <p><label>单元时刻：</label><input id="t" type="text" value="10" />（记录行为的时距离断） <p><button type="button" onclick="demo()">演示</button> <button type="button" onclick="document.location.reload()">重置(可拖动安排)</button></p> <div id="fall" onmousedown='drag(this,event)'>o</div> </body> <script type="text/javascript"> var $id=function(o) { return document.getElementById(o) || o; } var demo=function() { var x=$id('Vx').value, y=$id('Vy').value, a=$id('a').value, t=$id('t').value; shoot(x,y,a,t); } var shoot=function(x,y,a,t) { if(i) {alert(1);clearInterval(i)}; var f=document.getElementById('fall'); var Vx=parseFloat(x), Vy=parseFloat(y), g=parseFloat(a), h=f.offsetTop, Sx=f.offsetLeft, l=0, t=parseInt(t); var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; if(h>=document.documentElement.offsetHeight-f.offsetHeight) { //底部 h=document.documentElement.offsetHeight-f.offsetHeight; Vx=(Math.abs(Vx)-0.1 < 0) ? 0 : Vx/Math.abs(Vx) * (Math.abs(Vx)-0.1) //摩擦耗损x速率 Vy=(Math.abs(Vy)-0.8 < 0) ? 0 : -(Math.abs(Vy)-0.8); //撞击耗损y速率 if(Math.abs(Vy)==0 && Math.abs(Vx)==0 ) {clearInterval(i);} //x,y速率为0时，clear } if(l<0 || l>document.documentElement.offsetWidth-f.offsetWidth) { //阁下两侧 Sx=(l<0) ? 0 : document.documentElement.offsetWidth-f.offsetWidth; Vx=(Math.abs(Vx)-0.2 < 0) ? 0 : -Vx/Math.abs(Vx) * (Math.abs(Vx)-0.2) //撞击耗损x速率 } f.style.left=l+'px'; f.style.top=h+'px'; } },t); }; var drag=function(o,e){ //拖曳位置，与行为模仿无关 var e = e ? e : window.event; if(!window.event) {e.preventDefault();} var tX=o.offsetLeft, tY=o.offsetTop, dx=e.clientX, dy=e.clientY; document.onmousemove=function(e){ var e = e ? e : window.event; o.style.left=tX+e.clientX-dx+"px"; o.style.top=tY+e.clientY-dy+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要

js模拟引力环境下的撞击、摩擦、落体运动 可拖拽

js模拟引力环境下的撞击、摩擦、落体运动可拖拽