𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 -> 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 ಕಲಿಯುವಿಕೆಯ 𝟯೨ನೇ ದಿನ
ಇಂದು ನಾನು ಸಾಪ ಮತ್ತು ಏಣಿ (Snake and Ladder) ಆಟವನ್ನು ತಯಾರಿಸಿದೆ.
ನಾನು HTML5, CSS3 ಮತ್ತು Vanilla JavaScript ಅನ್ನು ಬಳಸಿದ್ದೇನೆ.
ನಿನ್ನೆ ನಾನು Rock Paper Scissors ಆಟವನ್ನು ತಯಾರಿಸಿದೆ. ಇಂದು ನನಗೆ ದೊಡ್ಡ ಸವಾಲು ಬೇಕಿತ್ತು. 100-ಕೋಷ್ಟಕಗಳ (cells) ಗ್ರಿಡ್ನಲ್ಲಿ ಸ್ಥಾನಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವ ಅಗತ್ಯವಿತ್ತು.
ನಾನು ಎರಡು ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ವಿಷಯಗಳ ಮೇಲೆ ಗಮನ ಹರಿಸಿದೆ:
ಗ್ರಿಡ್ ರಚನೆ (Grid Generation) ನಾನು 100 ಪ್ರತ್ಯೇಕ HTML divs ಗಳನ್ನು ಬರೆಯಲಿಲ್ಲ. ಗ್ರಿಡ್ ಅನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ರಚಿಸಲು ನಾನು ಲೂಪ್ (loop) ಅನ್ನು ಬಳಸಿದೆ. 10x10 ಲೇಔಟ್ ರಚಿಸಲು ನಾನು CSS Grid ಅನ್ನು ಬಳಸಿದೆ.
ಗೇಮ್ ಲಾಜಿಕ್ (Game Logic) ಸಾಪ ಮತ್ತು ಏಣಿಗಳಿಗಾಗಿ ನಾನು ಉದ್ದವಾದ if-else ಸ್ಟೇಟ್ಮೆಂಟ್ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿದೆ. ಚಲನೆಗಳನ್ನು ಮ್ಯಾಪ್ ಮಾಡಲು ನಾನು JavaScript ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸಿದೆ. ಇದು ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿರಿಸುತ್ತದೆ.
ಈ ಆಬ್ಜೆಕ್ಟ್ ಪ್ರಾರಂಭಿಕ ಟೈಲ್ ಅನ್ನು ಗಮ್ಯದ ಟೈಲ್ಗೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತದೆ:
- ಏಣಿಗಳು ನಿಮ್ಮನ್ನು ಮೇಲೆ ಕೊಂಡೊಯ್ಯುತ್ತವೆ.
- ಸಾಪಗಳು ನಿಮ್ಮನ್ನು ಕೆಳಕ್ಕೆ ತಳ್ಳುತ್ತವೆ.
ಉದಾಹರಣೆಯ ಲಾಜಿಕ್: 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) ಹೇಗೆ ನಿರ್ವಹಿಸಬೇಕೆಂದು ನನಗೆ ಕಲಿಸಿಕೊಟ್ಟಿತು.
ಮೂಲ: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1