יום 32 של למידת MERN Stack
היום בניתי משחק "סולמות וחבלים".
הפרויקט הזה דרש מניפולציה מורכבת של מערכים ולוגיקה. השתמשתי ב-HTML5, CSS3, ו-Vanilla JavaScript.
אתמול בניתי משחק "אבן-נייר-מספריים". היום עברתי לרשת (grid) של 100 תאים. זה דרש מעקב אחר מיקומים לאורך פריסה מתמטית.
הנה איך בניתי אותו:
- השתמשתי בלולאה כדי ליצור את הרשת. לא ביצעתי hardcode ל-100 תגיות div.
- השתמשתי ב-CSS Grid כדי ליצור פריסה של 10x10.
- השתמשתי באובייקט JavaScript כדי לנהל את הסולמות והנחשים.
מפת האובייקט מקשרת בין משבצת הפעלה למשבצת יעד. זה מונע שימוש בביטויי if-else ארוכים.
דוגמה למפה:
- סולמות: 4 ל-14, 9 ל-31, 28 ל-84.
- נחשים: 17 ל-7, 54 ל-34, 98 ל-79.
ניהול מעברים מרחביים בממשק דינמי לימד אותי הרבה על ניהול מצב (state management).
מקור: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1