День 32 изучения MERN Stack
Сегодня я создал игру «Змейки и лестницы».
Я использовал HTML5, CSS3 и чистый JavaScript.
Вчера я сделал «Камень, ножницы, бумага». Сегодня мне хотелось вызова посложнее. Мне нужно было отслеживать позиции на сетке из 100 ячеек.
Я сосредоточился на двух основных технических аспектах:
Генерация сетки Я не стал писать 100 отдельных HTML-дивов. Я использовал цикл для программного создания сетки. Для создания макета 10x10 я применил CSS Grid.
Игровая логика Я избежал длинных операторов if-else для змеек и лестниц. Вместо этого я использовал объект JavaScript для сопоставления ходов. Это делает код чистым.
Объект сопоставляет начальную клетку с конечной:
- Лестницы поднимают вас вверх.
- Змейки опускают вас вниз.
Пример логики: 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 };
Создание этой игры научило меня управлять состоянием и координатами в игре.
Источник: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1