День 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