建立互動式太陽系模擬：逐步指南

創建具有視覺吸引力和互動性的專案是前端開發最有價值的方面之一。今天，我將帶您完成建立一個完全動畫的互動式太陽系模擬的過程，其中包含動態天體和資訊面板。這個專案託管在 https://codepen.io/HanGPIIIErr/pen/MWNNNEe 上，不僅建置起來很有趣，而且還包含令人興奮的 JavaScript 邏輯和 CSS 動畫。

讀完本開發部落格，您將擁有創建自己的互動式宇宙所需的所有工具和靈感，甚至可以以此專案為基礎來添加更多功能。

太陽系模擬概述

該項目的特點：

• 動態動畫：行星圍繞太陽運行，衛星圍繞行星旋轉，彗星以流暢的動畫劃過畫布。
• 互動性：可點擊的物體（行星、衛星、小行星）顯示資訊面板，其中包含有關每個天體的事實。
• 響應式控制：使用鍵盤快速鍵縮放和導航系統，以獲得無縫體驗。
• 動態物體產生：隨機產生彗星、衛星和小行星，讓模擬感覺栩栩如生。

使用的技術

• HTML：用於建構太陽系和模態。
• CSS：用於動畫、行星樣式和資訊面板的時尚 UI。
• JavaScript：用於互動、動態物件建立和響應式控制項。

第 1 步：建立 HTML 結構

太陽系的底部是一組以發光的太陽為中心的同心圓軌道。每個行星都有自己的軌道，動態物體（衛星、彗星和小行星）透過 JavaScript 動態附加。

關鍵結構如下：

<div>



<p>Each planet has a data-info attribute containing its description. When clicked, this data populates the informational panel, which appears dynamically.</p>

<p>Step 2: Adding CSS Animations</p>

<p>CSS brings the planets and orbits to life. Each orbit rotates smoothly using the @keyframes rule. Here's how we created the animations:</p>

<p>Orbit Animation<br>
</p>

<pre class="brush:php;toolbar:false">.orbit {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: rotate infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

星球動畫

.planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #4caf50; /* Earth color */
  border-radius: 50%;
  animation: planet-spin infinite linear;
}

@keyframes planet-spin {
  0% {
    transform: rotate(0deg) translateX(50px);
  }
  100% {
    transform: rotate(360deg) translateX(50px);
  }
}

這些動畫創造了行星圍繞太陽旋轉的錯覺。每個行星的大小和軌道速度都是單獨定義的，以反映它們的相對特徵。

第 3 步：使用 JavaScript 加入互動性

動態物件建立

小行星、衛星和彗星是動態生成的。以下是我們創造小行星的方法：

function createAsteroid() {
  const asteroid = document.createElement('div');
  asteroid.classList.add('asteroid');
  asteroid.setAttribute('data-info', 'Asteroid: Rocky celestial object.');
  space.appendChild(asteroid);

  asteroid.addEventListener('click', () => {
    showInfo(asteroid.getAttribute('data-info'));
  });

  setTimeout(() => asteroid.remove(), 5000); // Remove after 5 seconds
}

createAsteroid 函數動態地將一個新的小行星新增至 DOM，設定其屬性，並附加一個用於互動的點擊偵聽器。使用 setInterval 定期呼叫此函數。

資訊面板

點選天體時，其資料資訊屬性會填入資訊面板。

function showInfo(text) {
  infoText.textContent = text;
  infoPanel.style.display = 'block';
}

面板動態顯示，可透過「關閉」按鈕關閉。

第 4 步：新增鍵盤導航

為了讓模擬更具吸引力，我添加了縮放和導航控制：

<div>



<p>Each planet has a data-info attribute containing its description. When clicked, this data populates the informational panel, which appears dynamically.</p>

<p>Step 2: Adding CSS Animations</p>

<p>CSS brings the planets and orbits to life. Each orbit rotates smoothly using the @keyframes rule. Here's how we created the animations:</p>

<p>Orbit Animation<br>
</p>

<pre class="brush:php;toolbar:false">.orbit {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: rotate infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

這允許使用者動態探索太陽系。

挑戰與經驗教訓

.planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #4caf50; /* Earth color */
  border-radius: 50%;
  animation: planet-spin infinite linear;
}

@keyframes planet-spin {
  0% {
    transform: rotate(0deg) translateX(50px);
  }
  100% {
    transform: rotate(360deg) translateX(50px);
  }
}

親自嘗試！

查看 CodePen 上的完整項目：https://codepen.io/HanGPIIIErr/pen/MWNNNEe

隨意分叉並添加您自己的天體或特徵。想要模擬黑洞或增加星座？可能性是無限的！

結論：充滿可能性的宇宙

這個太陽系模擬是對 HTML、CSS 和 JavaScript 可能性的一個小小的了解。無論您是初學者還是經驗豐富的開發人員，這樣的專案都是在磨練技能的同時發揮創造力的絕佳方式。

如果您喜歡這個項目，還有更多內容等著您！深入《角鬥士之戰》，在這裡您會發現史詩般的戰鬥、迷你遊戲以及蓬勃發展的遊戲玩家和開發者社群。

？探索更多：

網址：https://gladiatorsbattle.com/
X：https://x.com/GladiatorsBT
領英：https://www.linkedin.com/in/pierre-romain-lopez/
不和諧：https://discord.gg/YBNF7KjGwx
感謝您的閱讀，祝您編碼愉快！ ？