𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

День 32 навчання MERN Stack

Сьогодні я створив гру «Змійки та драбини».

Цей проєкт вимагав складних маніпуляцій з масивами та логіки. Я використовував HTML5, CSS3 та Vanilla JavaScript.

Учора я створив «Камінь, ножиці, папір». Сьогодні я перейшов до сітки зі 100 клітинок. Це потребувало відстеження позицій у математичній структурі.

Ось як я це зробив:

• Я використав цикл для створення сітки. Я не прописував 100 div-ів вручну.
• Я використав CSS Grid для створення макета 10x10.
• Я використав об'єкт JavaScript для керування драбинами та змійками.

Карта об'єкта пов'язує клітинку-тригер із клітинкою призначення. Це дозволяє уникнути довгих конструкцій if-else.

Приклад карти:

• Драбини: з 4 на 14, з 9 на 31, з 28 на 84.
• Змійки: з 17 на 7, з 54 на 34, з 98 на 79.

Управління просторовими переходами в динамічному інтерфейсі багато чого навчило мене в плані керування станом.

Джерело: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1