太陽系の周期を模倣したものです。ChatGPT 太陽系のシュミレーションを作ってもらいました。

太陽系シミュレーション

<div id="title">
    🌌 太陽系シミュレーション
</div>

<div id="info">

    ☀️ 太陽<br>
    ☿ 水星<br>
    ♀ 金星<br>
    🌍 地球<br>
    ♂ 火星<br>
    ♃ 木星<br>
    🪐 土星<br>
    ♅ 天王星<br>
    ♆ 海王星

</div>


<div id="system">

    <div class="sun"></div>


    <!-- 軌道 -->

    <div
        class="orbit"
        style="width:140px;height:140px">
    </div>

    <div
        class="orbit"
        style="width:200px;height:200px">
    </div>

    <div
        class="orbit"
        style="width:280px;height:280px">
    </div>

    <div
        class="orbit"
        style="width:360px;height:360px">
    </div>

    <div
        class="orbit"
        style="width:500px;height:500px">
    </div>

    <div
        class="orbit"
        style="width:650px;height:650px">
    </div>

    <div
        class="orbit"
        style="width:800px;height:800px">
    </div>

    <div
        class="orbit"
        style="width:950px;height:950px">
    </div>


    <!-- 惑星 -->

    <div id="mercury"
         class="planet"
         data-name="水星">
    </div>

    <div id="venus"
         class="planet"
         data-name="金星">
    </div>

    <div id="earth"
         class="planet"
         data-name="地球">
    </div>

    <div id="moon">
    </div>

    <div id="mars"
         class="planet"
         data-name="火星">
    </div>

    <div id="jupiter"
         class="planet"
         data-name="木星">
    </div>

    <div id="saturn"
         class="planet"
         data-name="土星">
    </div>

    <div id="uranus"
         class="planet"
         data-name="天王星">
    </div>

    <div id="neptune"
         class="planet"
         data-name="海王星">
    </div>


    <!-- 宇宙船 -->

    <div id="ship">
        🚀
    </div>

</div>


<!-- 惑星情報 -->

<div id="planetInfo">

    <h2>🔭 惑星情報</h2>

    <p id="planetName">
        惑星をクリックしてください
    </p>

    <p id="planetData">
        惑星を選択すると
        詳細情報が表示されます。
    </p>

</div>


<!-- 操作 -->

<div id="controls">

    <button id="pause">
        ⏸ 一時停止
    </button>

    <button id="faster">
        ⏩ 速度アップ
    </button>

    <button id="slower">
        ⏪ 速度ダウン
    </button>

    <button id="reset">
        🔄 リセット
    </button>

</div>


<div id="zoom">

    <button id="zoomIn">
        🔍＋
    </button>

    <button id="zoomOut">
        🔍－
    </button>

</div>