Ehitasin JavaScripti rollimängu. Saab ka. Siit saate teada.

Nii et soovite proovida ja teha mängu, kuid olete natuke hirmutatud? Ära muretse, ka mina olin!

Kartsin näiteks objektide kasutamist. Nad olid see suur õudne asi, mille ma hiljem kõrvale hoidsin. Kuid nüüd kasutan neid kogu aeg!

Tutvustan teid kõigist JavaScripti rollimängu loomiseks läbitud toimingutest.

Siin on minu mäng, mis töötab CodePenil. (Pange tähele, et see pole veel mobiilseadmete jaoks optimeeritud):

esimese ,vali oma mängu punkt. Kas see on mõistatus? RPG? Häkkimine ja kaldkriips? Hea küll, mõelge nüüd selle valmistamise tehnilistele raskustele. Mõistatuste mäng eeldaks palju keerukat javascripti. Häkkimine ja kaldkriips vajaks palju hoolikat tasakaalustamist jne.

Samuti otsustage, kas soovite, et see oleks brauserimäng, mobiilimäng või mõlemad (natiivveebi mäng).

Näiteks ei sobi minu mäng mobiiliekraanile hästi, sest mängijal on 24 loitsu. See ei ole mugav, kui klõpsate nendel väikestel nuppudel pisikesel ekraanil, nii et ma peaksin mängu mobiilseadmete jaoks ümber kujundama.

Teiseks kirjutage üles kõik asjad, mida peate mängu tegelikuks programmeerimiseks programmeerima. Minu jaoks oli see:

  • inventeerimissüsteem
  • üksuse generaator
  • mängija stat süsteem
  • säästesüsteem

Kolmandaks alustage oma mängu loomist neid probleeme ükshaaval lahendades.

Kas vajate abi mängu loomisel?

Mängu jagamine väikesteks ülesanneteks on palju lihtsam. Te ei tee mängu, vaid inventeerimissüsteemi. Siis teete lahingusüsteemi. Ja nii edasi.

Kui te pole juba joonistamises osav - või kui soovite veeta kuid või aastaid sellega edukalt -, kasutage nende tööriistade abil vara, mis muudab teie mängu hea välja:

  • Game-Icons.net - need ikoonid on lõbusad ja neid on lihtne värvida
  • Avatud mängukunst - hankige suurepäraseid üldkasutatavaid varasid
  • Fotode hulgi suuruse muutmine - suurepärane vahend oma pisikeste ikoonide loomiseks
  • CSS Sprite Generator - aitab teil oma ikoonidele CSS-i tabeleid koostada

Probleemid, millega ma neid kokku puutusin ja kuidas ma neid lahendasin

Kiirlehed

Kas plaanite oma mängus olla rohkem kui 20 pilti? Kui jah, siis te ei soovi teha 20 pilti, millel oleks pildilingid. Te ei pruugi arvata, et 20 pilti on nii palju, kuid kui otsustate lisada veel 50 pilti? Seal tulevad spritesheetid kasuks. Pange neile mõned pildid, kopeerige CSS-fail oma projekti ja lisage lihtsalt oma elemendile klass, mis vastab teie soovitud pildile.

Mängu oleku salvestamine

Kas soovite, et teie mäng salvestataks? Võite valida brauseri LocalStorage kasutamise ja asjade serverisse salvestamise vahel. Serverid vajavad teadmisi tagantjärele. Kui teil pole ühtegi, soovitan kasutada LocalStorage'i. See salvestab mängu seni, kuni kasutaja seda mõne puhastustööriista abil ei kustuta. Ma tegin seda nii:

Põhimõtteliselt salvestage kõik oma andmed ühte objekti, seejärel värskendage oma üksusi laadimisel. Kasutage JSON-i stringi ja sõeluge see hiljem.

Moduleerige oma kood

Mõelge välja, millist osa kõvakodeerida ja milliseid moduleerida. Alustasin ekslikult raskesti kodeerivaid loitse, mis muutusid kiiresti koledaks. Mul oli vaja 24 sellist funktsiooni koos 24 ifCritical funktsiooniga.

Nüüd võite küsida, kuidas teine ​​õigekiri töötab? Mul on funktsioon playerAttack (), mis kasutab õigekirjaobjekti kraami tegemiseks:

  • Kõigepealt käivitatakse funktsioon Loitsude värskendamine, mis kutsub õigekirja objektiks. Seejärel võtab õigekiri teie praeguse statistika ja muudab need sellisteks väärtusteks nagu "kahju" ja "mana maksumus".
  • See kontrollib, kas kahju on suurem kui 0. Kui jah, teeb see ülemusele kahju ja kuvab kahju, mis õigekirja selle tegi, ja summa. See teeb seda ka enamiku muude väärtuste jaoks. Võib arvata, et nullist suurem kontroll on kasutu, kuid mõtlete uuesti, kui mäng ütleb, et tegite 0 vigastust ja taastasite 0 manat.
  • Siis käivitab see kohandatud funktsiooni, kui loitsul on selline. Seda saab kasutada loitsude eriefektide loomiseks, mis pole meie peamise rünnakufunktsiooni kaudu võimalikud.

Mängu silmus

Minu jaoks kontrollib ja ajakohastab mängutsükkel asju: mängijate statistikat, kas mängija on surnud, kas mängija on lihtsalt üles tõusnud, kas ülemus on surnud jne.

Selle peate ise välja mõtlema. Ma arvan, et see on hea õppimiskogemus. Mõelge, mida ja millal kontrollid ja värskendused käivitama peavad. Näiteks tasemekontrolli korral seadsin selle töötama iga 20 sekundi järel, kuna tasandamine pole nii suur probleem.

Kuid siis on mul ka ülemuse surmakontroll, mis toimub iga sekund pärast lahingu algust. Miks? Nii et mängijad ei pea ülemuse surma 20 sekundit ootama.

Mõned muud asjad ei pea isegi silmus olema. Funktsioone saab lihtsalt kutsuda, kui neid vajatakse. Võtame näiteks minu värskenduse õigekirjafunktsiooni. Seda nimetatakse ainult siis, kui mängija kasutab loitsu.

Mõned asjad, mida olen õppinud:

  • Esemed on head. Nii, kui peate andmeid salvestama, peate lihtsalt objekti salvestama, mitte 50 üksikut muutujat.
  • Pange alati ajavahemikud ja intervallid muutujateks, et neid saaks hiljem kustutada - kui need pole püsivad mõjud ja olete kindel, et te ei pea neid kunagi tühjendama.
  • Üks suur javascripti fail ei pruugi olla tark mõte. CodePen lubab kasutada ainult ühte JavaScripti faili, kuid ideaalis peaksite kõik eraldama mooduliteks.
  • Kui te ei muretse jõudluse pärast, saate objekti lihtsalt värskendamist kopeerida ja kleepida - pooli väärtusi pole vaja eraldi värskendada. Kui objekt on tohutu, saate objekti kõigepealt isegi määratleda muutujana, näiteks: var objekt; ja seejärel looge see mõne muu funktsiooni abil, kui soovite selle värskendamist. Tegin seda oma loitsudega. Iga kord, kui mängija õigekirja loob, määratleb funktsioon updateSpell () kõigepealt uuesti loitsude objekti, arvutab kõik kahjud ja statistika ning laseb siis loitsu üles.

Naljakad asjad, milles olen kompromisse teinud:

  • Oskusemanade kulud on ülemuse taseme kohta, sest kui need oleksid mängija tasemel, karistaksin mängijaid taseme tõstmise eest. See tegi ka kõrgema astme ülemused palju raskemaks, mis mulle meeldis.
  • Üksused luuakse koos kõigi statistikatega, kuid neid ei kuvata, kui need on 0. Nii ei pea ma kontrollima määratlemata olekut ja saan vältida statistika kuvamist, kui see genereeritakse kui 0. Topeltvõit!
  • Mul on palju lihtsustatud buffe ja debuffe. Põhimõtteliselt on olemas var buffStat, nerfStat, totalStat ja stat. Nii et buffid või debuffid ei virna kunagi.
  • Ülemuste puhul ei anna nerf stati oskus seda tegelikult 0-ni. See on palju keerukam kui see. See määrab statistika 9999999 järgi ja seejärel kontrollib, kas see on väiksem kui 0. Kui jah, siis määrab selle väärtuseks 0. Nii et kui teil õnnestub jõuda tasemeni, kus teie statistika on miljardites, pean võib-olla lisama veel nullid.

See kõik on mind arvanud, et peaksin planeerima natuke edasi, isegi kui ma lihtsalt ehitan lõbusat projekti enda oskuste laiendamiseks.

Samuti saan nüüd palju paremini aru, kuidas vead tekivad: mõnikord ei saa te aru kõigist servajuhtumitest, kus asjad võivad teed lõhkuda. Ja just siis putukad hammustavad.

Vead ja ärakasutamine

See hämmastas mind ja hirmutas mind veidi. Ma ei suutnud uskuda, et minu täiuslik kunstiteos sisaldab vigu!

Ok, ma liialdan natuke. Kuid ma alahindasin tohutut hulka asju, mis võivad valesti minna, ilma et ma sellest aru saaksin.

Siin on mõned vead ja ekspluateerimised, mis kukkusid minu pealaest välja:

  1. Ülemusega võideldes võiksite ülemuse taset muuta ja nii saaksite paremaid saaklooma
  2. HP ja Mana baarid läheksid kunagi üle
  3. Võite rünnata ülemust enne lahingu algust. Räägi imemängust!
  4. Mana võib minna negatiivseks, mis takistas teil isegi põhirünnakute sooritamist, mis on peamine viis, kuidas saate oma mana taastada.
  5. Ravib ajutiselt teie maksimaalset tervist.
  6. Ühte õigekirja ei saanud CSS-i probleemi tõttu enamasti enam klõpsata
  7. Ründamine ajal, mil te pole lahingus, paneb teie loitsud lõpmatule jahtumisele

Need kõik kõlavad õõvastavalt? MMORPG-s kuritarvitataks neid asju esimesest päevast ja see rikuks kõik ära!

Hea uudis on see, et enamus neist olid kergesti parandatavad - tavaliselt vähem kui ühe koodireaga.

Teised vead aga nõudsid, et ma kogu süsteemi täielikult ümber töötaksin. Loitsusüsteemiga läksin alates sellest, et pidin kirjutama iga loitsu jaoks 3 tervet funktsiooni, et vajasin ainult väikest objekti, mis võtab vaid mõne sekundi redigeerimise.

Jällegi, siin on minu mäng, kui soovite seda proovida (pange tähele, et see pole mobiilseadmete jaoks optimeeritud):

Ja siin on kood (mis on ka avatud lähtekoodiga ja CodePenis muudetav):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Tapa ülemused, saa LOOT! github.com

Pidage meeles, et olen algaja (programmeerimisega on seotud vaid 2 kuud), nii et mõnda minu lahendust saab paremaks muuta. Loodetavasti andsin siiski teile alustamiseks vähemalt põhitõed!

Lõbutsege oma Javascripti mängu luues!