MERN Stack പഠിച്ചതിന്റെ 32-ാം ദിവസം
ഇന്ന് ഞാൻ ഒരു Snake and Ladder ഗെയിം നിർമ്മിച്ചു.
ഈ പ്രോജക്റ്റിന് സങ്കീർണ്ണമായ array manipulation-ഉം ലോജിക്കും ആവശ്യമായിരുന്നു. ഞാൻ HTML5, CSS3, Vanilla JavaScript എന്നിവ ഉപയോഗിച്ചു.
ഇന്നലെ ഞാൻ Rock Paper Scissors നിർമ്മിച്ചു. ഇന്ന് ഞാൻ 100 സെല്ലുകളുള്ള ഒരു ഗ്രിഡിലേക്ക് മാറി. ഒരു ഗണിതപരമായ ലേഔട്ടിലൂടെ (mathematical layout) പൊസിഷനുകൾ ട്രാക്ക് ചെയ്യേണ്ടതായിരുന്നു ഇത്.
ഞാൻ ഇത് നിർമ്മിച്ച രീതി ഇതാ:
- ഗ്രിഡ് നിർമ്മിക്കാൻ ഞാൻ ഒരു loop ഉപയോഗിച്ചു. 100 divs നേരിട്ട് hardcode ചെയ്യുന്നതിന് പകരം ഇതാണ് ചെയ്തത്.
- 10x10 ലേഔട്ട് നിർമ്മിക്കാൻ ഞാൻ CSS Grid ഉപയോഗിച്ചു.
- ഏണികളെയും (ladders) പാമ്പുകളെയും (snakes) നിയന്ത്രിക്കാൻ ഞാൻ ഒരു JavaScript object ഉപയോഗിച്ചു.
ഈ object map ഒരു trigger tile-നെ അതിന്റെ ലക്ഷ്യസ്ഥാനമായ (destination tile) 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