MERN Stack கற்றலில் 32-ஆம் நாள்

இன்று நான் ஒரு Snake and Ladder விளையாட்டை உருவாக்கினேன்.

நான் HTML5, CSS3 மற்றும் Vanilla JavaScript ஆகியவற்றைப் பயன்படுத்தினேன்.

நேற்று நான் Rock Paper Scissors விளையாட்டை உருவாக்கினேன். இன்று எனக்கு ஒரு பெரிய சவால் தேவைப்பட்டது. 100 கட்டங்களைக் கொண்ட ஒரு grid-இல் நிலைகளை (positions) கண்காணிக்க வேண்டியிருந்தது.

நான் இரண்டு முக்கிய தொழில்நுட்பக் காரணிகளில் கவனம் செலுத்தினேன்:

  1. Grid உருவாக்கம் (Grid Generation) நான் 100 தனித்தனி HTML divs-களை எழுதவில்லை. ஒரு loop-ஐப் பயன்படுத்தி programmatically grid-ஐ உருவாக்கினேன். 10x10 layout-ஐ உருவாக்க CSS Grid-ஐப் பயன்படுத்தினேன்.

  2. விளையாட்டு தர்க்கம் (Game Logic) பாம்புகள் மற்றும் ஏணிகளுக்காக நீண்ட if-else கூற்றுகளைத் (statements) தவிர்த்தேன். நகர்வுகளை (moves) மேப் செய்ய ஒரு JavaScript object-ஐப் பயன்படுத்தினேன். இது குறியீட்டை (code) சுத்தமாக வைக்கிறது.

அந்த object ஒரு தொடக்கக் கட்டத்தை (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