Статья о том, как я дошёл до написания сайта-игры в жанре текстового симулятора детектива.
Вводная часть
Здравствуйте, читатели, свободные посетители и вообще те, кто забрёл на эту статью. Расскажу о своём первом опыте в разработке какой-никакой, но игры.
Эта статья будет длинной, поэтому запасаемся терпением, вкусняшками и чаем. Ну-с, приступим.
Весь июль 2024-ого я посвятил улучшению своих навыков вёрстки и оформления фронтенда. Для этого пришлось подучить основы HTML, CSS, JS — всё по классике. После нескольких вечеров, проведённых за ноутбуком в поисках вдохновения, я написал свой первый сайт, который стал моим сайтом-визиткой. Все же с чего-то начинают, верно?
Немного отступления: с писанием сайтов, обработкой событий JS-кодом я был знаком, но буквально немного. Будучи студентом третьего курса физико-математического факультета по программе прикладной математики и информатики, нельзя не знать самых основ. Основы есть? Отлично. Нужно найти время для углубления всего изученного до уровня «я разбираюсь в этом». Пользуясь случаем, скажу, что помимо фронтенда, мне приходилось возиться с Python, C# и Java. Расположил языки в порядке убывания моих знаний в использовании коих. Заканчиваю отступление.
После публикации сайта на GitHub Pages (забегая вперёд: игра, о которой идёт речь в статье тоже опубликована там же) я стал заниматься его наполнением: главная, красиво оформленные блоки с интересами, макет фотогалереи (люблю фотографировать) и контакты. Чего-то не хватает. О, «Мои проекты». Сюда же нужно что-то добавлять. Закинул простенький JS-интерпретатор, редактор HTML, написанный на едином вдохновении симулятор пиццерии… И тут пошло-поехало.
Клуэдо или точка отсчёта
У меня было вдохновение, чтобы написать что-то большое, что-то такое, при взгляде на которое можно было сказать «это сделано с душой». Вот тогда я и задумался о написании детективной игры. Поразмышляв пару дней, мой соединённый тысячами миллионов нейронами разум выдал это:
Да, эта поделка — это попытка передать суть и правила игры Клуэдо. Я думаю, многие хотя бы слышали о ней. Грех не знать чуть бы не о самой популярной детективной настольной игре в мире. Ладно, за последнее не ручаюсь.
И вот, я переосмыслил для себя Клуэдо. Как оказалось, я не знал до того момента правила игры на все 100%: в моих глазах игра выглядела немного иначе. Сначала не понимал, как можно вообще играть, используя какие-то запечатанные в конверте карты. А потом я понял и осознал, насколько заблуждался об уровне интереса к этой игры.
Конечно, реализация механики игры у меня отчасти получилась, но всё равно: это очень далёкий демейк, ремейк, ремикс — называйте, как хотите. У меня получилась очень своеобразная игра. Настолько своеобразная, что половина правил настоящей Клуэдо заблудились где-то в джунглях Индонезии, а боты вообще не знают о том, что необходимо делать Финальное Обвинение, чтобы выигрывать. Тут я понял, что у меня есть потенциал склепать что-нибудь годное, но лучше придумать идею, механики и другие новаторские вещи. Конечно, вдохновение я мог получать от разных источников, но проект в итоге должен получиться крайне индивидуальным.
«Необычные подозреваемые», «CrimeBot», «Shadows of Doubt»
В достаточно давние времена, 2012-ые, мне подвернулась удача поиграть в одну игру от Nevosoft. Тут должна быть слеза ностальгии у тех, кто помнит, любит и уважает эту компанию, занимающуюся разработкой компьютерных игр аж с 2002-ого года (мой год рождения, кстати). На тот момент мне было 10 лет. И даже с тех пор во мне зародилась какая-то особая любовь к детективному жанру. Идеалом в этой сфере я стал считать именно эту игру, поскольку на основе результатов экспертиз, опроса свидетелей и других важных дел сыщиков в геймплейных моментах игры я реально воображал себя её участником: я тоже начинал логически мыслить и сопоставлять все детали друг с другим. Не исключено, что мой тогдашний детский ум можно было легко подкупить даже бутафорской свободой действий, не-случайной генерацией событий. Но даже сейчас нельзя не отдать дань уважения разработчикам за добротный экземпляр поиска предметов с элементами детектива.
Остальные игры я указал как те, которые подтолкнули меня уже непосредственно к началу планирования своей собственной игры. CrimeBot — мобильная игрушка, у которой мог бы быть огромнейший потенциал, но разработчик упростил все ключевые моменты, которые он же отметил, донельзя: это очерк, эскиз, хороший шаблон для игры. Нам даются случайные дела: жертва, около пяти подозреваемых, несколько совершенно случайных улик. Ко всему этому предлагается 7 дополнительных подсказок, без использования которых возможно получить максимальный балл за расследование. Звучит же неплохо? Да?… Возможно. Но на деле это что-то с чем-то.
Последняя, третья игра из заголовка этого раздела — это вершина всех детективных симуляторов. Не могу сказать иначе: это именно верх того, что можно назвать «подумай-оцени-сопоставь-проанализируй-выиграй» перфомансом. Так мало того. Нам даётся в руки целый процедурно-сгенерированный город с уникальными жителями. Вот тут уже говорится о настоящей свободе действий. Конечно, чем больше свобода, тем больше побочек: багов у игры не занимать.
Остановлюсь на моей истории знакомства с Shadows of Doubt. В начале 2023-его, апрель, я чисто случайно наткнулся на небезызвестном видеохостинге на обзорное видео по некой игре, находящейся в раннем доступе. Меня сразу привлекла надпись «процедурная генерация». Неужели это то, что я хотел? Идеальная игра по всем параметрам: детектив, симуляция, открытый мир, реиграбельность. Тут я и задумался.
Начало разработки и первые конкретные идеи
Сначала я выбрал платформу, на которой буду писать. Звёзды сошлись, планеты выстроились в ряд и моё изучение JS с HTML было как нельзя кстати.
В первую очередь я набросал в текстовике всю идею ядра проекта: все классы, необходимые файлы, структуру проекта.
Как видно из фотографии выше, после текстового описания я решил набросать внешний вид сайта и связи кнопок и блоков на нём. В принципе, текущая версия игры удовлетворяет схеме в полной мере.
Затем я приступил к самой разработке. Первым делом реализовал задуманное: создал ядро игры в виде класса Resident и наследуемых от него классах Victim и Murderer. Из названия понятно, какую смысловую нагрузку они будут нести. Добавил несколько дополнительных классов: для орудия преступления, для локации, для улик. Начало положено. Дальше — больше.
Добавление функционала, но без визуальной отладки
Весь следующий код я писал только лишь в рамках консоли, поэтому только буковки и циферки, без какого-либо внешнего пояснения. Во время этого этапа работы особых проблем не возникало: всё шло так, как и должно было идти. Но долго, по моим меркам.
Для достижения хоть какого-то уровня реализма и разнообразия пришлось читать интернет-источники в поисках необходимого материала для псевдослучайных генераторов: имена, фамилии, улицы, названия организаций, орудия, следы, тексты записок и так далее. Об этих генераторов я немного поговорю ниже.
Изначально весь код был завязан на Math.random(). Вскоре я добрался до тематики процедурной генерации и пришлось переписывать весь код, чтобы он работал вместе с неслучайным seed. Каждую генерацию сочетания всех параметров можно воспроизвести, это же отлично! В игре нет сохранений, потому что я не добавлял LocalStorage, но ключ генерации (зашифрованный в Base64 seed вместе с некоторыми параметрами) может хоть как-то помочь решить эту проблему. Таким образом можно расследовать дело вместе с другом. Неплохая мысль, я так полагаю.
Все материалы, генерируемые в рамках выполнения процедур, являются взаимосвязанными: генерируются жители, генерируются локации, жителям даются локации в качестве мест работы и места жительства, жители получают друзей и врагов из числа других жителей, происходит выбор жертвы и убийцы из текущих жителей, на основе параметров убийцы и жертвы строятся распорядки дня, определяется наличие алиби при помощи псевдослучайного генератора и «категории» жителя (обычный или жертва) и так далее. Всё взаимосвязано, поэтому можно проследить взаимодействия практически каждого элемента игры.
После окончания создания ядра и основ игры нужно было приступать к написанию кода, непосредственно представленного для сайта.
Финальная часть разработки и первый релиз игры
Пришла необходимость писать визуальную часть и верстать. Так как я ещё немного зелёный в разработке сайтов, мне пришлось очень много взаимодействовать с простыми функциями и страницей сайта: я выводил каждый результат выполнения процедур в содержимое веб-страницы. Дебаг, вышедший на новый уровень.
«Текстовый симулятор», «браузерная игра», «тыкалка-читалка» — вот этими словами можно описать мою игру. Я прекрасно осознаю, что игра не претендует на звание лучшей, но очень хотелось бы, чтобы именно с ней ассоциировались слова «сделана с душой».
Весь текст игры я писал сам, изучая интернет-страницы, как уже было сказано. Самой первой фишкой игры, о которой я думал, была доска с зацепками. Блок, оформленный в стиле пробковой доски, на которую будут «наклеиваться» стикеры с надписями — это именно то, от чего я отталкивался при начальных задатках игры. Я очень долго не решался приступить именно к этой части игры. Она была сделана буквально в последнюю очередь. Удивительно, но я доволен: поставленная мною цель была достигнута.
После реализации моей главной задумки я бы сказал, что разработка может считаться смело завершённой, но нет. Чем ближе я был к добавлению доски расследования, тем больше идей я отрабатывал параллельно. Реализовал блокнот, в который добавляется текст по мере продвижения расследования: всё необходимо тщательно изучать, чтобы изобразить себе картину происходящего. Чисто случайно добавил механику телефона и телевизора — из них тоже можно узнать полезную информацию, а так же некоторую историю, то есть лор игры.
Были добавлены различные пасхалки в виде отсылок на реально существующие музыкальные группы, номера телефонов, людей, истории и телевизионные каналы. Чего стоит только отсылка на телевизор GoldStar!
Нельзя забыть об отсылках на самого разработчика, то есть меня — название игрового телевизора прямо отсылает ко мне.
Немного о названии игры. Я назвал игру так, какой я её хотел бы видеть: симулятор детектива, детективный симулятор. Это должна получиться текстовая игра с симуляцией работы сыщика. Пусть и не в точности такой же работы, но очень приближённо.
Если текстовая игра хочет называться симулятором, то к ней должны быть большие требования? Подходя к концу статьи, я вспомнил ещё одну игру, которая оказала существенное влияние на меня и мой проект: Профессия Следователь. Это буквально квинтэссенция симулятора и текстовой игры. Отдельное уважение разработчику Indie Geek за такой качественный игровой опыт, который получит каждый, кто захочет приобщиться к повествованию о советском работнике сыска.
Заключение и ссылки
На данный момент я не собираюсь прекращать внедрять новые функциональные особенности, исправлять существующие ошибки. Я постараюсь прислушаться к большинству предложений от пользователей. Были бы они, конечно.
Изначальная идея игры была в её реализации, но никак не в монетизации, сборе огромной аудитории или в производстве «лучшего». Нет. Я хотел сделать что-то сам, своими руками: написать свою первую игру — это же звучит гордо. После завершения активной части разработки всё-таки захотелось узнать мнение со стороны и задуматься над словами тех, кому довелось поглазеть на моё творение.
Эта игра, как и сайт-визитка, небольшие пет-проекты. Возможно, эти проекты станут моей отправной точкой для чего-то большего. Любой опыт — это опыт.
Мои проекты лежат на GitHub. Чтобы не тратиться на платный хостинг, был выбран именно такой вариант. Помимо простого веб-сайта, я сделал PWA (прогрессивное веб-приложение) для симулятора детектива. Где-то в глубине души я так и хотел сделать буквально как только взялся писать фронт — интерфейс сайта идеально подошёл под почти-нативное приложение.
Возможно, когда-нибудь, я сделаю .apk или приложение под какую-нибудь другую операционную систему или платформу. Как я уже сказал, все начинают с малого. Потихоньку, понемногу, возможно, даже с ошибками, но нужно пробовать. Ну, посмотрим.
Как и обещал, держите ссылки на мои упомянутые проекты:
https://vyachikx.github.io (сайт-визитка)
https://vyachikx.github.io/Detective_Simulator (симулятор детектива)
Послесловие
Всем прочитавшим это: спасибо, что выслушали меня.
Всем посетившим сайт: строго не судите, я только учусь.
Всем людям на Земле: удачи! ✌