js写一个行星运转的效果

小鱼儿 2021-09-29 11:30 256阅读 0赞

以太阳系为例：  
以太阳为中心点，水金木土地火天海依次围绕着太阳做圆周运动（嗯。。。假设为圆周运动吧）。以太阳为圆心点，所以在求行星做圆周运动时的半径就是行星的圆心点到太阳的圆心点，我们可以计算出太阳和行星的圆心点，我们可以通过函数获得行星和太阳的left和top值，left和top值在加上盒子本身的宽度。得到这些数据后我们就可以通过三角函数来算出行星运动的轨迹了，完成这些工作后我们就可以写代码了。

首先我们写一个静态的布局，用到HTML和CSS，以下是HTML和CSS的代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>太阳系</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                /* background-image: url(img/timg.jpg ); */
                height: 2000px;
            }
    
            /* 太阳 */
            #sunId {
                left: 700px;
                top: 700px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                position: absolute;
            }
    
            #sunId img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
    
            /* 水星 */
            #mercuryId {
                position: absolute;
                left: 745px;
                top: 660px;
                width: 10px;
                height: 10px;
                background-color: gray;
                border-radius: 50%;
            }
    
            #mercuryB {
                position: absolute;
                left: 665px;
                top: 665px;
                width: 169px;
                height: 169px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 金星 */
            #venusId {
                position: absolute;
                left: 740px;
                top: 600px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #venusId img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #venusB {
                position: absolute;
                left: 610px;
                top: 610px;
                width: 280px;
                height: 280px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 地球 */
            #earthId {
                position: absolute;
                left: 740px;
                top: 520px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #earthId img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #earthB {
                position: absolute;
                left: 530px;
                top: 530px;
                width: 440px;
                height: 440px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 火星 */
            #marsId {
                position: absolute;
                left: 742px;
                top: 432px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
            }
    
            #marsId img {
                width: 16px;
                height: 16px;
                border-radius: 50%;
            }
    
            #marsB {
                position: absolute;
                left: 440px;
                top: 440px;
                width: 620px;
                height: 620px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 木星 */
            #jupiterId {
                position: absolute;
                left: 730px;
                top: 360px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #jupiterId img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #jupiterB {
                position: absolute;
                left: 380px;
                top: 380px;
                width: 740px;
                height: 740px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 土星 */
            #staurnId {
                position: absolute;
                left: 720px;
                top: 300px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
    
            #staurnId img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
    
            #staurnB {
                position: absolute;
                left: 330px;
                top: 330px;
                width: 840px;
                height: 840px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
    
            /* 天王星 */
            #uranusId {
                position: absolute;
                left: 730px;
                top: 240px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #uranusId img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #uranusB {
                position: absolute;
                left: 260px;
                top: 260px;
                width: 980px;
                height: 980px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
    
            /* 海王星 */
            #neptuneId {
                position: absolute;
                left: 730px;
                top: 180px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #neptuneId img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
    
            #neptuneB {
                position: absolute;
                left: 200px;
                top: 200px;
                width: 1100px;
                height: 1100px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }
        </style>
    </head>
    
    <body>
        <input type="button" value="测试" id="btn">
        <div id="sunId">
            <img src="imgs/0.jpg" alt="">
        </div>
        <div id="mercuryB">
        </div>
        <div id="mercuryId">
        </div>
        <div id="venusB"></div>
        <div id="venusId">
            <img src="imgs/1.jpg" alt="">
        </div>
        <div id="earthB"></div>
        <div id="earthId">
            <img src="imgs/2.jpg" alt="">
        </div>
        <div id="marsB"></div>
        <div id="marsId">
            <img src="imgs/3.jpg" alt="">
        </div>
        <div id="jupiterB"></div>
        <div id="jupiterId">
            <img src="imgs/4.jpg" alt="">
        </div>
        <div id="staurnB"></div>
        <div id="staurnId">
            <img src="imgs/1.gif" alt="">
        </div>
        <div id="uranusB"></div>
        <div id="uranusId">
            <img src="imgs/5.jpg" alt="">
        </div>
        <div id="neptuneB"></div>
        <div id="neptuneId">
            <img src="imgs/6.jpg" alt="">
        </div>
    </body>
    
    </html>

嗯，可以看到这个布局其实不是很好，又长又乱，难理解,我们拿出一个行星的代码来看一下：

<div id="venusB"></div>
        <div id="venusId">
            <img src="imgs/1.jpg" alt="">
    </div>
    
    
    
    
     /* 金星 */
            #venusId {
                position: absolute;
                left: 740px;
                top: 600px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #venusId img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
    
            #venusB {
                position: absolute;
                left: 610px;
                top: 610px;
                width: 280px;
                height: 280px;
                border-radius: 50%;
                border: 1px solid #cccccc;
            }

这样看着好像清楚点了

给它加一下js让它转起来

// 金星
        function venus() {
            let degree = 0;
            let startLeft = 750;
            let startTop = 610;
            let r = 140;
            let myTimer = setInterval(() => {
                // 一、数据修改
                //1.计算数据
                degree++;
                let hu = Math.PI / 180 * degree;
    
                let left1 = startLeft + r * Math.sin(hu);
                let top1 = startTop + (r - r * Math.cos(hu));
    
                //2.边界判断
                if (degree % 360 == 0) {
                    degree = 0;
                }
    
    
                // 二、修改外观
                $$("#venusId").style.left = (left1 - 10) + "px";
                $$("#venusId").style.top = (top1 - 10) + "px";
            }, 10);
        }

其实所有的运动我们都可以分为两大部分：  
一、数据修改  
1.数据计算  
2.边界处理  
二、修改外观

只要牢记这几步，运动函数的核心就掌握了

然后我们给所有的行星都加上运动函数，让它们转起来  
js代码如下：

好长的代码，好多都是重复使用的，如果可以封装一下使用起来就方便多了。

还未解决的问题，地球的卫星月亮的运动，由于地球在自转的同时还在公转，它的left和top时刻都在变化，所以没有做出来。

好了，我说一下我写的时候遇到的一些难点吧：  
1.计算太阳和行星的圆心  
2.用三角函数计算行星的运动轨迹，就是动态的left和top  
3.行星的轨迹处理

可能是我笨吧，搞了好久才出来，这里有个大胆的想法，我们把这个运动函数做成多属性的封装，再做行星的运转时就可以直接用函数调用了，通过传不同的属性值就可以做出来，又简单还实用。

假如有大佬看到了可以帮帮我喔，谢谢。（救救这个可怜的猴吧）。

好了，最后我们来看一下效果吧

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]  
没有加背景图，看着好丑。  
月球做不出来太遗憾了。  
[代码可下载，点击即可][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/dd1cb57dd8e04c309a3fc4263c3b3c30.png
[Link 1]: https://download.csdn.net/download/qq_39200185/11329544