Membina Simulasi Sistem Suria Interaktif: Panduan Langkah demi Langkah

Mencipta projek yang menarik secara visual dan interaktif ialah salah satu aspek yang paling bermanfaat dalam pembangunan bahagian hadapan. Hari ini, saya akan membawa anda melalui proses membina simulasi sistem suria interaktif animasi sepenuhnya, lengkap dengan objek cakerawala dinamik dan panel bermaklumat. Projek ini, dihoskan di https://codepen.io/HanGPIIIErr/pen/MWNNNEe, bukan sahaja menyeronokkan untuk dibina tetapi juga padat dengan logik JavaScript dan animasi CSS yang menarik.

Menjelang akhir devblog ini, anda akan mempunyai semua alatan dan inspirasi yang anda perlukan untuk mencipta alam semesta interaktif anda sendiri—atau malah menjadikan projek ini sebagai asas untuk menambah lebih banyak ciri.

Gambaran Keseluruhan Simulasi Sistem Suria

Projek ini menampilkan:

• Animasi Dinamik: Planet mengorbit matahari, satelit mengelilingi planet dan komet melintasi kanvas dengan animasi bendalir.
• Interaktiviti: Objek boleh klik (planet, satelit, asteroid) memaparkan panel maklumat dengan fakta tentang setiap badan angkasa.
• Kawalan Responsif: Zum dan navigasi sistem menggunakan pintasan papan kekunci untuk pengalaman yang lancar.
• Penjanaan Objek Dinamik: Komet, satelit dan asteroid dijana secara rawak, menjadikan simulasi terasa hidup.

Teknologi Digunakan

• HTML: Untuk menstruktur sistem suria dan modal.
• CSS: Untuk animasi, gaya planet dan UI anggun panel maklumat.
• JavaScript: Untuk interaktiviti, penciptaan objek dinamik dan kawalan responsif.

Langkah 1: Membina Struktur HTML

Pangkalan sistem suria ialah satu set orbit sepusat yang berpusat di sekitar matahari yang bersinar. Setiap planet mempunyai orbitnya sendiri dan objek dinamik (satelit, komet dan asteroid) dilampirkan secara dinamik melalui JavaScript.

Berikut ialah struktur utama:

<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);
  }
}

Animasi Planet

.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);
  }
}

Animasi ini mencipta ilusi planet yang beredar mengelilingi matahari. Saiz dan kelajuan orbit setiap planet ditakrifkan secara individu untuk mencerminkan ciri relatifnya.

Langkah 3: Menambah Interaktiviti dengan JavaScript

Penciptaan Objek Dinamik

Asteroid, satelit dan komet dijana secara dinamik. Begini cara kami mencipta asteroid:

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
}

Fungsi createAsteroid secara dinamik menambah asteroid baharu pada DOM, menetapkan sifatnya dan melampirkan pendengar klik untuk interaktiviti. Fungsi ini dipanggil secara berkala menggunakan setInterval.

Panel Maklumat

Apabila objek angkasa diklik, atribut data-infonya mengisi panel maklumat.

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

Panel muncul secara dinamik dan boleh diketepikan dengan butang "Tutup".

Langkah 4: Menambah Navigasi Papan Kekunci

Untuk menjadikan simulasi lebih menarik, saya menambah kawalan zum dan navigasi:

<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);
  }
}

Ini membolehkan pengguna meneroka sistem suria secara dinamik.

Cabaran dan Pengajaran

.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);
  }
}

Cubalah Sendiri!

Lihat projek penuh di CodePen: https://codepen.io/HanGPIIIErr/pen/MWNNNEe

Jangan ragu untuk memotongnya dan menambah objek atau ciri angkasa anda sendiri. Ingin meniru lubang hitam atau menambah buruj? Kemungkinannya tidak berkesudahan!

Kesimpulan: Alam Semesta Kemungkinan

Simulasi sistem suria ini adalah gambaran kecil tentang perkara yang mungkin dengan HTML, CSS dan JavaScript. Sama ada anda seorang pemula atau pembangun yang berpengalaman, projek seperti ini merupakan cara yang hebat untuk melenturkan kreativiti anda sambil mengasah kemahiran anda.

Jika anda menyukai projek ini, ada lagi projek yang menanti anda! Selami Pertempuran Gladiators, di mana anda akan menemui pertempuran epik, permainan mini dan komuniti pemain dan pembangun yang berkembang maju.

? Teroka Lagi:

Tapak web: https://gladiatorsbattle.com/
X: https://x.com/GladiatorsBT
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
Perselisihan: https://discord.gg/YBNF7KjGwx
Terima kasih kerana membaca, dan selamat mengekod! ?