Від стародавніх фоліантів до HTML5 Canvas. Як я створив браузерну стратегію про Хрестові походи за допомогою AI

Привіт, мене звати Сергій! За своєю додатковою освітою я архівознавець і бібліотекар, і ось уже понад 11 років професійно заглиблююсь у питання біблеїстики та історію Хрестових походів. Любов до книжок і структуризації інформації у мене буквально спадкова: мій тато тривалий час працював у бібліотеці на площі Ринок у Львові.

Я встиг пожити на Мальті, де на власні очі бачив збудовані госпітальєрами Жана де Валетта стіни — їхня товщина настільки велика, що сьогодні там розташовують майданчики для мініфутболу. Я погойдувався на хвилях Босфору біля Айя-Софії в Стамбулі, роздивляючись мури Константинополя, плавав у морі стародавнього порту Яффа і досліджував залишені хрестоносцями знаки у Старому Місті Єрусалима. Однією з моїх мрій є переклад з вірменської трактувань Івана Золотоустого на послання апостола Павла, які тривалий час вважалися зниклими, але відносно нещовно були знайдені в мекітаристському монастирі на одному з островів Венеції.

Але сьогодні мова піде не про них. Мова про те, як одного звичного вечора, тиняючись просторами мережі, я почув від одного французького фулстек-розробника на Twitch про дуже зручні консольні утиліти для автоматизованого написання коду.

Хоча моя основна професійна діяльність вже багато років тісно пов’язана з бекенд-розробкою та технічним артом, для цього пет-проєкту я вирішив піти нестандартним шляхом. Замість того, щоб збирати класичну команду з програмістів і дизайнерів, я делегував левову частку роботи штучному інтелекту. Моїми повноправними кофаундерами стали Claude Code (для архітектури та логіки), MidJourney та Nano Banana Pro.

Я жартую, що дізнався значення терміну «гра з ізометричною проекцією» вже після того, як завершив її розробку. І ось що з цього вийшло.

Екран завантаження гри з персонажем постачальника

Концепт: Чому саме 2D і до чого тут шахи

Зараз я рідко граю в ігри. Маю невеличке захоплення сім-рейсингом — зокрема світовими трасами Гран-прі, — але це скоріше схоже на тренажер для керування спортивним автомобілем на треку, а не на аркадні перегони на кшталт NFS.

Коли думаєш про ігри, присвячені Хрестовим походам, першою на думку спадає RTS Stronghold Crusader, яку ще в епоху CD-ROM мені подарував один священник, що палко захоплювався програмуванням. Іншою легендою, що приковувала мою увагу, була покрокова Heroes of Might and Magic III. Наступні версії (як Heroes 4 чи Stronghold 2) здавалися мені менш вдалими. Їхня 3D-графіка створювала якийсь низькоякісний пластиліновий ефект. Якщо в сім-рейсингу 3D є абсолютно невіддільною частиною занурення, то в стратегіях, які за своєю суттю є розвитком двокоординатних настільних шахів, просторова візуалізація не є необхідністю.

Ще однією іконою стилю для мене була Disciples 2 — покрокова стратегія у темному фентезі з неймовірно якісним 2D-артом. Але і її третя частина, на жаль, піддалася тренду на перехід у тривимірний простір, втративши свій шарм. Як Technical Artist, я глибоко ціную естетику чистого 2D.

Цікава паралель із шахами: багато спортсменів стомлюються від класичної гри і переходять на турнірні варіації. Наприклад, шахи Фішера, де фігури на першій горизонталі розташовуються випадковим чином. Або «шахи-каченя», де на кожному ході одну клітинку випадково займає гумове каченя, блокуючи хід. Відомий чемпіон Магнус Карлсен часто грає в такі альтернативні версії, а його найближчий конкурент, японець Хікару Накамура, обожнює стратегічні відеоігри. Моя гра — це спроба створити свою власну «шахову дошку» з асиметричними правилами та історичним бекграундом.

Історичний бекграунд: Від Реконкісти до генеалогії

Реконкіста Іберійського півострова також мала статус Хрестового походу. Лицарі короля Річарда Левове Серце дорогою до Святої Землі часто брали участь у битвах із сарацинами на території сучасної Іспанії. Тому, вибираючи локації для перших карт, я зупинився на іспанській Валенсії, близькосхідному портовому місті Акра (Акко), острові Родос та Антіохії.

Тут варто зробити невеликий ліричний відступ у генеалогію. На кожному щаблі вашого родинного дерева кількість предків зростає у геометричній прогресії: двоє батьків, четверо бабусь і дідусів, восьмеро прабабусь і прадідусів тощо. Якщо рахувати одне покоління як 25 років, то за 1000 років кількість ваших математичних предків значно перевищує загальне населення планети того часу.

Це означає, що гілки неминуче перехрещуються. Згідно з дослідженнями Джозефа Чанга (стаття «Recent Common Ancestors of All Present-Day Individuals»), за одне тисячоліття будь-яка людина, що залишила потомство, сьогодні з імовірністю 80% є безпосереднім предком кожної людини, що живе на цій території. Простіше кажучи: якщо Річард Левове Серце залишив потомство, то з імовірністю 80% він є прадідусем кожного сучасного француза та англійця. Те саме стосується Володимира Великого та княгині Ольги — з імовірністю 80% вони є прямими предками і тебе, дорогий читачу, що гортає цей текст.

Але повернемось до Хрестових походів. Однією з найстрашніших загроз для армій були не лише стріли ворога, а й суворий клімат. Хрестоносці постійно потерпали від хвороб, сонячних ударів та спеки. Це призводило до катастрофічних проблем з провізією та водою. Саме цей історичний факт став основою для однієї з ключових механік моєї гри.

Crusades Strategy: Браузерна стратегія епохи Хрестових походів

Crusades Strategy — це покрокова гра, дія якої розгортається на землях Святої Землі у XI–XII століттях. Вона працює прямо у браузері без жодного встановлення: достатньо відкрити сторінку. Два гравці (або гравець і ШІ) змагаються за контроль над ключовими містами Близького Сходу, командуючи арміями хрестоносців або сарацинів.

Проєкт пропонує класичний ігровий досвід у дусі Heroes of Might and Magic — з героями, арміями, ресурсами та артефактами.

Головний екран гри з меню

Технології: Чистий HTML5 Canvas

Гра повністю створена з нуля, на HTML5 Canvas без використання важких ігрових рушіїв на кшталт Unity, ThreeJS чи Phaser. Кожен кадр малюється з нуля: тайлова карта, юніти, будівлі, інтерфейс — усе рендериться власноруч.

Розмір тайлів динамічно підлаштовується під вікно браузера, тому гра чудово виглядає на будь-яких моніторах. Архітектура побудована на ванільному JavaScript і розбита на модулі конфігурації, стейт-менеджменту, спеціалізованих рендерерів та ШІ для синглплеєра. Такий підхід дає повний контроль над кожним пікселем і гарантує миттєву швидкість завантаження. Вся графіка — від спрайтів героїв до тайлів місцевості — компонується на канвасі в реальному часі.

Інтерфейс гри з тайловою картою та панеллю управління

Карта та зони: Філософія «без скролу»

Ігровий світ складається з чотирьох історичних карт: Валенсія (1094), Родос (1097), Акко (1191) та Антіохія (1098).

Кожна зона — це сітка розміром 16×12 тайлів, яка повністю вміщується на екрані. Це принципове дизайнерське рішення. Гравець завжди бачить усе поле одразу, без потреби тягати камеру мишею. Вся тактична інформація доступна з одного погляду.

Зони з’єднані порталами — двосторонніми переходами (переміщення займає один хід). Ландшафт відіграє критичну роль: гори та водойми формують вузькі проходи («пляшкові горлечка»), а оази посеред пустелі стають життєво необхідними точками для виживання.

Фракції та герої

У грі є дві сторони: Хрестоносці (сині) та Сарацини (червоні). Грати можна в режимі hot-seat (удвох за одним екраном) або проти штучного інтелекту.

Кожна фракція має 4 унікальні класи героїв:

• Хрестоносці: Лицар (Knight — бонус до захисту), Король (King — підсилення армії), Паломник (Pilgrim — геній логістики), Паладін (Paladin — бонус до атаки).
• Сарацини: Султан (Sultan — потужний лідер), Візир (Vizier — майстер захисту), Рейдер (Raider — бонус до пересування), Асасін (Assassin — майстер виживання).

Вибір героя на початку гри

Бойова система: Юніти та Огорожі (Fences)

Доступно шість типів юнітів: Knight (піхота), Archer (стрільці), Swordsman (важка піхота), Chevalier (кавалерія), Medic (лікування) та унікальний оборонний юніт — Fence (Огорожа). Окремим викликом на карті є Золотий Дракон (380 HP, 75 ATK) — найсильніша нейтральна істота.

Механіка Огорож додає неймовірної тактичної глибини. Якщо у вашій армії є Огорожа, на початку бою вона розгортається у три сегменти дерев’яного бар’єра (80 HP, 30 DEF) перед вашими військами. Вони не можуть атакувати чи рухатись, але ламають алгоритм пошуку шляху (BFS) для ворожої мілі-піхоти, змушуючи їх витрачати ходи на обхід або пробивання стіни. Тим часом ваші лучники спокійно розстрілюють ворога з-за укриття.

Огорожі на полі бою, що блокують ворога

Логістика: Пустеля не прощає помилок

Це те, що відрізняє Crusades Strategy від інших покрокових ігор. Кожен герой несе запаси води та провіанту, які невпинно спалюються з кожним ходом (навіть під час простою).

Якщо запаси падають до нуля, починається голод: армія втрачає 25% складу щоходу. Навіть армада непереможних лицарів перетвориться на пил за чотири ходи в пустелі без води. Щоб вижити, потрібно захоплювати оази, будувати Пости Постачання та використовувати спеціальних героїв (наприклад, Паломник споживає лише 60% ресурсів, а Асасін — 70%).

Постачальник в замку

📜 Кампанія та Артефакти

На картах заховано шість потужних артефактів (Меч Хрестоносця, Щит Акко, Прапор Утремера тощо), які кардинально змінюють математику бою. Отримати їх можна в битвах або... відповідаючи на питання історичної вікторини від NPC.

Одиночна кампанія проводить гравця через чотири розділи (Валенсія → Родос → Акко → Антіохія). Між рівнями на вас чекає квіз з реальної історії Хрестових походів — правильні відповіді дають золото на наступний етап. Весь прогрес зберігається у localStorage вашого браузера.

Цей проєкт став для мене ідеальним майданчиком для об’єднання любові до історії, навичок технічного арту та можливостей сучасного ШІ. Завдяки штучному інтелекту, розробка інді-ігор сьогодні доступна як ніколи раніше, навіть якщо ви працюєте соло.

Crusades Strategy — це повністю безкоштовна гра. Жодних завантажень, жодних реєстрацій. Просто відкривайте сторінку та спробуйте переписати історію Близького Сходу: crusades.online.

🤍 Як підтримати проект

Якщо вам сподобалася гра і ви хочете підтримати її розвиток та оплату серверів, це можна зробити тут закинувши 55 грн: pay.monobank.ua/2604093XmviaDUbAuxsh

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини про геймдев