Привет! Я преподаватель информатики и математики. В один прекрасный день осознал простую и важную вещь: дети (и взрослые) любят игры, а математику не любят. И с этим ничего нельзя сделать.

Начал размышлять, как бы геймифицировать учебный процесс. Увлекаюсь HTML, CSS, JavaScript, поэтому задумал написать игру, в которой сюжет продвигался бы за счёт решения задач — и написал. Но самое интересное не это, а вот что:

Трудно быть и продактом, и разработчиком — то бишь и визионером, и исполнителем — в одном лице. Точнее не столько трудно, сколько долго. Ведь в промежутках неплохо бы заниматься своей непосредственной работой — то есть вести уроки)) Нужна помощь — миньоны-разработчики.

Кто же поможет сам-себе-продакту в наш лихой век смены кодерской парадигмы? Правильно! Искусственный интеллект! Яндекс.Шедеврум, Mistral AI, ChatGPT-4o, Claude 3.5 и прочие миньончики. Ибо полноценный раб разраб мне не по карману.

Итак, в статье рассказываю о том, как писал свою первую обучающую игру на JS и половину работы, если не больше, делегировал ИИ.

Постановка задачи

Задача: браузерная игра, в которой сюжет продвигается вперёд за счёт решения задач уровня ОГЭ по математике. Нужны локации, персонажи, уникальные задачи, увлекательный сюжет. И, конечно же, код, реализующий смену локаций, прорисовку и адаптивность всех элементов, генерацию канвасов с задачами, проверку введённых ответов и тд.

Геймплей: попадаешь в локацию → читаешь диалоги → заводишь курсор в красный квадратик (в мобильной версии на этот квадратик нужно жмякнуть) → появляется задача → решаешь задачу. Если решил правильно — попадаешь в следующую локацию. Если нет — попадаешь в начало игры. Если прошёл все локации — вознаграждаешься ощущением своего могущества и возможностью задонатить автору))

Познакомьтесь с командой

Перед вами фотография моей команды разработчиков.

Справа-налево:

→ попугайчик — это Яндекс.Шедеврум. Суммарно за час-другой промптинга он нарисовал мне все локации и всех персонажей. Согласитесь, неплохо. Самой трудной работой было потом убрать с отдельных картинок фон и подготовить прозрачные png-шки персонажей.

→ манки-кодер — это я, продакт-менеджер, так сказать. И сценарист.

→ слон — это Mistral AI (и другие модели), неуклюжий, но горящий желанием помочь. Как-то так получилось, что у меня сложилось взаимопонимание именно с ним — баланс адекватности и доступности. Он (ну ладно, Claude 3.5 Sonnet тоже поучаствовал) написал добрую половину кода. Также он (и немножко ChatGPT-4o) сгенерировал условия всех используемых в игре задач, сразу сверстав и оформив их в готовом для вырезания виде. Генерация задач также потребовала моего чуткого научного руководства, потому что некоторые придуманные ИИ задачи снабжались неверными ответами. Некоторые были вовсе сформулированы некорректно и решения не имели. Например, Mistral AI считает, что диагональ произвольного параллелограмма можно найти через теорему Пифагора (скрин, к сожалению, потерял). Глаз за ним да глаз.

→ Питон — желанный гость на любой вечеринке, даже если на нём не написано ни строчки (а на нём в проекте и правда не написано ни строчки). Его задача — молчаливо быть. Когда-нибудь, когда обезьянка-кодер превратится в гориллу-программиста, мы обязательно напишем свой сервер. Но пока этот великий день не настал, Питон просто получает зарплату за то, что смотрит мемчики в соцсетях. Хоть бы день так пожить.

Что «мы» с самого начала сделали не так

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

Величайшая проблема: организация данных игры. Я ещё не научился связываться через веб-запросы с JSON-файлами из JS-кода, а открыть JSON-файл напрямую из JS-кода как будто бы нельзя. Пытался с помощью Mistral AI пересобрать свои списки в объект, но с наскоку не получилось, так как потребовалось менять ещё и код. Глубоко вдохнул, вспомнил все известные мне нецензурные слова, заполнил километровые списки с диалогами, оставил всё как есть — громоздко, но работает. Приберегу прозрения для следующих работ, а пока довольствуюсь МВП. Может быть, мои поделки вообще никому не пригодятся, а я тут буду гуглить всуе — зачем?

Как кодит Mistral AI

Подобрались к самому главному — как устроен код, и что именно писал ИИ.

Совсем не включать голову не получится. Как только я начинал лениться и уходить от технических деталей, машина беззастенчиво лажала.

Такой промпт:

даст более надёжный результат, чем такой:

Во втором случае модель не заставила себя долго ждать и моментально выдала чушь. И это нормально. Без ТЗ результат — сами знаете что. Мысли читать она пока не научилась. Чтобы формулировать запрос на модификацию кода как можно чётче и в терминах используемых в коде конструкций, вам придётся читать созданный моделью код (и свой собственный тоже) и хорошо в нём ориентироваться.

Но даже в таком виде ИИ — огромное подспорье! Я, например, понятия не имел (и до сих пор не имею), как расположить два канваса один на другом с сохранением пропорций и поведения при смене разрешения экрана — модель это сделала ЗА МЕНЯ. Она же начала таскать отдельный канвас вместе с курсором мыши. Я бы потратил битый час, разбираясь, как правильно работает синтаксис обработки событий mousemove и как написать для него eventlistener.

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

Но давайте обо всём по порядку.

Обзор итогового кода шаг за шагом

Глобальные переменные игры:

→ canvas, ctx — пространство, в котором рисуем игру.

→ hero — канвас с небольшой иконкой героя, которая таскается за курсором мыши. На спрашивайте «зачем». Дезигн — наше фсё.

→ person — канвас, в котором происходит смена побочных персонажей.

→ hero_face — канвас с картинкой главного героя.

→ squareXStart, squareYStart, squareXEnd, squareYEnd — координаты левого верхнего и правого нижнего углов рандомного красного квадрата. Когда курсор попадает в этот квадрат, появляется условие задачи и поле для ответа.

→ scene — счётчик сцен, самая главная переменная игры.

→ start_flag — техническая переменная, позволяющая избавиться от дублирования красного квадрата в начале игры.

Функцию адаптивности resizeCanvas почти полностью написал Mistral AI (или кто-то из его товарищей, я жу не помню всех деталей):

Заходим в игру с такого кода:

Кликаем на кнопку «Начать» и попадаем в функцию startGame:

Далее отправляемся в функцию makeScene:

Эта функция отвечает за создание текущей сцены. Внутри неё живёт стыдобушка — огроменный блок «if-else if-else», который кастомит расположение и размеры героев на канвасе. Объекты фона не адаптивны, так что ничего умнее, кроме как вручную прописать параметры героев в каждой отдельной сцене, я придумать не смог. Отголосок тоски по хорошему JSON'у с данными игры...

Заканчиваем километровый «if-else if-else» и завершаем формирование сцены:

Мы вызывали функцию makeScene из функции startGame, поэтому по завершении первой снова оказываемся во второй. Там на очереди стоит функция set_random_rect, которая формирует рандомный (появляется в рандомном месте экрана) красный квадрат, взаимодействие с которым вызывает появление условия задачи.

set_random_rect — магия ИИ в действии. Почти полностью написана ИИ. Я вообще поначалу не вдумывался в жуткую математику высчитывания координат. Позже, однако, пришлось вручную расширить ассоциированную с квадратом область, в которой код будет реагировать на положение курсора.

И снова возвращаемся в startGame, где вслед за генерацией квадрата вызываем листенер курсора мыши с прикрученным к нему канвасом, в котором помещена картинка парнишки на доске:

Эта функция была написана ИИ. Я же вставил свои 30 пикселей (в прямом смысле слова) уже на этапе тестирования и причёсывания кода. Вообще не врубаюсь, что здесь происходит))

hero_search запускает механику появления картинки с текущей задачей, создание поля и кнопки подачи ответа, проверки ответа:

Приведённые выше функции фактически полностью написаны Mistral AI. Это ключевой момент игры: именно здесь живёт инкремент scene++, а также происходит проверка, не пора ли закончить игру. Если нарываемся на максимальный индекс сцены (56), то уходим на сценарий окончания игры. Ничего сверхумного в этом сценарии нет — выводим сообщение о победе, создаём и отображаем кнопки подписки на мой тг-канал и перехода к «Яндекс.Чаевым» для донатов. Не буду приводить этот код, он тоже написан Mistral AI, можете посмотреть интересующие детали в репозитории игры.

Если же переменная scene ещё не достигла 56, то мы снова ныряем в startGame, и всё начинается по кругу. Если же ответ и вовсе оказался неверным, то переменная scene обнуляется, и мы снова попадаем в начало игры:

Что вежливые мальчики и девочки говорят в конце? Правильно! «Спасибо!»

Чтобы не загромождать и без того раздобревшую статью, не стал приводить HTML и CSS коды. Mistral AI весьма успешно писал и их. Здесь — полный код игры для заинтересованных.

Вместо послесловия

«Мы» не самые опытные на свете разработчики, но непрерывно растём. Уважаемый читатель, прости «нам» невежество и наивность, с которыми ты, вероятно, неоднократно встретился в тексте статьи. Не взыщи, пойми, прости и отпусти. Можешь даже закрыть страницу и смачно плюнуть в монитор, мы не обидимся (монитор-то твой). А лучше поделись своими мыслями в комментариях. Возможно, некоторые путанные для «нас» вопросы на самом деле решаются в две строки.

Если интересно следить за дальнейшими приколами, взлетами и падениями моей мысли — подписывайтесь.

Вспомнить школьную математику и поиграть в игру можно здесь.