MERN Stack शिकण्याचा ३२ वा दिवस

मी आज सापशिडीचा (Snake and Ladder) खेळ बनवला.

मी HTML5, CSS3 आणि Vanilla JavaScript वापरले.

काल मी Rock Paper Scissors बनवला होता. आज मला एक मोठे आव्हान हवे होते. मला १००-सेलच्या ग्रिडवर (grid) पोझिशन्स ट्रॅक करण्याची गरज होती.

मी दोन मुख्य तांत्रिक पैलूंवर लक्ष केंद्रित केले:

१. ग्रिड जनरेशन (Grid Generation) मी १०० वेगळे HTML divs लिहिले नाहीत. मी प्रोग्रामॅटिकली ग्रिड तयार करण्यासाठी लूपचा (loop) वापर केला. मी १०x१० लेआउट तयार करण्यासाठी CSS Grid वापरले.

२. गेम लॉजिक (Game Logic) मी साप आणि शिड्यांसाठी लांबलचक if-else स्टेटमेंट्स टाळले. मी मूव्हमेंट्स मॅप करण्यासाठी JavaScript ऑब्जेक्टचा वापर केला. यामुळे कोड स्वच्छ (clean) राहतो.

हे ऑब्जेक्ट सुरुवातीच्या टाइलला (tile) डेस्टिनेशन टाइलशी मॅप करते:

Example logic:

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