روز ۳۲ یادگیری MERN Stack

امروز یک بازی مار و پله ساختم.

از HTML5، CSS3 و Vanilla JavaScript استفاده کردم.

دیروز بازی سنگ کاغذ قیچی را ساختم. امروز چالش بزرگتری می‌خواستم. نیاز داشتم موقعیت‌ها را در یک جدول ۱۰۰ خانه‌ای دنبال کنم.

روی دو حوزه فنی اصلی تمرکز کردم:

۱. تولید Grid من ۱۰۰ عدد div جداگانه در HTML ننوشتم. از یک حلقه برای ایجاد برنامه‌نویسی‌شده‌ی Grid استفاده کردم. برای ایجاد یک چیدمان ۱۰x۱۰ از CSS Grid استفاده کردم.

۲. منطق بازی از دستورات if-else طولانی برای مارها و نردبان‌ها خودداری کردم. از یک شیء (object) در JavaScript برای نگاشت (map) حرکت‌ها استفاده کردم. این کار باعث تمیز شدن کد می‌شود.

این شیء یک خانه شروع را به یک خانه مقصد نگاشت می‌کند:

نمونه منطق:

const gameModifications = {
    4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99,
    17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79
};

ساخت این بازی به من یاد داد که چگونه وضعیت (state) و مختصات را در یک بازی مدیریت کنم.

منبع: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1