Святые друзья гуакамоле, я добрался до конца уровня 1 в знаменитом руководстве по CS / WD от P1xt. Один марафонский 10-часовой день программирования, чтобы решить мою самую сложную задачу!
Вот я и пишу о моем решателе Towers of Hanoi. Когда я начал это путешествие в марте, я думал, что НИКОГДА не смогу выполнить такую грандиозную задачу. Даже когда я начинал проект, я не был на 100% уверен, что готов. Но теперь, 5 месяцев спустя, вот оно. На самом деле я закончил это 7 июля, но жизнь помешала мне, и у меня не было времени на обзор.
Я разбил проект на более мелкие части, чтобы я мог упорядочить свои мысли. Это также помогло, потому что после того, как я достиг каждой «части», я чувствовал завершенность и мотивацию двигаться вперед.
Дизайн
Я признаю, что мой дизайн не очень хорош. Я столкнулся с множеством проблем с планировкой и структурой. Я начал с того, что нарисовал то, как я хотел, чтобы это выглядело: три «зубца», общая «основа» и «диски» разного размера. Диски нужно было размещать друг на друге и иметь разный (сжимающийся) размер. Требовалась контрольная точка для размещения каждого диска на зубце. Мне нужно было зафиксировать количество дисков (от пользователя) и создать формулу для рисования каждого диска с различным размером. Я начал с HTML и небольшого кусочка CSS, чтобы нарисовать один диск на заднем плане. Я использовал div, чтобы нарисовать диск и переместить его от одного выступа к другому, вручную в файле HTML, чтобы убедиться, что он остается по центру на каждом выступе. Таким образом, чтобы оживить движение, мне просто нужно было бы удалить диск и присоединить его к другим зубцам по мере необходимости.
Чтобы динамически добавлять диски в соответствии с вводом пользователя, я написал небольшую вспомогательную функцию для расчета размера каждого диска на основе наименьшего размера диска (масштабирование вверх), а высота каждого диска была фиксированной, поэтому я мог разместить один поверх другого. контролируя свойство bottom CSS.
Последнее, что я сделал, - это рандомизировал цвет каждого диска на основе случайного выбора цвета, который я написал для своего генератора цитат FreeCodeCamp!
Логика
Моим первым желанием было реализовать в JS рекурсивное решение этой проблемы, как это читалось в Википедии. Это сделало элегантное краткое решение. Я протестировал это с использованием массивов, и это сработало! Однако у меня это вызвало много головной боли позже, во время анимационной части ...
Анимация
Черт возьми, эта часть была худшей. Я боролся и боролся с setTimeout и delay и всевозможными трюками с анимацией CSS. Ничего не получилось. Все вышло из строя, и это была катастрофа. Сначала я просто хотел сделать простое постепенное появление / исчезновение, но из-за рекурсии я терялся в вызовах функций (стек вызовов)
Переписать
Я сделал шаг назад и решил, что рекурсивная функция, хотя и приятная на вид, доставляет мне кошмар в состоянии отслеживания. Я переписал свою логическую часть, используя итеративное решение из Википедии, и его было довольно просто реализовать. Затем я обнаружил функцию setInterval и то, как вы можете завершить ее с помощью clearInterval. Это как раз то, что мне нужно для решения проблемы!
"Исходный код"
Будущее
Я изучил codepen и github, чтобы найти другие решения этой проблемы. Некоторые люди использовали генераторы (вау) для итерации решения, добавляя задержку по времени к каждой итерации. Некоторые анимации, которые делали люди, очень впечатляют, они перемещают каждую часть вверх и вниз. Мой дизайн тоже не реагирует на мобильные устройства, и на самом деле он довольно уродлив. Это все, что я мог бы добавить в будущем или переписать. В любом случае, я закончил уровень 1 руководства P1XT, так что теперь у меня впереди несколько курсов edx!
Вперед!
