Изградих ролева игра в JavaScript. Можете също. Ето как.

Значи искате да опитате и да направите игра, но сте малко сплашени? Не се притеснявайте, и аз бях!

Страхувах се например от използване на предмети. Те бяха това голямо призрачно нещо, което отложих за по-късно. Но сега ги използвам през цялото време!

Ще ви преведа през всички стъпки, през които преминах, за да изградя моята ролева игра на JavaScript.

Ето моята игра, работеща на CodePen. (Имайте предвид, че все още не е оптимизиран за мобилни устройства):

Първо ,изберете точката на играта си. Пъзел ли е? RPG? Хак и наклонена черта? Добре, сега помислете за техническите трудности при направата му. Пъзел игра ще изисква много сложен javascript. Хак и наклонена черта ще се нуждаят от много внимателно балансиране и т.н.

Също така решете дали искате да бъде игра с браузър, мобилна игра или и двете (игра с „родна мрежа“).

Например, играта ми не може да се побере добре на мобилния екран, тъй като играчът има 24 магии. Не е удобно да щракнете върху тези малки бутони на малък екран, така че ще трябва да преработя играта за мобилни устройства.

Второ , запишете всички неща, които трябва да програмирате, за да направите действително играта. За мен беше:

  • система за инвентаризация
  • генератор на артикули
  • система за игра на статистиката
  • система за спестяване

Трето , започнете да правите играта си, като решавате тези проблеми един по един.

Имате нужда от помощ в действителност за създаването на играта?

Много по-лесно е да разделите играта си на малки задачи. Вие не правите игра, а система за инвентаризация. След това правите бойна система. И така нататък.

Освен ако вече не се справяте добре с рисуването - или не искате да прекарате месеци или години, за да се справите - използвайте тези инструменти, за да създадете активи, които ще направят играта ви да изглежда добре:

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

Проблеми, с които се сблъсках и как ги реших

Спрайтове

Планирате ли да имате повече от 20 изображения във вашата игра? Ако е така, не искате да правите 20 изображения с връзки към всяко едно. Може да не мислите, че 20 изображения са толкова много, но ако решите да добавите още 50? Това е мястото, където спрайтове са полезни. Поставете върху тях няколко снимки, копирайте CSS файла във вашия проект и просто добавете класа към вашия елемент, който съответства на желаното от вас изображение.

Запазване на състоянието на вашата игра

Искате ли играта ви да бъде запазена? Е, можете да избирате между използването на LocalStorage на браузъра и съхраняването на нещата на сървър. Сървърите изискват познания от края. Ако нямате такъв, предлагам да използвате LocalStorage. Той запазва играта, стига потребителят да не я изтрие с някакъв инструмент за почистване. Ето как го направих:

По принцип запазете всичките си данни в един обект, след което актуализирайте елементите си при зареждане. Използвайте JSON stringify и го анализирайте по-късно.

Модулирайте вашия код

Разберете коя част да се кодира твърдо и кои части да се модулират. Погрешно започнах твърдо кодиращи заклинания, които бързо станаха грозни. Имах нужда от 24 от тези функции, заедно с 24 ifCritical функции.

Сега можете да попитате как работи второто заклинание? Имам функция playerAttack (), която използва обекта за заклинания, за да прави неща:

  • Първо изпълнява функцията за заклинания за актуализация, която извиква обекта за заклинания. След това заклинанието взема текущите ви статистически данни и ги превръща в стойности като „щети“ и „разходи за мана“.
  • Той проверява дали щетите са повече от 0. Ако отговорът е „да“, той нанася щети на шефа и показва щетите, коя магия го е направил, и сумата. Това прави това и за повечето други ценности. Може да си помислите, че проверката над нулата е безполезна, но ще се замислите отново, когато играта каже, че сте нанесли 0 щети и сте възстановили 0 мани.
  • След това изпълнява персонализирана функция, ако заклинанието има такава. Това може да се използва за придаване на заклинания на специални ефекти, които не са възможни чрез нашата основна функция за атака.

Цикълът на играта

За мен цикълът на играта проверява и актуализира нещата: статистиката на играча, дали играчът е мъртъв, дали играчът току-що е изравнен, дали шефът е мъртъв и т.н.

Вие сами ще трябва да разберете това. Мисля, че това е добър учебен опит. Помислете какво и кога трябва да стартират проверките и актуализациите. Например, с проверка на ниво, аз го настрои да работи на всеки 20 секунди, тъй като изравняване не е толкова голяма работа.

Но тогава имам и проверка на смъртта на Boss, която се провежда всяка секунда след началото на битката. Защо? Така че играчите не трябва да чакат 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):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Убийте шефове, вземете LOOT! github.com

Имайте предвид, че съм начинаещ (само 2 месеца в програмирането), така че някои от моите решения могат да бъдат подобрени. Надяваме се обаче, че ви дадох поне основите, за да започнете!

Забавлявайте се, създавайки вашата Javascript игра!