我这个三体实在一个平面内的，真三体没时间做了
B站视频讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三体</title>
<script src="jquery1.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
#earth{width:24px;height:24px;background: orange; left: 0; position: absolute; border-radius:50%;z-index: -9;}
#moon{width:14px; height:14px; border-radius:50%; background:red; position:absolute;}
#sun{width: 24px;height:24px;background: purple;border-radius: 12px;position: absolute;left: 200px;bottom: 0; }
.box{position:relative;top:525px; left:50%; display: table;}
.line1{width:600px;height:2px; background:red; position:absolute;left: 2px;top:-1px;}
.oxy{position: absolute;left: 0;right: 0; width: 4px;height: 4px;background: seagreen;margin-top: -2px;margin-left: -2px;z-index: 999;}
</style>
<body>
<div class="box">
<div id='earth'></div>
<div class="oxy"></div>
<div class="line1"></div>
<div id='moon'></div>
<div id='sun'></div>
<div id='gj'></div>
<div id='gje'></div>
<div id='gjs'></div>
</div>
<script>
var earth=document.getElementById('earth');
var moon=document.getElementById('moon');
var sun=document.getElementById('sun');
var gj=document.getElementById('gj'); //月亮的轨迹容器div
var gje=document.getElementById('gje'); //地球的轨迹容器div
var gjs=document.getElementById('gjs'); //太阳的轨迹容器div
var count=0; //计步器，用于计算走几个dt画一次轨迹点
var G=100000; //万有引力常数
var mm=2;//月亮的质量
var me=10;//地球的质量
var ms=12;//太阳的质量
var xm=200; //月亮的x轴坐标
var ym=-346; //月亮的y轴坐标
var xe=0; //地球的x坐标
var ye=0; //地球的y坐标
var xs=400; //太阳的x轴坐标
var ys=0; //太阳的y轴坐标
var axm=0; //月亮在x轴方向的初始加速度
var aym=0; //月亮在y轴方向的初始加速度
var axe=0; //地球在x轴方向的初始加速度
var aye=0; //地球在y轴方向的初始加速度
var axs=0; //太阳在x轴方向的初始加速度
var ays=0; //太阳在y轴方向的初始加速度
var vxm=-46; //月亮在x轴方向的初始速度分量
var vym=0; //月亮在y轴方向的初始速度分量
var vxe=0; //地球在x轴方向的初始速度分量
var vye=36 ; //地球在y轴方向的初始速度分量
var vxs=0; //太阳在x轴方向的初始速度分量
var vys=-36; //太阳在y轴方向的初始速度分量
var dt=10; //取的微分的间隔时间，在此期间把万有引力看作近似不变，以得到近似轨迹;单位是毫秒
var split=100; //把dt再平均分多少份，以用更短的时间求更精确的值
moon.style.left=xm+'px'; //给月亮的x坐标赋值，浏览器显示用
moon.style.bottom=ym+'px'; //给月亮的y坐标赋值，浏览器显示用
earth.style.left=xe+'px'; //给月亮的x坐标赋值，浏览器显示用
earth.style.bottom=ye+'px'; //给月亮的y坐标赋值，浏览器显示用
sun.style.left=xs+'px'; //给太阳的x坐标赋值，浏览器显示用
sun.style.bottom=ys+'px'; //给太阳的y坐标赋值，浏览器显示用
setInterval(move,dt); //开定时器，动起来
function move(){
var st=dt/(split*1000);//毫秒换算成秒的单位
for(i=0;i<split;i++){
xm=xm+vxm*st;
ym=ym+vym*st;
xe=xe+vxe*st;
ye=ye+vye*st;
xs=xs+vxs*st;
ys=ys+vys*st;
rme=Math.sqrt((xm-xe)*(xm-xe)+(ym-ye)*(ym-ye)); //地球和月亮距离
rse=Math.sqrt((xs-xe)*(xs-xe)+(ys-ye)*(ys-ye)); //地球和太阳距离
rsm=Math.sqrt((xm-xs)*(xm-xs)+(ym-ys)*(ym-ys)); //太阳和月亮距离
axm=(-(xm-xe)*me/(rme*rme*rme))*G+(-(xm-xs)*ms/(rsm*rsm*rsm))*G;
aym=(-(ym-ye)*me/(rme*rme*rme))*G+(-(ym-ys)*ms/(rsm*rsm*rsm))*G;
axe=((xm-xe)*mm/(rme*rme*rme))*G+((xs-xe)*ms/(rse*rse*rse))*G;
aye=((ym-ye)*mm/(rme*rme*rme))*G+((ys-ye)*ms/(rse*rse*rse))*G;
axs=((xm-xs)*mm/(rsm*rsm*rsm))*G+(-(xs-xe)*me/(rse*rse*rse))*G;
ays=((ym-ys)*mm/(rsm*rsm*rsm))*G+(-(ys-ye)*me/(rse*rse*rse))*G;
vxm=vxm+axm*st;
vym=vym+aym*st;
vxe=vxe+axe*st;
vye=vye+aye*st;
vxs=vxs+axs*st;
vys=vys+ays*st;
}
moon.style.left=xm+'px';
moon.style.bottom=ym+'px';
earth.style.left=xe+'px';
earth.style.bottom=ye+'px';
sun.style.left=xs+'px';
sun.style.bottom=ys+'px';
//添加轨迹元素
count++;
var obj='<div style="width:4px;z-index:-1; height:4px;position:absolute;background:red;left:'+xm+'px;bottom:'+ym+'px;"></div>';
var obje='<div style="width:4px;z-index:-1; height:4px;position:absolute;background:orange;left:'+xe+'px;bottom:'+ye+'px;"></div>';
var objs='<div style="width:4px;z-index:-1; height:4px;position:absolute;background:purple;left:'+xs+'px;bottom:'+ys+'px;"></div>';
if(count%5==0){
gj.innerHTML+=obj;
gje.innerHTML+=obje;
gjs.innerHTML+=objs;
}
}
</script>
</body>
</html>
Top comments (0)