MERN Stack सीखने का 32वां दिन
आज मैंने एक Snake and Ladder गेम बनाया।
इस प्रोजेक्ट के लिए जटिल array manipulation और logic की आवश्यकता थी। मैंने HTML5, CSS3 और Vanilla JavaScript का उपयोग किया।
कल मैंने Rock Paper Scissors बनाया था। आज मैं 100-cell ग्रिड पर आ गया हूँ। इसके लिए एक गणितीय लेआउट (mathematical layout) में स्थितियों (positions) को ट्रैक करने की आवश्यकता थी।
इसे बनाने का तरीका यहाँ दिया गया है:
- मैंने ग्रिड बनाने के लिए एक loop का उपयोग किया। मैंने 100 divs को hardcode नहीं किया।
- मैंने 10x10 लेआउट बनाने के लिए CSS Grid का उपयोग किया।
- मैंने सीढ़ियों और सांपों को मैनेज करने के लिए एक JavaScript object का उपयोग किया।
ऑब्जेक्ट मैप एक trigger tile को destination tile से जोड़ता है। इससे लंबे if-else statements से बचा जा सकता है।
उदाहरण मैप:
- सीढ़ियाँ (Ladders): 4 से 14, 9 से 31, 28 से 84।
- सांप (Snakes): 17 से 7, 54 से 34, 98 से 79।
एक dynamic interface पर spatial transitions को मैनेज करने से मुझे state management के बारे में बहुत कुछ सीखने को मिला।
स्रोत: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1