Izgradio sam igru ​​za uloge u JavaScript-u. Možete i vi. Evo kako.

Dakle, želite probati napraviti igru, ali ste pomalo zastrašeni? Ne brinite, i ja sam bila!

Bojao sam se npr. Koristiti predmete. Oni su bili ta velika sablasna stvar koju sam odložio za kasnije. Ali sada ih stalno koristim!

Provest ću vas kroz sve korake koje sam prošao kako bih izgradio svoju JavaScript igranju uloga.

Evo moje igre koja radi na CodePenu. (Imajte na umu da još nije optimiziran za mobilne uređaje):

Prvo ,odaberite poantu svoje igre. Je li to zagonetka? RPG? Hack & kosina? U redu, sad razmislite o tehničkim poteškoćama izrade. Puzzle igra zahtijevala bi puno složenog javascripta. Hack & kosina trebala bi puno pažljivog balansiranja, i tako dalje.

Također, odlučite želite li da to bude igra u pregledniku, mobilna igra ili oboje ("native web" igra).

Na primjer, moja igra ne može se dobro uklopiti na mobilni zaslon, jer igrač ima 24 uroka. Nije ugodno pritiskati ove male gumbe na malom zaslonu, pa bih morao redizajnirati igru ​​za mobitel.

Drugo , zapišite sve stvari koje trebate programirati da biste zapravo stvorili igru. Za mene je to bilo:

  • sustav popisa
  • generator predmeta
  • sustav statistike igrača
  • sustav štednje

Treće , počnite stvarati svoju igru ​​rješavajući ove probleme jedan po jedan.

Trebate pomoć u stvaranju igre?

Puno je lakše razbiti svoju igru ​​na male zadatke. Ne pravite igru, već sustav inventara. Tada pravite borbeni sustav. I tako dalje.

Osim ako već dobro crtate - ili ne želite potrošiti mjesece ili godine da biste ga postigli - koristite ove alate za stvaranje sredstava koja će vašoj igri učiniti dobar izgled:

  • Game-Icons.net - ove su ikone zabavne i lako ih je obojiti
  • Open Game Art - nabavite sjajnu imovinu iz javne domene
  • Skupna promjena veličine fotografija - izvrstan alat za izradu vlastitih sitnih ikona
  • CSS Sprite Generator - pomaže vam u izradi CSS spriteets tablica za vaše ikone

Problemi s kojima sam se susreo i kako sam ih riješio

Spritesheets

Planirate li imati više od 20 slika u svojoj igri? Ako je to slučaj, ne želite napraviti 20 slika s vezama do slike. Možda ne mislite da je 20 slika toliko, ali ako odlučite dodati još 50? Tu vam spritesheets dobro dođu. Na njih stavite nekoliko slika, kopirajte CSS datoteku u svoj projekt i jednostavno dodajte klasu elementu koji odgovara željenoj slici.

Spremanje stanja igre

Želite li da se vaša igra spremi? Pa, možete birati između upotrebe LocalStorage preglednika i spremanja stvari na poslužitelj. Poslužitelji zahtijevaju pozadinsko znanje. Ako ih nemate, predlažem upotrebu LocalStorage. Sprema igru ​​sve dok je korisnik ne izbriše nekim alatom za čišćenje. Evo kako sam to uspio:

U osnovi, spremite sve podatke u jedan objekt, a zatim ažurirajte stavke po učitavanju. Upotrijebite JSON stringify i raščlanite ga kasnije.

Modularizirajte svoj kod

Shvatite koji dio želite hard-code, a koji dijelove modularizirati. Pogrešno sam započeo čarolije s tvrdim kodiranjem, koje su brzo postale ružne. Trebale su mi 24 od ovih funkcija, zajedno s 24 funkcije ifCritical.

Sad se možete pitati, kako djeluje druga čarolija? Imam funkciju playerAttack () koja koristi objekt čarolije za rad:

  • Prvo pokreće funkciju ažuriranja čarolija koja poziva objekt čarolija. Tada čarolija uzima vašu trenutnu statistiku i pretvara ih u vrijednosti poput "štete" i "cijene mane".
  • Provjerava je li šteta veća od 0. Ako da, nanosi štetu šefu i prikazuje štetu koja je čarolija to učinila te iznos. To čini i za većinu drugih vrijednosti. Možda mislite da je provjera veća od nule beskorisna, ali opet ćete pomisliti kad igra kaže da ste napravili 0 štete i vratili 0 mane.
  • Zatim pokreće prilagođenu funkciju, ako je čarolija ima. To bi se moglo koristiti za davanje čarolijama posebnih efekata koji nisu mogući putem naše glavne funkcije napada.

Petlja igre

Za mene petlja igre provjerava i ažurira stvari: statistike igrača, je li igrač mrtav, je li igrač upravo izravnan, je li šef mrtav, i tako dalje.

Morat ćete sami shvatiti ovaj. Mislim da je to dobro iskustvo učenja. Razmislite o tome što i kada trebaju biti pokrenute provjere i ažuriranja. Na primjer, s provjerom razine, postavio sam ga da radi svakih 20 sekundi jer izravnavanje nije tako velika stvar.

Ali tada imam i Boss-ovu smrtnu provjeru koja se pokreće svake sekunde nakon početka bitke. Zašto? Tako igrači ne moraju čekati 20 sekundi da šef umre.

Neke druge stvari niti ne trebaju biti u petlji. Funkcije se mogu pozvati samo kada su potrebne. Uzmimo za primjer moju funkciju pravopisa za ažuriranje. Pozva se samo kad igrač koristi čaroliju.

Nekoliko stvari koje sam naučio:

  • Predmeti su dobri. Na taj način, kada morate spremiti podatke, samo trebate spremiti objekt - a ne 50 pojedinačnih varijabli.
  • Uvijek postavite vremenska ograničenja i intervale kao varijable, tako da se kasnije mogu izbrisati - osim ako su to trajni učinci i sigurni ste da ih nikada nećete trebati obrisati.
  • Jedna velika JavaScript datoteka možda nije pametna ideja. CodePen omogućuje samo jednu JavaScript datoteku, ali idealno bi bilo da sve odvojite u module.
  • Ako vas ne brinu performanse, možete jednostavno kopirati i zalijepiti objekt kada ga treba ažurirati - nema potrebe za pojedinačnim ažuriranjem polovice vrijednosti. Ako je objekt ogroman, možete ga prvo definirati kao varijablu poput: var objekt; a zatim ga izradite pomoću neke druge funkcije kada želite da se ažurira. To sam učinio svojim čarolijama. Svaki put kad igrač baci čaroliju, funkcija updateSpell () prvo ponovno definira objekt čaranja, izračunava svu štetu i statistiku, a zatim ispaljuje čaroliju.

Smiješne stvari oko kojih sam napravio kompromis:

  • Troškovi mane vještine odnose se na razinu šefa, jer da su na razini igrača, kaznio bih igrače zbog poravnanja. To je također znatno otežalo šefove više razine, što mi se svidjelo.
  • Stavke se izrađuju sa svim statistikama, ali se ne prikazuju ako su 0. Na ovaj način ne trebam provjeravati ima li nedefiniranih i mogu izbjeći prikazivanje statistika ako su generirane kao 0. Dvostruka pobjeda!
  • Puno sam pojednostavio slaganje i uklanjanje grešaka. U osnovi postoje var buffStat, nerfStat, totalStat i stat. Dakle, negativci ili debuffi se nikad ne slažu.
  • Kod šefova, nerf stat vještina zapravo ne ide na 0. Ovo je puno sofisticiranije od toga. Nerfira statistiku do 9999999, a zatim provjerava je li manja od 0. Ako da, postavlja je na 0. Dakle, ako uspijete dosegnuti razinu na kojoj imate statistike u milijardama, možda ću morati dodati još nule.

Sve ovo što mi se učinilo jest da bih trebao planirati malo dalje, čak i ako samo gradim zabavan projekt kako bih proširio vlastite vještine.

Također, sada imam puno bolje razumijevanje o tome kako nastaju bugovi: ponekad ne shvatite sve rubne slučajeve u kojima stvari mogu srušiti cestu. I tada bube grizu.

Bugovi i iskorištavanja

Ovaj me zapanjio i pomalo uplašio. Nisam mogao vjerovati da moje savršeno umjetničko djelo sadrži bube!

Ok, malo pretjerujem. Ali podcijenio sam ogroman broj stvari koje bi mogle poći po zlu, a da to nisam ni shvatio.

Evo nekoliko grešaka i iskorištavanja koje su mi se pojavile s vrha glave:

  1. Mogli biste promijeniti razinu šefa dok se borite sa šefom, i na taj način dobiti bolje kapljice plijena
  2. HP-ove i Mana trake ponekad bi se prelijevale
  3. Mogli ste napasti šefa prije nego što je bitka uopće započela. Razgovarajmo o udarcu!
  4. Mana bi mogla postati negativna, što vam je onemogućilo da izvodite čak i osnovne napade, što je glavni način na koji možete vratiti svoju manu.
  5. Izlječenja privremeno povećavaju vaše maksimalno zdravlje.
  6. Jednu čaroliju zapravo nije bilo moguće kliknuti većinu vremena zbog CSS problema
  7. Napadajući dok niste u borbi, stavljate svoje čarolije na beskonačno hlađenje

Sve ovo zvuči užasno zar ne? U MMORPG-u bi se te stvari od prvog dana zlostavljale i sve bi uništile!

Pa, dobra vijest je da je većinu njih bilo lako popraviti - obično s manje od 1 retka koda.

Međutim, zbog drugih programskih pogrešaka trebao sam u potpunosti preraditi cijeli sustav. S pravopisnim sustavom prešao sam s potrebe da za svaku čaroliju napišem po 3 cijele funkcije na samo mali objekt za koji je potrebno samo nekoliko sekundi uređivanja.

Opet, evo moje igre ako je želite isprobati (imajte na umu da nije optimizirana za mobilne uređaje):

Evo i koda (koji je također otvoren i može se uređivati ​​na CodePenu):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Ubijte šefove, uzmite LOOT! github.com

Imajte na umu da sam početnik (samo 2 mjeseca se bavim programiranjem) tako da se neka moja rješenja mogu poboljšati. Nadam se da sam vam dao barem osnove za početak!

Zabavite se stvarajući svoju Javascript igru!