インタラクティブな太陽系シミュレーションの構築: ステップバイステップ ガイド

視覚的に魅力的でインタラクティブなプロジェクトの作成は、フロントエンド開発の最もやりがいのある側面の 1 つです。今日は、動的な天体と情報パネルを備えた、完全にアニメーション化されたインタラクティブな太陽系シミュレーションを構築するプロセスを説明します。 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
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
Discord: https://discord.gg/YBNF7KjGwx
読んでいただきありがとうございます。コーディングを楽しんでください。 ?

以上がインタラクティブな太陽系シミュレーションの構築: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。