MERN Stack શીખવાનો ૩૨મો દિવસ

મેં આજે સાપ અને સીડી (Snake and Ladder) ગેમ બનાવી.

મેં HTML5, CSS3, અને Vanilla JavaScript નો ઉપયોગ કર્યો.

ગઈકાલે મેં Rock Paper Scissors બનાવી હતી. આજે મારે એક મોટો પડકાર જોઈતો હતો. મારે ૧૦૦-સેલ ગ્રીડ પર પોઝિશન ટ્રેક કરવાની જરૂર હતી.

મેં બે મુખ્ય ટેકનિકલ ક્ષેત્રો પર ધ્યાન કેન્દ્રિત કર્યું:

  1. Grid Generation મેં ૧૦૦ અલગ-અલગ HTML divs લખ્યા નથી. મેં પ્રોગ્રામમેટિકલી ગ્રીડ બનાવવા માટે લૂપ (loop) નો ઉપયોગ કર્યો. મેં 10x10 લેઆઉટ બનાવવા માટે CSS Grid નો ઉપયોગ કર્યો.

  2. Game Logic મેં સાપ અને સીડી માટે લાંબા if-else સ્ટેટમેન્ટ્સ ટાળ્યા. મેં મૂવ્સ (moves) ને મેપ કરવા માટે JavaScript object નો ઉપયોગ કર્યો. આનાથી કોડ ક્લીન બને છે.

આ ઓબ્જેક્ટ સ્ટાર્ટિંગ ટાઇલને ડેસ્ટિનેશન ટાઇલ સાથે મેપ કરે છે:

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