Я зміг і ви зможете: робимо RPG на JavaScript

image

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

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

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

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

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

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

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

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

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

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

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

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

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

Спрайт-листи

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

Зберегти стан гри

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

image

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

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

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

image
Клянусь, я не писав цього… Еее мене змусили

image
У нього навіть є функція, яка додає користувальницькі функції

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

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

Цикл гри

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

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

Але ще є смерть боса. Її перевірку я запускаю кожну секунду з моменту початку битви. Чому? Щоб гравцеві не довелося чекати 20 секунд поки бос помре. Для деяких речей цикл навіть не потрібен. Функції просто можна викликати тоді, коли вони потрібні. Візьміть, наприклад, функцію заклинання. Вона потрібна тільки тоді, коли гравець використовує заклинання.

Ось що я дізнався:
  • Об'єкти це добре. Коли вам потрібно зберегти дані, вам просто потрібно зберегти об'єкт, а не 50 окремих змінних.
  • Завжди задавайте тайм-аути і інтервали в якості змінних, щоб їх потім можна було очистити — не робіть цього тільки в тому випадку, якщо це постійні ефекти і ви впевнені, що їх потім не доведеться очищати.
  • Один великий файл JavaScript не сама мудра ідея. CodePen дозволяє використовувати тільки один JavaScript файл, але в ідеалі, ви повинні поділити на модулі.
  • Якщо Ви не турбуєтесь про продуктивності, ви можете просто скопіювати і вставити об'єкт, коли він потребує оновлення — немає необхідності оновлювати половину значень окремо. Якщо об'єкт величезний, ви навіть можете визначити його спочатку в якості змінної, як: var object; а потім побудувати його, використовуючи деякі інші функції, коли ви хочете його оновити. Я зробив це з моїми заклинаннями. Кожен раз, коли гравець використовує заклинання, функція updateSpell() спочатку визначає об'єкт цього заклинання знову, прораховує весь шкоди і статистичні дані, а потім викликає заклинання.
Забавні факти, з якими мені довелося змиритися:
  • Здатність до мане на рівні боса, тому що якби вона була на рівні гравця, я б карав гравців кожен раз, коли у них підвищувався рівень. Також це зробило б босів більш високого рівня набагато складніше, ніж мені б цього хотілося.
  • Елементи створюються з усієї статистикою, але не відображаються, якщо вони дорівнюють 0. Таким чином, мені не потрібно перевіряти визначені вони і я можу не показувати статистику, якщо вони дорівнюють 0. Подвійна перемога!
  • У мене багато спрощених бафів і дебафов. Є змінні buffStat, nerfStat, totalStat і stat. Тому бафи і дебафы ніколи не в стеку.
  • З босами навички не нерфится до нуля. Все набагато складніше. Параметри нерфятся від 9999999, потім перевіряє менше вона нуля. Якщо так, то він прирівнює їх до нуля. Так що якщо вам вдасться досягти рівня, де параметри будуть виражені в мільярдах, мені, можливо, доведеться додати більше нулів.
Все це навчило мене, що потрібно планувати гру, трохи забігаючи вперед, навіть якщо я просто створюю кумедний проект, щоб розширити свої вміння і навички. Крім того, тепер у мене є набагато краще розуміння того, як виникають помилки: іноді ви не усвідомлюєте всі прикордонні випадки, які можуть перекрити вам дорогу. І ось тоді баги кусаються.

Баги і експлойти
Це вразило мене і трохи злякало. Я не міг повірити, що в моєму непорочне творінні є баги.

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

Ось кілька багів і експлойтів, які спливли в пам'яті:

  1. Ти можеш змінити рівень боса під час битви з ним, і цикл тоді працює краще.
  2. Індикатори досвіду і мани часом переповнюються.
  3. Ти можеш атакувати боса до того як почалася битва. Ось так ляпас!
  4. Мана може стати негативною і це не дозволить вам виконувати навіть базові атаки, які є основним способом відновити ману.
  5. Лікування тимчасово збільшує максимальну кількість здоров'я.
  6. Одне заклинання насправді було неробочим з-за проблем з CSS.
  7. Якщо ти атакуєш не в бою, то твої чари будуть перебувати на нескінченній перезарядці.
Все це звучить жахливо, чи не правда? В MMORPG, ці речі з першого ж дня все зіпсують! Ну, гарною новиною є те, що більшість з них були легко виправити, як правило, достатньо було написати менше одного рядка коду. Інші помилки, однак, вимагали, щоб я повністю переробив всю систему. З системою заклинань я прийшов від написання цілих трьох функцій для кожного заклинання до того, що мені потрібно було описати всього лише невеликий об'єкт, який займає всього кілька секунд редагування.

Робіть свою гру на JavaScript і отримуйте задоволення.

Підтримка публікації — компанія Edison, яка розробляє геолокаційні ігри з орками і демонами і проводила технічний аудит і доопрацювання економічної гри.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.