روز ۳۲ یادگیری MERN Stack
امروز یک بازی مار و پله ساختم.
این پروژه نیازمند مدیریت پیچیده آرایهها و منطق بود. من از HTML5، CSS3 و Vanilla JavaScript استفاده کردم.
دیروز بازی سنگ کاغذ قیچی را ساختم. امروز به سراغ یک جدول ۱۰۰ خانهای رفتم. این کار مستلزم ردیابی موقعیتها در یک چیدمان ریاضی بود.
روش ساخت آن به این صورت بود:
- از یک حلقه برای ایجاد جدول استفاده کردم. ۱۰۰ عدد div را به صورت دستی (hardcode) وارد نکردم.
- از CSS Grid برای ایجاد یک چیدمان ۱۰x۱۰ استفاده کردم.
- از یک شیء (object) در JavaScript برای مدیریت مارها و نردبانها استفاده کردم.
این نقشه (map) در شیء، یک خانه محرک را به خانه مقصد متصل میکند. این کار از نوشتن دستورات طولانی if-else جلوگیری میکند.
نمونه نقشه:
- نردبانها: ۴ به ۱۴، ۹ به ۳۱، ۲۸ به ۸۴.
- مارها: ۱۷ به ۷، ۵۴ به ۳۴، ۹۸ به ۷۹.
مدیریت انتقالهای مکانی در یک رابط کاربری پویا، چیزهای زیادی درباره مدیریت وضعیت (state management) به من آموخت.
منبع: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1