MERN Stack പഠനത്തിന്റെ 32-ാം ദിവസം
ഇന്ന് ഞാൻ ഒരു Snake and Ladder ഗെയിം നിർമ്മിച്ചു.
ഞാൻ HTML5, CSS3, Vanilla JavaScript എന്നിവ ഉപയോഗിച്ചു.
ഇന്നലെ ഞാൻ Rock Paper Scissors നിർമ്മിച്ചു. ഇന്ന് എനിക്ക് കുറച്ചുകൂടി വലിയൊരു വെല്ലുവിളി ഏറ്റെടുക്കണമെന്നുണ്ടായിരുന്നു. 100 സെല്ലുകളുള്ള ഒരു ഗ്രിഡിലെ സ്ഥാനങ്ങൾ (positions) ട്രാക്ക് ചെയ്യേണ്ടതുണ്ടായിരുന്നു.
ഞാൻ പ്രധാനമായും രണ്ട് സാങ്കേതിക കാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചു:
Grid Generation ഞാൻ 100 പ്രത്യേക HTML divs എഴുതിയില്ല. പകരം ഒരു ലൂപ്പ് (loop) ഉപയോഗിച്ച് പ്രോഗ്രാമാറ്റിക് ആയി ഗ്രിഡ് നിർമ്മിച്ചു. 10x10 ലേഔട്ട് നിർമ്മിക്കാൻ ഞാൻ CSS Grid ഉപയോഗിച്ചു.
Game Logic പാമ്പുകൾക്കും ഏണികൾക്കും (snakes and ladders) വേണ്ടി നീളമുള്ള if-else സ്റ്റേറ്റ്മെന്റുകൾ ഒഴിവാക്കി. മൂവ്മെന്റുകൾ മാപ്പ് ചെയ്യാൻ ഞാൻ ഒരു JavaScript object ഉപയോഗിച്ചു. ഇത് കോഡിനെ കൂടുതൽ വൃത്തിയുള്ളതാക്കുന്നു (clean).
ഈ ഒബ്ജക്റ്റ് ഒരു സ്റ്റാർട്ടിംഗ് ടൈലിനെ (starting tile) അതിന്റെ ലക്ഷ്യസ്ഥാനത്തേക്ക് (destination tile) മാപ്പ് ചെയ്യുന്നു:
- ഏണികൾ നിങ്ങളെ മുകളിലേക്ക് എത്തിക്കുന്നു.
- പാമ്പുകൾ നിങ്ങളെ താഴേക്ക് എത്തിക്കുന്നു.
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