引力环境下的撞击、摩擦、落体运动的JavaScript模拟

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta charset="utf-8" />
<title>模拟引力环境下的撞击、摩擦、落体运动</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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

引力环境下的撞击、摩擦、落体运动的JavaScript模拟

分类

表格图层

描述

Javascript模拟引力环境下的撞击、摩擦、落体运动，摩擦，碰撞的消耗并没有按公式进行计算，纯属于杜撰，是不符合规律的，仅仅是模拟，希望同行们多切磋，共同探讨。