用javascript伪造太阳系模型系统

本文主要是介绍用javascript伪造太阳系模型系统，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这个东西，是我在读在职研的课堂上无聊的时候随便弄的，实现了椭圆和圆形的轨道运转。这些东西吧，其实都是很简单的，在游戏领域，轨道运动是很有意义的，我就顺便把代码po出来，做备忘吧。

由于是无聊时的即兴之作，并没有考虑性能优化和使用html5的canvas或者svg，只是用了最简单的div而已，要想用html5请自行实现了。

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body style="width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden; background-color: rgb(42,42,42);"></body>
<script type="text/javascript">
function id(x){return document.getElementById(x);}function print(x){console.log(x);}function random(lower,upper){return lower+Math.floor(Math.random()*(upper-lower+1));}Array.prototype.filter = function(){var tmp = [];for(var i=0;i<this.length;i++){if(typeof(this[i]) !== 'undefined'){tmp.push(this[i]);}}return tmp;
}var w = window.innerWidth;
var h = window.innerHeight;
var Planets = [];
function Planet(x,y,radius,color){var v = this;v.x = x;v.y = y;v.color = color || 'skyblue';v.radius = radius || 10;v.rotateangle = 0;v.body = document.createElement('div');v.body.style = "position:absolute;top:"+ (v.y-v.radius) +"px;left:"+ (v.x-v.radius) +"px;background-color:"+v.color+";border-radius:" +(v.radius*2)+"px;width:"+(v.radius*2)+"px;height:"+(v.radius*2)+"px;";document.body.appendChild(v.body);v.runType = false;v.target = null;v.rotateradius = null;v.longradius = null;v.shortradius = null;v.offsetx = null;v.offsety = null;v.anglespeed = 0;v.isRotated = false;v.rotatetheta = null;v.rotateanglespeed = 0;v.strange = false;var vx,vy;v.update = function(lerp){if(v.rotatetheta>Math.PI*2) v.rotatetheta -= Math.PI*2;if(v.runType == "circle"){if(!v.rotateangle){v.rotateangle = Math.random()*Math.PI*2;}v.rotateangle += v.anglespeed/10000 * lerp;if(v.rotateangle>Math.PI*2) v.rotateangle -= Math.PI*2;v.x =  Math.cos(v.rotateangle)*v.rotateradius;v.y =  Math.sin(v.rotateangle)*v.rotateradius;}else if(v.runType == "eclipse"){if(!v.rotateangle){v.rotateangle = Math.random()*Math.PI*2;}v.rotateangle += v.anglespeed/10000 * lerp;if(v.rotateangle>Math.PI*2) v.rotateangle -= Math.PI*2;v.x = Math.cos(v.rotateangle)*v.longradius + v.offsetx;v.y = Math.sin(v.rotateangle)*v.shortradius + v.offsety;}if(v.isRotated){v.rotatetheta += v.rotateanglespeed/10000 * lerp;if (v.strange){v.x =  v.x*Math.cos(v.rotatetheta) - v.y*Math.sin(v.rotatetheta);v.y =  v.x*Math.sin(v.rotatetheta) + v.y*Math.cos(v.rotatetheta);}else{vx = v.x;vy = v.y; //如果不用两个vx vy临时变量保存的话，则和上面的圆形环绕或椭圆环绕连用的时候会出现诡异的变扁现象，相当有立体感v.x =  vx*Math.cos(v.rotatetheta) - vy*Math.sin(v.rotatetheta);v.y =  vx*Math.sin(v.rotatetheta) + vy*Math.cos(v.rotatetheta);}}if(v.target){v.x += v.target.x;v.y += v.target.y;}v.body.style.left = (v.x-v.radius) + "px";v.body.style.top = (v.y-v.radius) + "px";}v.circleRun = function(target,rotateradius,anglespeed){v.runType = "circle";v.target = target;v.rotateradius = rotateradius;v.anglespeed = anglespeed * (Math.random()>0.5?-1:1);}v.eclipseRun = function(target,longradius,shortradius,offsetx,offsety,anglespeed){v.runType = "eclipse";v.target = target;v.longradius = longradius;v.shortradius = shortradius;v.offsetx = offsetx;v.offsety = offsety;v.anglespeed = anglespeed * (Math.random()>0.5?-1:1);}v.rotate = function(target,rotatetheta,rotateanglespeed,strange){v.isRotated = true;v.target = target;v.rotatetheta = rotatetheta;v.rotateanglespeed = rotateanglespeed;v.strange = strange;}v.suicide = function(){document.body.removeChild(v.avator);delete v;}Planets.push(v);
}var center = new Planet(w/2,h/2,1,'black');for(var i=0;i<1000;i++){var star = new Planet(0,0,0.5,"white");star.eclipseRun(center,random(5,10)/10*w,Math.random()*h,0,0,-1);star.rotate(center,0,-Math.random());
}var sun = new Planet(w/2,h/2,50,'orange');
sun.circleRun(center,8,10);var mercury = new Planet(0,0,7,'blue');
var venus = new Planet(0,0,8,'rgb(255,100,0)');
var earth = new Planet(0,0,10,"deepskyblue");var moon = new Planet(0,0,5,'yellow');
var mars = new Planet(0,0,9,'red');
var jupter = new Planet(0,0,24,'rgb(243,174,129)');
var saturn = new Planet(0,0,22,'rgb(191,149,21)');
var uranus = new Planet(0,0,20,'deepskyblue');
var neptune = new Planet(0,0,17,'rgb(16,201,175)');
var pluto = new Planet(0,0,8,'rgb(112,146,190)');mercury.circleRun(sun,80,9.4);
venus.circleRun(sun,110,8);
earth.circleRun(sun,160,4.8);moon.circleRun(earth,20,-15.2);
mars.circleRun(sun,200,5.4);
jupter.circleRun(sun,270,5.1);
saturn.circleRun(sun,340,4.8);
uranus.circleRun(sun,400,5.2);
neptune.circleRun(sun,450,4.6);
pluto.circleRun(sun,520,5.21);for(var i=0;i<50;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(jupter,Math.random()*2+40,Math.random()*2,0,0,10);star.rotate(jupter,0,2);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(saturn,Math.random()*2+30,Math.random()*2,0,0,10);star.rotate(saturn,2.5,1);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"rgb(209,238,245)");star.eclipseRun(uranus,Math.random()*2+30,Math.random()*2,0,0,10);star.rotate(uranus,2.5,0.1);
}for(var i=0;i<50;i++){var star = new Planet(0,0,1,"rgb(192,250,221)");star.eclipseRun(neptune,Math.random()*2+25,Math.random()*2,0,0,10);star.rotate(neptune,-2.5,-0.1);
}var halley = new Planet(0,0,5,"white");
halley.eclipseRun(sun,460,130,-150,0,20);
halley.rotate(sun,Math.random()*5,Math.random()*1);for(var i=0;i<100;i++){var star = new Planet(0,0,1,"white");star.eclipseRun(sun,Math.random()*10+230,Math.random()*10+200,0,0,10);star.rotate(sun,0,2,true);
}var lastTime = new Date();
var thisTime = lastTime;
var lerp = 0;
function update(){thisTime = new Date();lerp = thisTime - lastTime;for(var i=0,j=Planets.length;i<j;i++){Planets[i].update(lerp);}requestAnimationFrame(update);lastTime = thisTime;
}update();
</script>
</html>