Головоломка Танграма – это древняя китайская игра, состоящая из семи плоских геометрических фигур, которые нужно сложить в заданные формы. Традиционно, создание интерактивных версий такой игры в вебе ассоциируется с использованием JavaScript, отвечающего за логику и взаимодействия. Однако современный мир веб-разработки задаёт новые тренды, позволяя достигать необычных результатов, используя лишь CSS и препроцессор Sass. В этом материале мы подробно разберём, как можно создать полноценную интерактивную головоломку Танграма, применяя лишь (S)CSS, без единой строки JavaScript, и при этом обеспечить не только визуальную, но и функциональную составляющую игры. Данный проект не только демонстрирует мощь CSS, но и служит отличным способом прокачать свои навыки стилевых технологий, играя с сложными состояниями и трансформациями.
Причины создания CSS-only игры Почему разработчику может понадобиться реализовать игру подобного уровня сложности, отказываясь от JavaScript? Во-первых, это вызов и проверка границ возможностей CSS, который традиционно не рассматривается как язык для логики или интерактивности. CSS был изначально создан для оформления, а с появлением новых возможностей, таких как CSS-переменные, функции, селекторы состояния и препроцессоры, возможности расширились. Во-вторых, работа с сложной структурой и взаимодействиями через CSS задаёт уникальные ограничения, которые стимулируют к поиску альтернативных, более творческих решений. Это не только помогает лучше понять глубины CSS, но и открывает новые перспективы по данным технологиям. Третья причина – простота распространения и уменьшение количества скриптов на странице, что положительно влияет на быстродействие и безопасность веб-приложений, а также упрощает поддержку.
Структура и базовый каркас HTML Создание головоломки Танграма начинается с продуманной HTML-разметки. Проект требует большого количества элементов – для каждой из семи фигур используются радиокнопки для отслеживания состояния выбора. Радиокнопки позволяют использовать их встроенную взаимную эксклюзивность, что значительно облегчает управление состояниями фигур без скриптов. Кроме того, для реализации контроля поворота каждой танграм-части применяется набор радиокнопок, каждая из которых отвечает за конкретный угол поворота, кратный 45 градусам. Идея в том, чтобы циклично переключать активное состояние угла поворота через CSS без использования JavaScript.
Каждая фигура имеет соответствующий блок, который служит как визуализация самой фигуры, а также блок «теней» или возможных позиций, которое она может занимать. Для удобства и масштабируемости исходная разметка генерировалась с помощью шаблонизатора Pug, что обессилило рутины и обеспечило стабильную структуру. Роль Sass-карт и их данные Сердцем логики и расположения фигур служат Sass-карты – подобие объектов в JavaScript, хранящие пары ключ-значение. В этих картах зафиксированы основные данные о каждой фигуре: её цвет, координаты для clip-path (формы), начальные позиции, точки происхождения для трансформаций, координаты теней, доступные положения при различных углах поворота и даже победные комбинации расположения. Такой подход позволяет централизованно хранить сложную логику расположения и взаимодействия фигур без повторения кода.
Благодаря этим картам, в дальнейшем можно динамически генерировать стили для всех фигур, а также менять их состояние в зависимости от пользовательских действий. Использование функций и миксинов для динамики Основная магия проекта кроется в написании функций и миксинов в Sass. Они обрабатывают информацию из карт и создают готовые CSS-правила в зависимости от текущих состояний. Одной из самых важных функций является get-coordinates, которая извлекает координаты из карты и добавляет нужные единицы измерения, обеспечивая гибкость в использовании данных. Миксины создают стили расположения фигур внутри CSS Grid, применяя grid-column и grid-row на основе позиций в карте.
Это позволяет разместить каждую фигуру на игровом поле точно и аккуратно. Значения для clip-path, с помощью которого фигуры обретают свою форму, также генерируются динамически, благодаря миксинам, обрабатывающим координаты и создающим сложные многоугольники из точек. Для реализации поворота фигур используется хитрый приём с радиокнопками, каждая из которых соответствует определённому углу поворота. Миксины назначают стиль transform для классных элементов в зависимости от того, какая кнопка выбрана. Таким образом, поворот реализован полностью на уровне стилей, без JavaScript.
Чтобы сделать взаимодействие гладким, миксины также управляют видимостью и состоянием кнопок поворота, создавая иллюзию непрерывного вращения. Начальная логика и пользовательский опыт При старте игры игроку предлагается кнопка начала, которая запускает процесс расстановки фигур в стартовые позиции. Каждая фигура со своими стилями трансформаций перемещается на заранее определённые позиции с помощью translate и поворачивается. При выборе фигуры появляются кнопки управления поворотом, а рядом отображаются контуры возможных корректных позиций теней на игровом поле. Если игрок правильно разместил фигуру, она подсвечивается, становится неподвижной, а при неправильном расположении работает обратная связь через мягкие визуальные эффекты.
Тонкости реализации теней и позиций Тени фигур – это ключевой элемент визуальной подсказки, сделанной с помощью дополнительных элементов с уникальными идентификаторами. Они отображают силуэты фигур в возможных местах размещения. Значения координат для теней также определены в Sass-картах, где, например, у фигур могут быть разные позиции в зависимости от текущего угла поворота. Это позволяет пользователю, вращая фигуру и выбирая позиции на поле, ориентироваться и пытаться собрать сложные формы, подобно классическому ТанAGRAM. Проверка правильных комбинаций и итоговый эффект Победа в головоломке определяется с помощью заранее описанных победных комбинаций расположения и углов поворота фигур, также хранящихся в Sass-карте.
Как только все фигуры расположены корректно, происходит плавная анимация с изменением фона игрового поля и фигур, сигнализируя о решении задачи. В этот момент игра блокирует дальнейшее взаимодействие, и остаётся лишь перезапустить игру. Подобная логика, реализованная на уровне (S)CSS, поражает не только интерактивностью, но и качественной архитектурой кода, полностью исключающего JavaScript. Почему этот проект важен для разработчиков и дизайнеров Создание таких проектов – отличный способ прокачать понимание принципов каскадных таблиц стилей и препроцессоров. Работа с продвинутыми концепциями mixin, map, функциями и управлением состояниями в CSS позволяет углубиться в архитектуру стилей, научиться писать чистый и масштабируемый код.
