Я створив рольову гру на JavaScript. Ти теж можеш. Ось як.

Отже, ви хочете спробувати створити гру, але трохи залякані? Не хвилюйся, я теж був!

Наприклад, я боявся використовувати предмети. Вони були цією великою моторошною штукою, яку я відклав пізніше. Але зараз я ними весь час користуюся!

Я проведу вас через усі кроки, які я пройшов, щоб побудувати свою рольову гру на JavaScript.

Ось моя гра, що працює на CodePen. (Зверніть увагу, що це ще не оптимізовано для мобільних пристроїв):

По-перше ,виберіть сенс вашої гри. Це головоломка? Рольова гра? Рубати і слєш? Гаразд, тепер подумайте про технічні труднощі його виготовлення. Для головоломки потрібно багато складного javascript. Hack & slash вимагає багато ретельного балансування тощо.

Також вирішіть, чи хочете ви, щоб це була браузерна гра, мобільна гра чи і те, і інше („рідна веб-гра“).

Наприклад, моя гра погано вміщується на мобільному екрані, оскільки у гравця 24 заклинання. Це не зручно натискати ці маленькі кнопки на крихітному екрані, тому мені потрібно було б переробити гру для мобільних пристроїв.

По-друге , запишіть все, що вам потрібно запрограмувати, щоб насправді зробити гру. Для мене це було:

  • система інвентаризації
  • генератор предметів
  • система статистики гравця
  • система збереження

По-третє , почніть створювати свою гру, вирішуючи ці проблеми по одному.

Потрібна допомога у власне створенні гри?

Набагато простіше розбити свою гру на невеликі завдання. Ви не робите гру, ви робите систему інвентаризації. Тоді ви робите бойову систему. І так далі.

Якщо ви вже не вмієте малювати - або не хочете витратити місяці чи роки на те, щоб це зробити - використовуйте ці інструменти для створення активів, які дозволять вашій грі виглядати добре:

  • Game-Icons.net - ці іконки веселі та їх легко розфарбувати
  • Open Game Art - отримайте чудові активи у відкритому доступі
  • Фотографії масового розміру - чудовий інструмент для створення власних крихітних значків
  • CSS Sprite Generator - допомагає створювати таблиці спрайтів CSS для ваших значків

Проблеми, з якими я стикався з ними, і як я їх вирішував

Довідкові таблиці

Чи плануєте ви мати у своїй грі більше 20 зображень? Якщо так, ви не хочете робити 20 зображень із посиланнями на зображення до кожного. Можливо, ви не думаєте, що 20 зображень - це так багато, але якщо ви вирішите додати ще 50? Ось тут спрайти дуже корисні. Нанесіть на них кілька зображень, скопіюйте файл CSS у свій проект і просто додайте клас до свого елементу, який відповідає бажаному зображенню.

Збереження стану вашої гри

Ви хочете, щоб вашу гру було збережено? Ви можете вибрати між використанням LocalStorage у браузері та зберіганням речей на сервері. Сервери вимагають знань на задньому плані. Якщо у вас їх немає, я пропоную використовувати LocalStorage. Це зберігає гру до тих пір, поки користувач не видалить її за допомогою якогось інструменту очищення. Ось як я це зробив:

В основному, зберігайте всі дані в одному об’єкті, а потім оновлюйте елементи при завантаженні. Використовуйте JSON stringify і проаналізуйте його пізніше.

Модулюйте свій код

З’ясуйте, яку частину жорстко кодувати, а яку - модулювати. Я помилково розпочав заклинання з жорстким кодуванням, які швидко потворніли. Мені було потрібно 24 з цих функцій, а також 24 функції ifCritical.

Тепер ви можете запитати, як працює друге заклинання? У мене є функція playerAttack (), яка використовує об'єкт spell для виконання речей:

  • Спочатку запускається функція заклинань оновлення, яка викликає об’єкт заклинань. Потім заклинання бере вашу поточну статистику і перетворює їх у такі значення, як «шкода» та «вартість мани».
  • Він перевіряє, чи збиток перевищує 0. Якщо так, він завдає шкоди босу і відображає шкоду, який заклинання це зробив, і суму. Це робиться для більшості інших цінностей. Ви можете подумати, що перевірка більше нуля марна, але ви знову подумаєте, коли гра скаже, що ви завдали 0 шкоди і відновили 0 мани.
  • Потім вона запускає спеціальну функцію, якщо заклинання її має. Це може бути використано для створення заклинань спеціальних ефектів, які неможливі завдяки нашій головній функції атаки.

Ігрова петля

Для мене ігровий цикл перевіряє та оновлює речі: статистику гравця, чи мертвий гравець, чи тільки вирівнявся гравець, чи мертвий бос тощо.

Вам доведеться розібратися з цим самостійно. Я думаю, що це хороший досвід навчання. Подумайте, що і коли потрібно запускати перевірки та оновлення. Наприклад, перевіряючи рівень, я встановлюю, що він запускається кожні 20 секунд, оскільки вирівнювання не є такою великою проблемою.

Але тоді у мене також є перевірка смерті Боса, яка проходить кожну секунду після початку бою. Чому? Тож гравцям не потрібно чекати 20 секунд, поки бос помре.

Деякі інші речі навіть не повинні бути в курсі. Функції можна просто викликати, коли вони потрібні. Візьмемо, наприклад, мою функцію заклинання оновлення. Це викликається лише тоді, коли гравець використовує заклинання.

Дещо я дізнався:

  • Предмети хороші. Таким чином, коли потрібно зберігати дані, потрібно просто зберегти об’єкт, а не 50 окремих змінних.
  • Завжди встановлюйте тайм-аути та інтервали як змінні, щоб їх можна було очистити пізніше - якщо це не є постійними ефектами, і ви впевнені, що вам ніколи не потрібно буде їх очищати.
  • Один великий файл JavaScript може бути не дуже розумною ідеєю. CodePen допускає лише один файл JavaScript, але в ідеалі вам слід розділити все на модулі.
  • Якщо вас не турбує продуктивність, ви можете просто скопіювати та вставити об’єкт, коли його потрібно оновити - немає необхідності оновлювати половину значень окремо. Якщо об’єкт величезний, ви навіть можете визначити його спочатку як змінну, наприклад: var об’єкт; а потім створити його за допомогою іншої функції, коли ви хочете, щоб її оновити. Я зробив це за допомогою своїх заклинань. Кожного разу, коли гравець робить заклинання, функція updateSpell () спочатку знову визначає об’єкт заклинань, обчислює весь збиток і статистику, а потім спрацьовує заклинання.

Кумедні речі, щодо яких я пішов на компроміс:

  • Витрати мани на майстерність припадають на рівень боса, бо якби вони були на рівні гравця, я б покарав гравців за рівень. Це також значно ускладнило босів вищого рівня, що мені сподобалось.
  • Елементи створюються з усіма статистичними даними, але вони не відображаються, якщо вони дорівнюють 0. Таким чином, мені не потрібно перевіряти невизначеність, і я можу уникнути відображення статистики, якщо вони створені як 0. Подвійний виграш!
  • Я багато спрощував бафи та дебафи. В основному, є var buffStat, nerfStat, totalStat і stat. Тож бафи чи дебафи ніколи не складаються.
  • Що стосується босів, вміння nerf stat насправді не нервує до 0. Це набагато складніше, ніж це. Він перетворює статистику на 9999999, а потім перевіряє, чи менше вона 0. Якщо так, він встановлює її на 0. Отже, якщо вам вдається досягти рівня, коли у вас є статистика, яка налічує мільярди, мені, можливо, доведеться додати більше нулі.

Все, що мені здалося, це те, що я мав би планувати трохи далі, навіть якщо я просто будую цікавий проект для розширення власних навичок.

Крім того, я тепер набагато краще розумію, як виникають помилки: іноді ви не усвідомлюєте всіх крайніх випадків, коли щось може зламати дорогу. І саме тоді помилки кусаються.

Помилки та подвиги

Цей мене вразив і трохи злякав. Я не міг повірити, що мій ідеальний витвір мистецтва містить помилок!

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

Ось декілька помилок і подвигів, які з’явились у мене вгорі:

  1. Ви можете змінити рівні босів, борючись із босом, і таким чином отримати кращі здобичі
  2. Бари HP і Mana колись переповнюються
  3. Ви могли напасти на боса ще до початку битви. Говоримо про присоску!
  4. Мана може стати негативною, що заважало вам виконувати навіть основні атаки, що є основним способом відновлення вашої мани.
  5. Зцілення тимчасово збільшило ваш максимальний стан здоров'я.
  6. Одне заклинання насправді не можна було натиснути більшу частину часу через проблему CSS
  7. Атакуючи, не перебуваючи в бою, покладіть свої заклинання на нескінченне відновлення часу

Все це звучить жахливо, правда? У MMORPG ці речі з першого дня зловживали б і все зіпсували!

Ну, хороша новина полягає в тому, що більшість з них легко можна було виправити - зазвичай вони мали менше 1 рядка коду.

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

Знову ж, ось моя гра, якщо ви хочете спробувати (зверніть увагу, що вона не оптимізована для мобільних пристроїв):

І ось код (який також є відкритим і редагується на CodePen):

Роберт Скалко / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Вбивайте босів, отримуйте LOOT! github.com

Майте на увазі, що я новачок (лише 2 місяці займаюся програмуванням), тому деякі мої рішення можна вдосконалити. Сподіваюся, я дав вам принаймні основи, щоб розпочати!

Отримуйте задоволення від створення вашої гри Javascript!