Перестал играть в игры, заметно реже смотрю фильмы. И в целом — почти не отвлекаюсь от разработки. Потому что мои отвлечения — это такая же разработка, как и то, что я делаю на работе. Сам процесс кардинально поменялся. Вместо рутинного залипания в коде — постановка задачи, корректировка, уточнение деталей, визуальная проверка. Убрав всю неинтересную шелуху, я сосредоточился на главном. Это похоже на мышь в эксперименте про кнопку счастья — которая давит и давит, потому что хорошо. Я нашёл эту кнопку у себя. В прошлой статье про ИИглу я достаточно точно описал, как формируется эта зависимость. Нормальная ли это ситуация — покажет время. А пока — вот что я придумал в перерывах между тремя другими проектами.

Шесть своих киберпанк-капч. Не потому что у гугла плохая защита — она нормально работает. А потому что хотел: посетитель добрался до формы комментария, написал текст, и в момент проверки «ты точно не робот?» продолжал чувствовать что он на киберпанк-блоге, а не на госуслугах.

Все шесть прямо в этой статье ниже — рабочие, можно потыкать. Кнопка «Проверить» покажет вердикт, «Заново» — перезапустит.

Декодер

Символы хаотично перемешаны, потом по одному встают на свои места. Через секунду-полторы появляется нормальное слово — введи его в поле. Для простого бота это уже не сценарий «забрал скрытое поле и отправил форму»: нужно выполнять JS, ждать анимацию или разбирать состояние страницы. Не настоящая стена, но от массового мусора отсекает.

Лава-шар с температурой

Один ползунок, к которому прицеплен мой же огненный шар (отдельная библиотека, я её делал давно). Тащишь — шар меняет цвет от ледяного синего к раскалённому красному. Над ним пишет «попади в тёплый» — нужно поставить ползунок в правильный диапазон.

Повтори последовательность

Четыре светящиеся кнопки, пара из них вспыхивает по очереди. Запомнил порядок — повтори, кликая в том же порядке. Как в детской игре «Симон» из 80-х. Если включён режим «убрать анимации» (для чувствительных к мерцанию) — вместо вспышек просто пишется список «1.▴ 2. 3.».

Невидимая ловушка

Скрытое от человека поле, которое простые боты часто заполняют (они автоматически пихают значения везде куда могут), плюс таймер: если форма улетела через секунду после открытия страницы — почти наверняка это не человек. Никаких проверок для обычного посетителя, всё происходит само. Ловит массовых ботов, которые тупо обходят формы скриптом — на LLM-ботов это не работает, для них нужны капчи посложнее.

В демо ниже виден отладочный экранчик: «поле пустое: ✓», «прошло секунд: N», «вердикт: ЧЕЛОВЕК / РОБОТ». В реальном использовании это всё скрыто. Кнопка «прикинуться роботом» симулирует поведение бота.

Найди ошибку в 1С-коде

Три фрагмента кода 1С, в одном — синтаксическая ошибка (пропущен КонецПроцедуры, лишняя скобка, незакрытая кавычка). Кликни на сломанный. Подходит для блога про 1С — массовый формовый спам обычно не разбирает синтаксис конкретного языка, а программист замечает за пять секунд.

Точная позиция

Ползунок 0–100%. Слово видно только в узкой полоске (например, между 67 и 73%) — выходишь за неё, и оно снова рассыпается на шум. Поймай нужную точку, прочти слово, введи. Главное — нельзя «дотащить до конца и победить», нужна точность.

Лава-шар — взял свой же npm-пакет

У меня есть npm-пакет @andromanpro/lava-orb — огненный шарик, который цепляется к ползунку и меняет цвет в зависимости от позиции. Делал давно для другого поста, опубликовал, потом просто лежал.

Капча написалась за час. Цепляю шар к ползунку, проверка на «попал в нужный диапазон» при отправке. Готово.

Что хочется отметить — стандартный ползунок в браузере уродлив. Серая полоска и круглый кружок. Стилизация в CSS — отдельный мини-ад: для каждого браузера свои псевдо-селекторы (для хрома один, для огнелиса другой), и каждый со своими тонкостями. Я сделал градиент полоски от ледяного синего к огненному красному (через золотисто-жёлтый посередине), а сам кружок сделал прозрачным, потому что сверху на него всё равно ложится мой огненный шар. Под полоской — отметки температурных зон с подписями.

Если шар по какой-то причине не загрузился — градиентная полоска остаётся и ползунок продолжает работать. Защита не отваливается.

Точная позиция — почему «до конца дотащил» это скучно

Сначала написал тривиально: тащи ползунок до 100%, тогда слово полностью видно. На отправке проверка «значение >= 100». Готово.

Запустил, попробовал. Скучно. Каждый раз одно и то же — таскаешь до конца, читаешь, вводишь. Никакого вызова — «дотащил — прошёл».

Подумал. Случайная цель? Каждый раз новое значение, например 60–89, проходишь если ползунок выше или равно. Лучше, но всё равно посетитель может перетащить до 100% и пройти. Никакой точности не нужно.

Финальная версия — узкая полоска: цель ±3%. Если ползунок в окне (например 67–73 при цели 70) — слово полностью видно. Перетащил выше или ниже — слово плавно растворяется обратно в шум. На отправке проверяю что ползунок в окне И слово введено правильно.

Получилось то что хотелось — точность. Не до конца, не до начала, а в узкую полоску. Робот может попробовать перебрать значения и наблюдать за тем что показывается, но это уже сильно дороже простого «тащи до конца».

Что дальше

Пакет уже лежит в npm под именем @andromanpro/cyberpunk-captcha, ротация подключена к форме комментариев блога — каждая загрузка поста выдаёт случайный вариант. Если у тебя есть идея для седьмой капчи в этом стиле — пиши в комментариях.

Сами механики капч заняли где-то час активного промптинга — без отделки UI, упаковки в npm и интеграции в форму комментариев. То есть «работающий прототип за час», а не «готовый продукт».

Гораздо больше времени занимает редактирование текстов статей — я терпеть не могу как ИИ собирает фразы, а объяснить модели что именно мне не нравится — не могу. Поэтому вот сижу и редактирую. Но мне это тоже нравится. Надеюсь не выгорю)

GitHub: github.com/andromanpro/cyberpunk-captcha

Живые примеры (отдельный сайт): andromanpro.github.io/cyberpunk-captcha

Установка: npm install @andromanpro/cyberpunk-captcha

→ открыть на androman.pro

В общем делаю автоматический воркфлоу по анализу бизнес-процессов в 1С для обследования предприятий. Добавил генерацию опросника — можно выбрать роль или должность, протыкать варианты ответов на вопросы, которые были выявлены ранее на основе анализа конфигурации и документации, и выгрузить всё в JSON. Не нужно тратить время на многочасовые интервью.

Но дело не в этом.

Посмотрел я, с какой скоростью с ИИ получится сделать опросник. Добавил тёмную тему на выбор, контроль неотвеченных вопросов, даже салют при завершении. Всё, можно закрывать.

А потом мой взгляд упал на скучные ползунки выбора приоритетов.

Тут-то всё и заверте…

Наступили выходные, а ощущение незавершённости не отпускало. Обычный ползунок от 1 до 10 — это же просто цифра, не показательно.

Пришлось развивать — прототип, другой, третий. Покрутил настройки частиц. Узнал что есть Canvas 2D и WebGL 2 (ну как узнал — просто что они существуют). Добавил DOOM-fire (прям как из культовой игры, ну вы поняли) режим как альтернативный движок пламени. Попробовал сделать взрывы, физику воды, отрывающиеся от ползунка орбы, которые улетают по дуге.

Задача была в том числе — проверить, получится ли через ИИ сделать что-то в незнакомой области. Без глубокого погружения в шейдеры и прочие термины которые я впервые увидел на прошлой неделе.

Получилось.

Я думал — сделаю пару эффектов на ползунок и пойду обратно к опроснику.

Что выросло за 5 недель параллельной работы:

• npm-библиотека @andromanpro/lava-orb — привязывается к любому <input type="range"> одной строкой. От мороза до огня, взрывов и молний.
• 2 одностраничные игры — ORB 2048 (жидкие сливающиеся сферы с процедурной музыкой) и ORB ARKANOID (арканоид где блоки — орбы с физикой волн). Оба работают офлайн одним HTML-файлом.
• 2 интерактивных редактора — для тонкой настройки жидкости и огня в реальном времени. С экспортом пресетов.
• Библиотека из 7 WebGL2-фонов — drop-in для любой страницы.

Всё это — MIT, на GitHub.

Ни одного профильного курса по веб-разработке я не проходил. Я вообще не знаю, что такое box-sizing и display: flex)))

Помните 2048? Ту простую головоломку с плитками, которая в 2014-м разошлась по всем сторам за несколько недель. Сделал свою версию — с жидкими светящимися сферами вместо цифровых плиток. И залип.

Геймплей:
— Классическая сетка 4×4, свайпы / стрелки / WASD
— Ячейки — жидкие metaballs через marching squares, сливаются как капли ртути
— На высоких значениях — процедурный огонь частицами с glow и затуханием
— При 2048 — supernova: space warp, chromatic aberration, 250 частиц, тряска камеры
— Игра продолжается — 4096, 8192, логотип подхватывает

Звук:
8 процедурных треков через Web Audio API, никаких mp3. Oscillator + filter + reverb синтезируются в браузере. Адаптивный темп — чем больше ячеек, тем быстрее.

Рендеринг:
WebGL2 с Canvas2D fallback. 4 фона на выбор (Cyberpunk / Space / Dark / Synthwave). RU/EN локализация.

Бот / Autoplay — запускаешь, смотришь как играет сам. Максимум набирает 65 536 (16 слияний — дальше на сетке 4×4 места нет, но есть настройка для большей сетки!).

Для СДВГ-шников — идеальная сенсорная подкормка. Запускаешь на втором мониторе или в углу экрана, свернул — периферическое зрение ловит постоянное мельтешение жидких сфер, мозгу хорошо, на основной задаче сидишь ровнее.

Режим отладки оставил прямо в сборке — FPS, хитбоксы, статистика. Не стал прятать от прода, пусть смотрит кто хочет.

Один файл Orb-2048.html ~330 KB. Скачал на телефон в самолёт — играешь офлайн.

ЗАПУСТИТЬ ORB 2048

Live: andromanpro.github.io/orb-2048

Если 2048 — про «плавное слияние», то арканоид — про «разрушение». Идея: блоки — это не кубики, а светящиеся орбы-капсулы с жидкостью. Она реагирует на удар волной, а при разрушении выливается вниз, передавая волну соседям.

Так и сделал.

Геймплей:
— 15 уровней, каждый со своей темой, музыкой и фоном
— 9 типов орбов — Fire, Ice, Water, Earth, Lava, Steel, Gold, TNT, Rainbow (у каждого своя физика и звук удара)
— 8 power-up — расширение/сужение платформы, огненный шар, мультишар, прилипание, лазерные турели, жизнь, замедление времени
— Комбо-система и локальная таблица рекордов

Технологии:
— WebGL2 SDF-шейдер для орбов — круглый SDF, 2 слоя жидкости с Catmull-Rom интерполяцией, спекулярный блик
— Verlet 6-колоночная пружинная симуляция волн
— Процедурная музыка на каждый уровень

Тюнинг шарика:
Тип хвоста (FIRE / LAVA / PLASMA / ICE), длина S/M/L, размер S/M/L. Превью шарика в настройках — живая анимация на весь экран, клик для запуска.

Бот со скоростью ×2.5. Прицеливается в конкретные орбы, проходит уровни сам. Можно включить и бесконечный режим — уровни продолжают генерироваться сверх 15 штук, бот разбивает бесконечно. Играет лучше меня.

Запустил бота в бесконечном режиме, свернул окно в угол — и пока работаешь в основном, боковым зрением ловишь как шарик дробит орбы, жидкость выливается, комбо растут.

Режим отладки тоже оставил в сборке — FPS, хитбоксы, прыжки между уровнями через [ и ]. Dev-инструменты не прятал.

97 unit-тестов встроенных в game.js. Я сам не представлял, что в браузерной игре буду их писать. Но если разрабатывать с ИИ — приходится проверять каждый шаг.

Один файл ~225 KB, работает офлайн.

ЗАПУСТИТЬ ORB ARKANOID

Live: andromanpro.github.io/orb-arkanoid

Важный юридический момент. Arkanoid — зарегистрированная торговая марка Taito с 1986 года (легендарная японская компания, сейчас в составе Square Enix). Моя игра называется ORB ARKANOID чисто как дань уважения жанру — пока это open-source прикол, никто не придёт.

Но если я начну рубить с этого капусту — Taito быстро найдёт меня через юристов. Код можно форкать (MIT разрешает), но имя «Arkanoid» — не моё чтобы его дарить. Для коммерческого форка придётся переименовать в что-то нейтральное вроде ORB BREAKOUT (слово «breakout» — общий жанр, не товарный знак), поменять логотип — и тогда можно идти в сторы.

Это к вопросу «а можно я возьму и продам» — в принципе можно, но с переименованием.

Решил посчитать — сколько я реально на это потратил.

Прошёлся по логам сессий Claude Code — там у каждого сообщения timestamp. Если между сообщениями меньше 2 минут — это активная работа. Больше 2 минут — отошёл или задумался без ИИ.

Итог: 41 час активного общения. На 7 артефактов, 40 981 строку кода.

Для сравнения, 1С-разработчику без веб-опыта (это я) без ИИ на это ушло бы:
— 3 месяца на изучение стека (HTML / CSS / JS / Canvas2D / WebGL2 / WebAudio)
— Ещё ~6 месяцев на реализацию

Грубая оценка — около 8 месяцев full-time вместо 5 недель коротких периодических сессий. Не научная цифра, просто мой внутренний «сколько бы я на это убил, если бы шёл один».

Ускорение не в «ИИ пишет код за тебя». Оно в том, что ИИ убирает барьер незнания. Можешь формулировать задачу словами и сразу получать рабочий прототип — вместо того чтобы тонуть в документации к шейдерам, которая предполагает, что ты уже знаешь что такое SDF, metaballs и Verlet integration.

Для меня это самая сильная зона ИИ: незнакомые специализированные домены, где сначала нужно месяцами накапливать словарь, а только потом начинать делать.

→ открыть на androman.pro