PyCity: метавселенная, где Python строит город.
Python в браузере, платформа, где школьники строят мегаполис кодом, учитель, который может поджечь дом, и боссы, которых убивают всей группой. Звучит как сюжет игры, но это образовательная платформа. Я её сделал и хочу показать, как всё устроено внутри: от 3D-города до дуэлей, сертификации и базы знаний. Здесь нет чёрного терминала и скучных лекций — каждая строка Python превращается в небоскрёб, а ошибка — в пожар. Давайте разберём, как это работает.
Обучение программированию упирается в отсутствие физической обратной связи. Ученик пишет код, получает Hello, World! или Traceback, и на этом цикл заканчивается. Код не имеет веса, не рушится, не строится. Через две недели мотивация падает.
PyCity — попытка сделать так, чтобы каждая корректная строка на Python 3.11 материализовалась в 3D-городе. Написал функцию — надстроил этаж. Исправил ошибку — потушил пожар. Решил задачу — получил новый модуль для квартала. Это не геймификация ради геймификации, а способ дать коду визуальную плотность и мгновенную обратную связь.
Архитектурно город разбит на сектора 5×5, в каждом — ученик. Код исполняется в браузере через WebAssembly (CPython 3.11), результат передаётся в Three.js и отображается как геометрия.
Что реализовано
300 уроков, разбитых на уровни. Программа покрывает:
- синтаксис, типы, условия, циклы, функции;
- ООП, comprehensions, работу с файлами, исключения;
- алгоритмы, Big-O, SQLite, паттерны проектирования;
- асинхронность, сокеты, хэширование, JWT;
- нейросети: от перцептрона до внимания QKV, LoRA и RAG;
- распределённые системы: Raft/Paxos, фильтр Блума, LRU-кэш, WebSocket.
Практические режимы
Код-дуэли 1 на 1
Охота на баги
SQL-майнфрейм
Нейро-Колизей
3D-мегаполис
Город — не декорация, а основная система мотивации. Он разбит на сектора 5×5, каждый сектор занимает площадку 350×350 метров. Внутри сектора ученик строит свой квартал: этажность зданий, дороги, инфраструктура — всё это напрямую зависит от прогресса в уроках и потраченного XP.
Есть два режима взаимодействия:
Walk Mode (FPS). Ученик переключается в вид от первого лица, ходит по улицам, заглядывает в окна небоскрёбов, гуляет по кварталам одноклассников. Это не просто прогулка: так видно, кто продвинулся дальше, а кто застрял на стартовой вышке.
Режим проектора (кино-тур). Для школьного проектора или открытого урока. Камера взмывает в небо и запускает один из четырёх сценариев: тур по кадетам (7 секунд на квартал), бреющий полёт между небоскрёбами, круговую панораму всего мегаполиса или волнообразный дрейф над облаками.
Город живой: по дорогам ездят кибер-кары, останавливаются на светофорах, уступают друг другу дорогу. На высоте 65 метров курсирует монорельс на магнитной подушке. Это не статичная картинка — трафик и поезд работают постоянно.
Технически город собран на Three.js и React Three Fiber. Геометрия процедурная: здание не хранится как отдельная модель, а собирается из параметров (этажность, тип, материалы). Поэтому 25 кварталов по 350 метров не превращаются в гигабайты ассетов.
Кибер-Хаб
Экономический центр, где заработанный XP конвертируется в визуальное развитие квартала. Логика простая: опыт, полученный в дуэлях, рейдах и уроках, тратится на мегаструктуры.
Примеры объектов:
- Салют Системы (5 000 XP) — неоновый фейерверк над крышами.
- Неоновое Имя Архитектора (10 000 XP) — голограмма позывного в стратосфере.
- Зенитные Прожекторы (12 000 XP) — четыре луча по углам квартала.
- Золотые Магистрали (15 000 XP) — сияющий контур дорог вокруг сектора.
- Монумент Python (20 000 XP) — обелиск с золотым обвивающим питоном.
- Плазменный Купол (25 000 XP) — силовой купол над районом.
- Башня Тесла (35 000 XP) — генератор плазменных дуг.
- Зиккурат Данных (45 000 XP) — чёрная пирамида серверов.
- Орбитальный Космо-Лифт (90 000 XP) — 2.6-километровый луч с движущейся кабиной.
- Сфера Дайсона (250 000 XP) — рукотворная звезда в магнитных кольцах.
- Квантовая Сингулярность (500 000 XP) — вращающаяся чёрная дыра над сектором.
- Цитадель Гранд-Оверлорда (1 000 000 XP) — 200-метровый золотой шпиль.
Помимо мегаструктур есть апгрейды: спутниковый линк, оверклокинг виртуального процессора, золотые рамки аватара, эксклюзивные титулы для Зала Славы. Смысл не в том, чтобы «купить красоту», а в том, чтобы дать XP материальный вес. Опыт не просто цифра в профиле — он меняет облик города, который видят все.
Алгоритмы и справочник Big-O
Отдельный тренажёр для фундаментальной теории. Три компонента:
Визуализатор сортировок. Пошаговая демонстрация BubbleSort, InsertionSort, MergeSort и QuickSort. Сравниваемые элементы подсвечиваются красным, опорный элемент (pivot) — жёлтым, отсортированные позиции — зелёным. Ученик видит не результат, а процесс: как массив перестраивается на каждом шаге.
Интерактивное бинарное дерево поиска. Ученик вводит числа, наблюдает ветвление узлов, запускает поиск ключа за O(log N) с подсветкой пути. Отдельно можно вызвать балансировку по стандарту AVL и увидеть, как дерево перестраивается.
Справочник асимптотической сложности. Цветовая шкала от O(1) до O(2^N) с примерами из реальной разработки. Не абстрактные формулы, а конкретные операции: почему доступ к элементу списка — O(1), а поиск в неотсортированном массиве — O(N), и где в реальном коде это превращается в проблему.
Центр сертификации
Трёхуровневая система квалификации, привязанная к количеству пройденных уроков:
- Уровень I — Junior Python Developer (150 уроков). Синтаксис, функции, ООП, базовые базы данных, основы математики перцептрона.
- Уровень II — Middle Systems Architect (200 уроков). Алгоритмы на графах (BFS/DFS), асинхронные сокеты TCP/IP, упаковка байтов через struct, очереди, семафоры, паттерны GoF.
- Уровень III — Senior AI & AGI Engineer (300 уроков). Трансформеры, механизм внимания QKV, квантование весов INT8, микросервисные саги, консенсус Raft, ядро AGI.
После сдачи теста ученик получает именной диплом с криптографическим идентификатором и возможностью экспорта в PDF. Это не «сертификат за прохождение курса», а привязка к конкретному объёму материала.
Итог
PyCity — работающий проект, а не концепт. Он решает конкретную проблему: даёт коду визуальную обратную связь и удерживает внимание за счёт игровых механик. Технически это связка Next.js, Three.js, WASM и Socket.IO, которая выдерживает одновременную работу группы.
Ссылка: pycity.ru. Если вы преподаёте Python или работаете с браузерным 3D — проект открыт для обсуждения архитектурных решений =)