MERN Stack শেখার ৩২তম দিন

MERN Stack শেখার ৩২তম দিন

আজ আমি একটি Snake and Ladder গেম তৈরি করেছি।

আমি HTML5, CSS3 এবং Vanilla JavaScript ব্যবহার করেছি।

গতকাল আমি Rock Paper Scissors তৈরি করেছিলাম। আজ আমি আরও বড় একটি চ্যালেঞ্জ নিতে চেয়েছিলাম। ১০০-সেল বিশিষ্ট একটি গ্রিডে পজিশন ট্র্যাক করার প্রয়োজন ছিল।

আমি দুটি প্রধান প্রযুক্তিগত বিষয়ের ওপর গুরুত্ব দিয়েছি:

১. গ্রিড জেনারেশন (Grid Generation) আমি ১০০টি আলাদা HTML div লিখিনি। আমি প্রোগ্রামাটিকভাবে গ্রিডটি তৈরি করতে একটি লুপ ব্যবহার করেছি। ১০x১০ লেআউট তৈরি করতে আমি CSS Grid ব্যবহার করেছি।

২. গেম লজিক (Game Logic) সাপ এবং সিঁড়ির জন্য আমি বড় বড় if-else স্টেটমেন্ট এড়িয়ে চলেছি। মুভগুলো ম্যাপ করার জন্য আমি একটি JavaScript object ব্যবহার করেছি। এটি কোডকে পরিষ্কার রাখে।

অবজেক্টটি একটি শুরুর টাইলকে (starting tile) একটি গন্তব্য টাইলের (destination tile) সাথে ম্যাপ করে:

• সিঁড়ি আপনাকে উপরে নিয়ে যায়।
• সাপ আপনাকে নিচে নামিয়ে দেয়।

উদাহরণস্বরূপ লজিক:

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