𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

MERN Stack سیکھنے کا 32واں دن

میں نے آج سانپ سیڑھی (Snake and Ladder) کا ایک گیم بنایا۔

میں نے HTML5، CSS3، اور Vanilla JavaScript کا استعمال کیا۔

کل میں نے Rock Paper Scissors بنایا تھا۔ آج میں ایک بڑا چیلنج چاہتا تھا۔ مجھے 100 خانوں والے گرڈ پر پوزیشنز کو ٹریک کرنے کی ضرورت تھی۔

میں نے دو اہم تکنیکی پہلوؤں پر توجہ مرکوز کی:

1. گرڈ کی تخلیق (Grid Generation) میں نے 100 الگ الگ HTML divs نہیں لکھے۔ میں نے پروگرامنگ کے ذریعے گرڈ بنانے کے لیے ایک لوپ (loop) کا استعمال کیا۔ میں نے 10x10 لے آؤٹ بنانے کے لیے CSS Grid کا استعمال کیا۔

2. گیم لاجک (Game Logic) میں نے سانپوں اور سیڑھیوں کے لیے طویل if-else اسٹیٹمنٹس سے گریز کیا۔ میں نے مووز (moves) کو میپ کرنے کے لیے ایک 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) اور کوآرڈینیٹس (coordinates) کو کیسے مینیج کیا جاتا ہے۔

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1