𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 నేర్చుకోవడంలో 𝟯𝟮వ రోజు
ఈరోజు నేను ఒక Snake and Ladder గేమ్ను రూపొందించాను.
ఈ ప్రాజెక్ట్కు సంక్లిష్టమైన array manipulation మరియు logic అవసరమయ్యాయి. నేను HTML5, CSS3 మరియు Vanilla JavaScript ఉపయోగించాను.
నిన్న నేను Rock Paper Scissors గేమ్ను రూపొందించాను. ఈరోజు నేను 100-cell grid కి మారాను. దీని కోసం ఒక గణిత లేఅవుట్ (mathematical layout) ద్వారా స్థానాలను (positions) ట్రాక్ చేయాల్సి వచ్చింది.
నేను దీనిని ఎలా నిర్మించానంటే:
- గ్రిడ్ను సృష్టించడానికి నేను ఒక loop ఉపయోగించాను. నేను 100 divs లను hardcode చేయలేదు.
- 10x10 లేఅవుట్ను సృష్టించడానికి నేను CSS Grid ఉపయోగించాను.
- నిచ్చెనలు (ladders) మరియు పాములను (snakes) నిర్వహించడానికి నేను ఒక JavaScript object ఉపయోగించాను.
ఈ object map ఒక trigger tileని దాని గమ్యస్థాన tileకి (destination tile) అనుసంధానిస్తుంది. దీనివల్ల పొడవైన if-else స్టేట్మెంట్లను నివారించవచ్చు.
ఉదాహరణ మ్యాప్:
- నిచ్చెనలు (Ladders): 4 నుండి 14, 9 నుండి 31, 28 నుండి 84.
- పాములు (Snakes): 17 నుండి 7, 54 నుండి 34, 98 నుండి 79.
ఒక డైనమిక్ ఇంటర్ఫేస్పై స్పేషియల్ ట్రాన్సిషన్స్ (spatial transitions) నిర్వహించడం ద్వారా స్టేట్ మేనేజ్మెంట్ (state management) గురించి నేను చాలా నేర్చుకున్నాను.
మూలం: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1