MERN Stack ಕಲಿಯುವಿಕೆಯ 32ನೇ ದಿನ
ನಾನು ಇಂದು ಸಾಪ-ಏಣಿ (Snake and Ladder) ಆಟವನ್ನು ತಯಾರಿಸಿದೆ.
ಈ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಸಂಕೀರ್ಣವಾದ array manipulation ಮತ್ತು ತರ್ಕದ (logic) ಅಗತ್ಯವಿತ್ತು. ನಾನು HTML5, CSS3 ಮತ್ತು Vanilla JavaScript ಅನ್ನು ಬಳಸಿದ್ದೇನೆ.
ನಿನ್ನೆ ನಾನು Rock Paper Scissors ಆಟವನ್ನು ತಯಾರಿಸಿದೆ. ಇಂದು ನಾನು 100-ಕೋಷ್ಟಕಗಳ (100-cell) ಗ್ರಿಡ್ಗೆ ಬದಲಾಯಿಸಿದೆ. ಇದು ಗಣಿತದ ವಿನ್ಯಾಸದ (mathematical layout) ಮೂಲಕ ಸ್ಥಾನಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವುದನ್ನು ಬಯಸುತ್ತದೆ.
ನಾನು ಇದನ್ನು ಹೇಗೆ ತಯಾರಿಸಿದೆ ಎಂದರೆ:
- ಗ್ರಿಡ್ ಅನ್ನು ರಚಿಸಲು ನಾನು loop ಅನ್ನು ಬಳಸಿದೆ. ನಾನು 100 divs ಗಳನ್ನು ಹಾರ್ಡ್ಕೋಡ್ ಮಾಡಲಿಲ್ಲ.
- 10x10 ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಲು ನಾನು CSS Grid ಅನ್ನು ಬಳಸಿದೆ.
- ಏಣಿ ಮತ್ತು ಸಾಪಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಾನು JavaScript object ಅನ್ನು ಬಳಸಿದೆ.
ಈ object map ಒಂದು ಟ್ರಿಗರ್ ಟೈಲ್ ಅನ್ನು ಗುರಿ ಟೈಲ್ಗೆ (destination tile) ಸಂಪರ್ಕಿಸುತ್ತದೆ. ಇದು ಉದ್ದವಾದ if-else ಹೇಳಿಕೆಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಯ ಮ್ಯಾಪ್:
- ಏಣಿಗಳು: 4 ರಿಂದ 14, 9 ರಿಂದ 31, 28 ರಿಂದ 84.
- ಸಾಪಗಳು: 17 ರಿಂದ 7, 54 ರಿಂದ 34, 98 ರಿಂದ 79.
ಡೈನಾಮಿಕ್ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ಸ್ಥಳೀಯ ಪರಿವರ್ತನೆಗಳನ್ನು (spatial transitions) ನಿರ್ವಹಿಸುವುದು ನನಗೆ state management ಬಗ್ಗೆ ಬಹಳಷ್ಟು ಕಲಿಸಿಕೊಟ್ಟಿತು.
ಮೂಲ: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1