ساخت یک شبیه سازی تعاملی منظومه شمسی: راهنمای گام به گام

Summarize this content to 400 words in Persian Lang
ایجاد پروژه های بصری جذاب و تعاملی یکی از جنبه های سودمند توسعه front-end است. امروز، من شما را از طریق فرآیند ساخت یک شبیه‌سازی کاملا متحرک و تعاملی منظومه شمسی، کامل با اجرام آسمانی پویا و پانل‌های آموزنده آشنا می‌کنم. این پروژه که در https://codepen.io/HanGPIIIErr/pen/MWNNNEe میزبانی شده است، نه تنها ساخت آن سرگرم کننده بود، بلکه مملو از منطق جاوا اسکریپت و انیمیشن های CSS هیجان انگیز بود.

در پایان این وبلاگ توسعه، همه ابزارها و الهاماتی را که برای ایجاد دنیای تعاملی خود نیاز دارید، خواهید داشت—یا حتی این پروژه را به عنوان پایه ای برای افزودن ویژگی های بیشتر در نظر بگیرید.

مروری بر شبیه سازی منظومه شمسی

ویژگی های این پروژه:

انیمیشن‌های پویا: سیارات به دور خورشید می‌چرخند، ماهواره‌ها به دور سیارات می‌چرخند و دنباله‌دارها با انیمیشن‌های سیال روی بوم می‌چرخند.
تعامل: اجرام قابل کلیک (سیاره ها، ماهواره ها، سیارک ها) پانل های اطلاعاتی را با حقایق در مورد هر جرم آسمانی نمایش می دهند.
کنترل‌های پاسخگو: برای تجربه‌ای بی‌نظیر، سیستم را با استفاده از میانبرهای صفحه‌کلید بزرگ‌نمایی و پیمایش کنید.
تولید شی پویا: دنباله‌دارها، ماهواره‌ها و سیارک‌ها به‌طور تصادفی تولید می‌شوند و شبیه‌سازی را زنده می‌کنند.

فن آوری های مورد استفاده

HTML: برای ساختار منظومه شمسی و مدال.
CSS: برای انیمیشن‌ها، سبک‌های سیاره‌ای و رابط کاربری شیک پانل اطلاعاتی.
جاوا اسکریپت: برای تعامل، ایجاد شی پویا و کنترل های پاسخگو.

مرحله 1: ساخت ساختار HTML

پایه منظومه شمسی مجموعه ای از مدارهای متحدالمرکز است که به دور یک خورشید درخشان متمرکز شده اند. هر سیاره مدار مخصوص به خود را دارد و اجرام پویا (ماهواره ها، دنباله دارها و سیارک ها) از طریق جاوا اسکریپت به صورت پویا اضافه می شوند.

در اینجا ساختار کلیدی وجود دارد:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر سیاره دارای یک ویژگی داده اطلاعات است که حاوی توضیحات آن است. با کلیک روی این داده، پانل اطلاعاتی پر می شود که به صورت پویا ظاهر می شود.

مرحله 2: افزودن انیمیشن های CSS

CSS سیارات و مدارها را زنده می کند. هر مدار با استفاده از قانون @keyframes به آرامی می چرخد. در اینجا نحوه ایجاد انیمیشن ها آمده است:

انیمیشن مدار

.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: افزودن تعامل با جاوا اسکریپت

ایجاد شیء پویا

سیارک ها، ماهواره ها و دنباله دارها به صورت پویا تولید می شوند. در اینجا نحوه ایجاد یک سیارک آمده است:

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 فراخوانی می شود.

پنل اطلاعاتی

وقتی روی یک شیء آسمانی کلیک می شود، ویژگی data-info آن یک پانل اطلاعاتی را پر می کند.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پانل به صورت پویا ظاهر می شود و با دکمه “بستن” می توان آن را رد کرد.

مرحله 4: اضافه کردن پیمایش صفحه کلید

برای جذاب‌تر کردن شبیه‌سازی، زوم و کنترل‌های پیمایش را اضافه کردم:

document.addEventListener(‘keydown’, (e) => {
switch (e.key) {
case ‘+’: // Zoom in
scale = Math.min(scale + 0.1, 2);
break;
case ‘-‘: // Zoom out
scale = Math.max(scale – 0.1, 0.5);
break;
case ‘ArrowUp’: // Pan up
translateY -= 10;
break;
case ‘ArrowDown’: // Pan down
translateY += 10;
break;
case ‘ArrowLeft’: // Pan left
translateX -= 10;
break;
case ‘ArrowRight’: // Pan right
translateX += 10;
break;
}

space.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این به کاربران اجازه می دهد تا منظومه شمسی را به صورت پویا کاوش کنند.

چالش ها و درس های آموخته شده

Balancing Performance: Animating multiple elements in real-time can be resource-intensive. Using efficient CSS animations instead of JavaScript calculations was key.
Keeping the UI Simple: Managing interactivity while maintaining an intuitive user experience required thoughtful design choices.
Modularity: Writing reusable functions (e.g., createDynamicObject) helped keep the code maintainable.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خودتان آن را امتحان کنید!

پروژه کامل را در CodePen بررسی کنید: https://codepen.io/HanGPIIIErr/pen/MWNNNEe

به راحتی آن را چنگال کنید و اجرام آسمانی یا ویژگی های خود را اضافه کنید. آیا می خواهید سیاهچاله ها را شبیه سازی کنید یا صور فلکی اضافه کنید؟ امکانات بی پایان هستند!

نتیجه گیری: جهانی از امکانات

این شبیه سازی منظومه شمسی نگاهی اجمالی به آنچه با HTML، CSS و جاوا اسکریپت امکان پذیر است است. چه یک مبتدی یا یک توسعه‌دهنده با تجربه باشید، پروژه‌هایی مانند این راه فوق‌العاده‌ای برای منعطف کردن خلاقیت شما و در عین حال تقویت مهارت‌هایتان هستند.

اگر این پروژه را دوست داشتید، تعداد بیشتری در انتظار شما هستند! در نبرد گلادیاتورها شیرجه بزنید، جایی که نبردهای حماسی، مینی بازی ها و جامعه ای پر رونق از گیمرها و توسعه دهندگان را خواهید دید.

🔗 کاوش بیشتر:

وب سایت: https://gladiatorsbattle.com/X: https://x.com/GladiatorsBTلینکدین: https://www.linkedin.com/in/pierre-romain-lopez/اختلاف: https://discord.gg/YBNF7KjGwxبا تشکر از شما برای خواندن، و کد نویسی مبارک! 🌌

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

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
}

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

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case '+': // Zoom in
      scale = Math.min(scale + 0.1, 2);
      break;
    case '-': // Zoom out
      scale = Math.max(scale - 0.1, 0.5);
      break;
    case 'ArrowUp': // Pan up
      translateY -= 10;
      break;
    case 'ArrowDown': // Pan down
      translateY += 10;
      break;
    case 'ArrowLeft': // Pan left
      translateX -= 10;
      break;
    case 'ArrowRight': // Pan right
      translateX += 10;
      break;
  }

  space.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
});

Balancing Performance: Animating multiple elements in real-time can be resource-intensive. Using efficient CSS animations instead of JavaScript calculations was key.
Keeping the UI Simple: Managing interactivity while maintaining an intuitive user experience required thoughtful design choices.
Modularity: Writing reusable functions (e.g., createDynamicObject) helped keep the code maintainable.