اليوم ٣٢ من تعلم MERN Stack

قمت اليوم ببناء لعبة السلم والثعبان.

استخدمت HTML5 وCSS3 وVanilla JavaScript.

بالأمس قمت ببناء لعبة حجر ورقة مقص. اليوم أردت تحديًا أكبر، حيث احتجت لتتبع المواقع على شبكة مكونة من 100 خلية.

ركزت على مجالين تقنيين رئيسيين:

  1. إنشاء الشبكة لم أقم بكتابة 100 عنصر div منفصل في HTML. بدلاً من ذلك، استخدمت حلقة تكرار (loop) لإنشاء الشبكة برمجياً، واستخدمت CSS Grid لإنشاء تخطيط بمقاس 10x10.

  2. منطق اللعبة تجنبت استخدام جمل if-else الطويلة للتعامل مع السلالم والثعابين. بدلاً من ذلك، استخدمت كائن JavaScript (object) لتعيين الحركات، مما يجعل الكود نظيفاً.

يقوم الكائن بربط المربع الذي تبدأ منه بالمربع الذي ستصل إليه:

مثال على المنطق:

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