𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 ਸਿੱਖਣ ਦਾ 𝟯𝟮ਵਾਂ ਦਿਨ
ਅੱਜ ਮੈਂ ਇੱਕ Snake and Ladder ਗੇਮ ਬਣਾਈ।
ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ ਗੁੰਝਲਦਾਰ array manipulation ਅਤੇ logic ਦੀ ਲੋੜ ਸੀ। ਮੈਂ HTML5, CSS3, ਅਤੇ Vanilla JavaScript ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
ਕੱਲ੍ਹ ਮੈਂ Rock Paper Scissors ਬਣਾਈ ਸੀ। ਅੱਜ ਮੈਂ 100-cell ਗਰਿੱਡ ਵੱਲ ਵਧ ਗਿਆ ਹਾਂ। ਇਸ ਲਈ ਇੱਕ mathematical layout ਵਿੱਚ positions ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਲੋੜ ਸੀ।
ਮੈਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਇਆ:
- ਮੈਂ ਗਰਿੱਡ ਬਣਾਉਣ ਲਈ ਇੱਕ loop ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਮੈਂ 100 divs ਨੂੰ hardcode ਨਹੀਂ ਕੀਤਾ।
- ਮੈਂ 10x10 ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ CSS Grid ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
- ਮੈਂ ladders ਅਤੇ snakes ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਇੱਕ JavaScript object ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
Object map ਇੱਕ trigger tile ਨੂੰ destination tile ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਸ ਨਾਲ ਲੰਬੇ if-else statements ਤੋਂ ਬਚਿਆ ਜਾ ਸਕਦਾ ਹੈ।
ਉਦਾਹਰਨ ਮੈਪ:
- Ladders: 4 ਤੋਂ 14, 9 ਤੋਂ 31, 28 ਤੋਂ 84।
- Snakes: 17 ਤੋਂ 7, 54 ਤੋਂ 34, 98 ਤੋਂ 79।
ਇੱਕ dynamic interface 'ਤੇ spatial transitions ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਨੇ ਮੈਨੂੰ state management ਬਾਰੇ ਬਹੁਤ ਕੁਝ ਸਿਖਾਇਆ।
ਸਰੋਤ: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1