Line Up: браузерная головоломка «соедини точки» с 3D-режимом

Проблема

Классическим браузерным головоломкам «соедини точки» часто не хватает вариативности: одна и та же механика на плоской сетке быстро приедается, а добавление объёмного 3D-режима или альтернативного визуального оформления обычно означает отдельный проект — плоскую 2D-головоломку и объёмную 3D-версию сложно поддерживать в одной кодовой базе.

Отдельная задача — удержание интереса вне чистой механики соединения точек: без дополнительного игрового смысла (например, обучающего) головоломка остаётся развлечением на один раз, без причины возвращаться.

Color Dots: три визуальных стиля одной механики

На странице игра называется Color Dots — головоломка на соединение одноцветных точек линией через ячейки сетки, без пересечений и с использованием всех клеток. Механика классическая, но подаётся в трёх визуальных стилях, между которыми можно переключаться в выборе уровня: «Трубы» — точки соединяются светящимися трубами по прямой сетке, «Змеи» — конечные точки оформлены как змеиные головы, а путь между ними — тело змеи, «Шестерни» — все ячейки представлены как шестерёнки, activные точки светятся цветом.

Каждый стиль закреплён за своим диапазоном уровней (например, «Трубы» — уровни 001–005, «Змеи» — 006–025, «Шестерни» — 026–030 в базовом наборе), а не является просто косметической темой поверх одной и той же головоломки — то есть визуальное разнообразие подкреплено реальным делением контента.

3D-режим: головоломка на поверхности сферы

Отдельный переключатель в настройках («3D режим — объёмное поле с вращением камеры») переводит ту же головоломку на поверхность полупрозрачной сферы: сетка с точками и трубами оборачивается вокруг шара, а игрок вращает камеру жестами — потянуть влево/вправо поворачивает сферу, вверх/вниз наклоняет её, — чтобы увидеть и соединить точки на любой стороне.

Это не отдельная 3D-игра, а альтернативный рендер того же уровня и той же логики решения на Three.js, с переключением на Canvas 2D fallback там, где WebGL недоступен или не нужен — то есть один набор уровней проходится как в плоском, так и в объёмном виде.

Прогрессия сложности: 120 уровней

В классическом режиме («Цвета») уровни разбиты на пять категорий сложности с накопительным открытием: Новичок (1–15, знакомство с механикой), Лёгкий (1–30, небольшие сетки), Средний (1–60), Сложный (1–90, плотные раскладки) и Эксперт (все 120 уровней без ограничений). Экран выбора уровня группирует их и по сложности, и по визуальному стилю, с индикатором прогресса прохождения по каждой категории.

Word Connect: обучающий режим со словами

Второй игровой режим — Word Connect, отдельная вкладка «Слова» в выборе уровня: вместо цветных точек игрок соединяет слова с их переводами, а уровни сгруппированы по темам-категориям. На момент проверки полностью доступна одна тема — «Фрукты и овощи» (20 уровней, с фильтрами «Все / Новые / Повторение» для отработки уже пройденных слов), ещё две темы («Животные», «Бытовые предметы») отмечены как «Скоро» и пока не открыты.

То есть обучающий режим — не декларация, а рабочая функциональность с прогрессом и повторением, но в текущей версии ограничена одной темой; остальные — в разработке.

Настройки, технологии и результат

Помимо переключения 3D-режима, в настройках есть управление звуковыми эффектами, фоновой музыкой и анимациями (плавные переходы и эффекты победы), а также ручное переключение системной/светлой/тёмной темы интерфейса — головоломка одинаково читаема в обоих режимах.

Игра работает как отдельный публичный продукт на собственном домене (line-up.ecomdev.uz), собрана на TypeScript с 3D-рендерингом на Three.js и Canvas 2D fallback для классического режима. Итог: одна игровая механика «соедини точки» раскрыта в трёх визуальных стилях, двух режимах рендеринга (2D и 3D-сфера) и дополнена обучающим режимом Word Connect, а не просто задекларирована в списке фич.