當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用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>?
?
?
總結
以上是生活随笔為你收集整理的用javascript伪造太阳系模型系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蛋疼的配置go opengl的记录 ru
- 下一篇： 用javascript打造一个简单的小人