11 августа 2021 г.
Я успешно завершил свой проект «Выгравировать эскиз» для фондов The Odin Project. Работать над этим проектом было очень весело.
В этом проекте я экспериментировал, используя больше DOM, чем CSS, чтобы управлять всей эстетикой.
Позвольте мне рассказать вам о важных проблемах, с которыми я столкнулся при разработке этого проекта, но сначала я опишу простым языком, что делает проект.
На веб-сайте показан красный элемент в центре, который является просто декоративным, из него еще один серый контейнер, который на самом деле состоит из нескольких других квадратов. Серый контейнер по умолчанию имеет размер 16 × 16 квадратных бит, что указывает на то, что он содержит 256 квадратных элементов.
Когда вы наводите указатель мыши на один из этих фрагментов, цвет становится черным, как если бы вы рисовали на этом сером контейнере. .
Первой проблемой, с которой я столкнулся во время работы над этим проектом, была проблема с Javascript, из-за которой серый контейнер реагировал на ползунок в нижней части, который устанавливает высоту и ширину контейнера для рисования.
Когда я только начинал, он создавал контейнер для рисования по умолчанию 16 x 16, а если бы я устанавливал ползунок на значение 2, что на самом деле означает создание контейнера для рисования 2 x 2, он создавал контейнер размером 18 x 18, и если бы я сделал контейнер 18 x 18, он фактически создал бы контейнер 36 x 36.
Это было не удаление существующих квадратных элементов, а скорее создание новых элементов и добавление их в контейнер.
В этот момент я понятия не имел, почему это происходит на самом деле, поэтому я выключил свой ноутбук и открыл блокнот, где начал рисовать, как, по моему мнению, он должен себя вести.
В конце концов, он не выглядел и не работал так же, как тот, что был на ноутбуке, но этот подход «закрытие ноутбука и набросок на бумаге», наряду с множеством проб и ошибок, привел меня к правильным рассуждениям.
Второй проблемой, с которой я столкнулся при создании этого проекта, была проблема с CSS.
Вы можете видеть, как контейнер для рисования закрывал родительский контейнер, у которого была черная рамка с небольшим радиусом границы, и для этой проблемы я пошел к своим сверстникам в ТОП-группе дискорда, и один из них научил меня, что можно скрыть переполнение элемента (до того, как он мне сказал, я почему-то думал, что это только то, что вы используете в теле), поэтому я сделал.
Я был удивлен, что это сработало после довольно долгого поиска и не нашел ничего подходящего.
Последней проблемой, с которой я столкнулся, было заставить его работать на телефонах, что потребовало от меня исследования координат X и Y. Честно говоря, я не приложил особых усилий, чтобы понять это, потому что меня больше интересовало, как это работает на телефонах.
Наконец, я снова доволен конечным продуктом.
Посмотрите здесь:
https://sebastiancastro.github.io/rock-paper-scissors/
