𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 શીખવાનો ૩૨મો દિવસ
મેં આજે સાપ અને સીડી (Snake and Ladder) ગેમ બનાવી.
આ પ્રોજેક્ટ માટે જટિલ એરે મેનીપ્યુલેશન (array manipulation) અને લોજિકની જરૂર હતી. મેં HTML5, CSS3 અને Vanilla JavaScript નો ઉપયોગ કર્યો.
ગઈકાલે મેં Rock Paper Scissors બનાવ્યું હતું. આજે હું 100-સેલ ગ્રીડ (100-cell grid) પર આવ્યો. આ માટે ગાણિતિક લેઆઉટમાં પોઝિશન ટ્રેક કરવાની જરૂર હતી.
મેં તે કેવી રીતે બનાવ્યું તે અહીં છે:
- મેં ગ્રીડ બનાવવા માટે લૂપ (loop) નો ઉપયોગ કર્યો. મેં 100 divs ને હાર્ડકોડ કર્યા નથી.
- મેં 10x10 લેઆઉટ બનાવવા માટે CSS Grid નો ઉપયોગ કર્યો.
- મેં સીડી અને સાપને મેનેજ કરવા માટે JavaScript object નો ઉપયોગ કર્યો.
ઓબ્જેક્ટ મેપ (object map) ટ્રિગર ટાઇલને ડેસ્ટિનેશન ટાઇલ સાથે જોડે છે. આનાથી લાંબા 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