Tehát ki akar próbálni játékot készíteni, de kissé megfélemlítik? Ne aggódj, én is az voltam!
Féltem például tárgyak használatától. Ők voltak ez a nagy kísérteties dolog, amit később elraktam. De most folyamatosan használom őket!
Végigvezetek benneteket minden lépésen, amelyet a JavaScript szerepjáték elkészítésén keresztül elvégeztem.
Itt van a CodePen-en futó játékom. (Ne feledje, hogy még nincs mobilra optimalizálva):
Először ,válassza ki a játék pontját. Rejtvény? RPG? Hack & slash? Rendben, gondoljon most az elkészítés technikai nehézségeire. Egy kirakós játékhoz sok bonyolult javascriptre lenne szükség. A hack & slash-nek sok gondos egyensúlyozásra lenne szüksége stb.
Ezenkívül döntse el, hogy böngészős játékot, mobil játékot vagy mindkettőt kívánja-e használni („natív webes” játék).
Például a játékom nem fér el jól a mobil képernyőn, mert a játékosnak 24 varázslata van. Ez nem kényelmes, ha rákattintok ezekre a kis gombokra egy apró képernyőn, ezért át kellene terveznem a játékot mobilra.
Másodszor írja le az összes dolgot, amelyet be kell programoznia a játék tényleges elkészítéséhez. Számomra ez volt:
- leltárrendszer
- elemgenerátor
- egy játékos stat rendszer
- megtakarító rendszer
Harmadszor , kezdje el a játékot úgy, hogy egyesével megoldja ezeket a problémákat.
Segítségre van szüksége a játék létrehozásában?
Sokkal könnyebb apró feladatokra bontani a játékot. Nem játékot, hanem leltározási rendszert készít. Akkor harci rendszert készít. Stb.
Hacsak még nem értesz jól a rajzoláshoz - vagy hónapokat vagy éveket akarsz azzal tölteni, hogy jól csináld - használd ezeket az eszközöket olyan eszközök létrehozására, amelyek jól mutatják a játékodat:
- Game-Icons.net - ezek az ikonok szórakoztatóak és könnyen színezhetők
- Open Game Art - szerezz be néhány nagyszerű, nyilvános tartalmat
- Tömeges fotók átméretezése - remek eszköz saját apró ikonok készítéséhez
- CSS Sprite Generator - segít CSS táblázatok készítésében az ikonjaihoz
Problémák, amelyekkel találkoztam velük, és hogyan oldottam meg őket
Spritesheet
Tervezi, hogy több mint 20 kép szerepel a játékában? Ha igen, akkor nem akar 20 képet készíteni, amelyek mindegyikéhez képi linkek tartoznak. Lehet, hogy nem gondolja, hogy 20 kép ennyi, de ha úgy dönt, hogy további 50 képet ad hozzá? Itt jönnek jól a szórólapok. Tegyen rájuk néhány képet, másolja a CSS fájlt a projektjébe, és csak adja hozzá az elemet az elemhez, amely megfelel a kívánt képnek.
A játék állapotának mentése
Szeretné, ha a játékot megmentenék? Nos, választhat a böngésző LocalStorage használata és a szerveren történő tárolás között. A szerverek háttérismeretet igényelnek. Ha nincs, javasoljuk a LocalStorage használatát. Addig menti a játékot, amíg a felhasználó nem törli valamilyen tisztító eszközzel. Így csináltam:
Alapvetõen mentse el az összes adatot egy objektumba, majd frissítse az elemeket a betöltéskor. Használja a JSON karakterláncot, és később elemezze.
Modulálja a kódot
Kitalálja, hogy melyik részt kell hardkódolni és melyeket modulálni. Tévesen elkezdtem nehezen kódoló varázslatokat, amelyek gyorsan csúnyák lettek. 24 ilyen funkcióra volt szükségem, valamint 24 ifCritical funkcióra.
Most megkérdezheti, hogy működik a második varázslat? Van egy playerAttack () függvényem, amely a varázslat objektumot használja a dolgok elvégzéséhez:
- Először futtatja a varázslatok frissítés funkciót, amely objektumnak hívja a varázslatokat. Ezután a varázslat felveszi a jelenlegi statisztikákat, és olyan értékekké alakítja őket, mint a „kár” és a „mana költség”.
- Ellenőrzi, hogy a kár meghaladja-e a 0. Ha igen, akkor kárt okoz a főnöknek, és megjeleníti a kárt, mely varázslat okozta, és az összeget. Ezt teszi a legtöbb más értéknél is. Azt gondolhatja, hogy a nullánál nagyobb ellenőrzés hiábavaló, de még egyszer meggondolja, amikor a játék azt mondja, hogy 0 kárt okozott és 0 manát helyreállított.
- Ezután egy egyedi függvényt futtat, ha a varázslatnak van ilyen. Ez felhasználható speciális varázslatok varázslatokhoz, amelyek a fő támadási funkciónk révén nem lehetségesek.
A játék hurok
Számomra a játékhurok ellenőrzi és frissíti a dolgokat: a játékosok statisztikáját, hogy a játékos meghalt-e, a játékos éppen szintet ért-e, a főnök meghalt-e stb.
Ezt magának kell kitalálnia. Szerintem jó tanulási tapasztalat. Gondoljon arra, hogy mit és mikor kell futtatni az ellenőrzéseknek és a frissítéseknek. Például egy szintellenőrzéssel azt állítottam be, hogy 20 másodpercenként fusson, mivel a szintezés nem olyan nagy baj.
De akkor van egy Boss halálellenőrzésem is, amely másodpercenként fut a csata kezdete után. Miért? Tehát a játékosoknak nem kell 20 másodpercet várniuk a főnök halálára.
Néhány más dolognak nem is kell hurokba kerülnie. A függvények csak akkor hívhatók meg, amikor szükség van rájuk. Vegyük például a frissítés varázslat funkciót. Csak akkor hívják, ha egy játékos varázslatot használ.
Néhány dolog, amit megtanultam:
- A tárgyak jók. Így, amikor adatokat kell mentenie, akkor csak az objektumot kell mentenie - nem az 50 változót.
- Mindig állítsa be az időkorlátokat és az intervallumokat változóként, így később törölhetők - kivéve, ha ezek állandó hatások, és biztos abban, hogy soha nem lesz szüksége azok törlésére.
- Lehet, hogy egy nagy javascript fájl nem bölcs ötlet. A CodePen csak egy JavaScript fájlt engedélyez, de ideális esetben mindent el kell választani modulokba.
- Ha nem aggódik a teljesítmény miatt, akkor egyszerűen másolhatja és beillesztheti az objektumot, amikor frissíteni kell - nincs szükség az értékek felének egyenként történő frissítésére. Ha az objektum hatalmas, akkor először definiálhatja az objektumot változóként, például: var object; majd építsen fel valamilyen más funkcióval, amikor frissíteni szeretné. Ezt a varázslataimmal tettem. Minden alkalommal, amikor a játékos varázsol, az updateSpell () függvény először meghatározza a varázslat objektumot, kiszámítja az összes sebzést és statisztikát, majd elindítja a varázslatot.
Vicces dolgok, amelyekben kompromisszumot kötöttem:
- Az ügyességi manaköltségek főnöki szinten vannak, mert ha játékos szinten lennének, akkor megbüntetnék a játékosokat a szintemelkedésért. Ez a magasabb szintű főnököket is sokkal nehezebbé tette, ami tetszett.
- Az elemeket minden statisztikával együtt hozzák létre, de nem jelennek meg, ha 0-nak vannak. Így nem kell ellenőriznem, hogy definiálatlanok-e, és elkerülhetem a statisztikák megjelenítését, ha 0-ként generálódnak. Dupla győzelem!
- Sokat egyszerűsítettem a buffokat és a debuffokat. Alapvetően van egy var buffStat, nerfStat, totalStat és stat. Tehát a buffok vagy a debuffok soha nem raknak egymásra.
- A főnököknél a nerf stat készség valójában nem nullázza 0-ra. Ez ennél sokkal kifinomultabb. 9999999-ig készíti el a stat statisztikáját, majd ellenőrzi, hogy ez kisebb-e, mint 0. Ha igen, akkor 0-ra állítja. Tehát, ha sikerül elérnie azt a szintet, ahol milliárdos statisztikája van, lehet, hogy még többet kell hozzá nullák.
Mindez azt hitte nekem, hogy egy kicsit előre kell terveznem, még akkor is, ha csak egy szórakoztató projektet építek a saját képességeim bővítésére.
Ezenkívül sokkal jobban megértem a hibák előfordulását: néha nem veszi észre az összes olyan éles esetet, amikor a dolgok letörhetnek az úton. És ekkor harapnak a hibák.
Hibák és kihasználások
Ez meghökkent és kissé megijesztett. Nem hittem el, hogy tökéletes műalkotásom hibákat tartalmaz!
Oké, kicsit túlzok. De alábecsültem a rengeteg dolgot, ami rosszul eshet anélkül, hogy észre is venném.
Íme néhány hiba és kizsákmányolás, amelyek a fejem tetejére kerültek:
- Megváltoztathatja a főnök szintjét, miközben főnökkel küzd, és így jobb zsákmánycseppeket kaphat
- A HP és a Mana rudak valamikor túlcsordulnának
- Megtámadhatja a főnököt, még mielőtt a csata elkezdődne. Beszélj egy balek ütésről!
- A Mana negatívvá válhat, ami megakadályozta, hogy akár alapvető támadásokat is végrehajthasson, ami a mana visszaállításának fő módja.
- A gyógyulások átmenetileg megnövelték maximális egészségét.
- Az egyik varázslat valójában nem volt kattintható legtöbbször egy CSS probléma miatt
- Ha nem harcolsz, akkor a varázslatok végtelen kihűlésbe kerülnek
Ezek mind borzalmasan hangzanak, igaz? Egy MMORPG-ben ezeket a dolgokat az első naptól kezdve visszaélnék, és mindent elrontanának!
Nos, jó hír, hogy a legtöbbjük könnyen javítható volt - általában kevesebb, mint 1 sor kóddal.
Más hibák azonban megkövetelték, hogy teljesen átdolgozzam az egész rendszert. A varázslat rendszerével abból álltam, hogy minden varázslathoz 3 egész függvényt kellett írnom, és csak egy kis objektumra volt szükségem, amely csak néhány másodpercig tart szerkesztésre.
Ismét itt a játékom, ha ki akarja próbálni (vegye figyelembe, hogy nem mobileszközökre van optimalizálva):
És itt van a kód (amely szintén nyílt forráskódú és szerkeszthető a CodePen-en):
RobertSkalko / LOOT-RPG-v1.0
LOOT-RPG-v1.0 - Öld meg a főnököket, szerezz LOT! github.com
Ne feledje, hogy kezdő vagyok (mindössze 2 hónap áll rendelkezésemre a programozással), így néhány megoldásom javítható. Remélhetőleg mégis megadtam legalább az alapokat a kezdéshez!
Jó szórakozást a Javascript játék létrehozásában!