اليوم ٣٢ من تعلم MERN Stack
قمت اليوم ببناء لعبة السلم والثعبان.
تطلب هذا المشروع معالجة مصفوفات ومنطقاً برمجياً معقداً. استخدمت HTML5 و CSS3 و Vanilla JavaScript.
بالأمس قمت ببناء لعبة "حجر ورقة مقص". واليوم انتقلت إلى شبكة مكونة من ١٠٠ خلية. تطلب ذلك تتبع المواقع عبر تخطيط رياضي.
إليكم كيف قمت ببنائها:
- استخدمت حلقة تكرار (loop) لإنشاء الشبكة، ولم أقم بكتابة ١٠٠ عنصر
divيدوياً. - استخدمت CSS Grid لإنشاء تخطيط بمقاس ١٠×١٠.
- استخدمت كائن JavaScript (object) لإدارة السلالم والثعابين.
يربط مخطط الكائن (object map) بين المربع المحفز ومربع الوجهة، مما يجنبني كتابة جمل if-else طويلة.
مثال على المخطط:
- السلالم: من ٤ إلى ١٤، ومن ٩ إلى ٣١، ومن ٢٨ إلى ٨٤.
- الثعابين: من ١٧ إلى ٧، ومن ٥٤ إلى ٣٤، ومن ٩٨ إلى ٧٩.
علمني إدارة الانتقالات المكانية على واجهة ديناميكية الكثير عن إدارة الحالة (state management).
المصدر: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1