Rakensin roolipelin JavaScriptissä. Voit myös. Näin.

Joten haluat kokeilla peliä, mutta olet hieman pelotella? Älä huoli, minäkin olin!

Pelkäsin esimerkiksi esineiden käyttöä. He olivat tämä iso pelottava asia, jonka hylsin myöhempää tarvetta varten. Mutta nyt käytän niitä koko ajan!

Opastan sinut läpi kaikki vaiheet, jotka kävin läpi rakentaakseni JavaScript-roolipelini.

Tässä on minun pelini CodePenillä. (Huomaa, että sitä ei ole vielä optimoitu mobiililaitteille):

ensimmäinen ,valitse pelisi kohta. Onko se palapeli? RPG? Hakkerointi ja kauttaviiva? No, ajattele nyt sen tekoon liittyviä teknisiä vaikeuksia. Pulmapeli vaatii paljon monimutkaista javascriptiä. Hakkerointi vaatii paljon huolellista tasapainottamista ja niin edelleen.

Päätä myös, haluatko sen olevan selainpeli, mobiilipeli vai molemmat (natiiviverkkopeli).

Esimerkiksi pelini ei sovi hyvin mobiilinäyttöön, koska soittimella on 24 loitsua. Ei ole mukavaa napsauttaa näitä pieniä painikkeita pienellä näytöllä, joten minun on suunniteltava peli uudelleen mobiililaitteille.

Toiseksi kirjoita muistiin kaikki tarvitsemasi asiat pelin tekemiseksi. Minulle se oli:

  • inventaariojärjestelmä
  • tuotegeneraattori
  • pelaajatilastojärjestelmä
  • säästöjärjestelmä

Kolmanneksi , aloita pelin tekeminen ratkaisemalla nämä ongelmat yksitellen.

Tarvitsetko apua pelin luomisessa?

Pelin jakaminen pieniksi tehtäviksi on paljon helpompaa. Et tee peliä, teet inventointijärjestelmän. Sitten teet taistelujärjestelmän. Ja niin edelleen.

Ellet jo osaa piirtää - tai haluat viettää kuukausia tai vuosia siinä onnistumiseen - luo näitä työkaluja luomalla resursseja, jotka saavat pelisi näyttämään hyvältä:

  • Game-Icons.net - nämä kuvakkeet ovat hauskoja ja helppoja värittää
  • Avaa pelitaide - hanki upeita julkisen omaisuuden resursseja
  • Bulk Resize Photos - loistava työkalu omien pienien kuvakkeiden tekemiseen
  • CSS Sprite Generator - auttaa sinua tekemään CSS-taulukkoja kuvakkeillesi

Kysymykset, joita tapasin heihin, ja kuinka ratkaisin ne

Spriteheet

Suunnitteletko pelissänne yli 20 kuvaa? Jos näin on, et halua tehdä 20 kuvaa, joihin jokaisella on kuvalinkit. Et ehkä usko, että 20 kuvaa on niin paljon, mutta jos päätät lisätä 50 kuvaa lisää? Siellä spritesheet ovat käteviä. Laita niihin kuvia, kopioi CSS-tiedosto projektiisi ja lisää vain luokka elementtiin, joka vastaa haluamaasi kuvaa.

Pelisi tilan tallentaminen

Haluatko pelisi pelastuvan? Voit valita, käytätkö selaimen LocalStorage-sovellusta vai tallennatko asioita palvelimelle. Palvelimet vaativat taustapalvelutietoa. Jos sinulla ei ole yhtään, suosittelen LocalStoragen käyttöä. Se tallentaa pelin niin kauan kuin käyttäjä ei poista sitä jollakin puhdistustyökalulla. Näin tein sen:

Pohjimmiltaan tallenna kaikki tietosi yhteen objektiin ja päivitä sitten kohteet ladattaessa. Käytä JSON-merkkijonoa ja jäsennä se myöhemmin.

Moduloi koodi

Selvitä, mikä osa koodataan kovasti ja mitkä osat moduloidaan. Aloitin virheellisesti vaikeasti koodattavat loitsut, jotka tulivat nopeasti rumiksi. Tarvitsin 24 näistä toiminnoista yhdessä 24 ifCritical-toiminnon kanssa.

Nyt voit kysyä, miten toinen loitsu toimii? Minulla on toiminto playerAttack (), joka käyttää loitsuobjektia tavaroiden tekemiseen:

  • Se suorittaa ensin päivitysloitustoiminnon, joka kutsuu loitsut esineeksi. Sitten loitsu ottaa nykyisen tilastosi ja muuttaa sen arvoiksi, kuten "vahinko" ja "manan hinta".
  • Se tarkistaa, onko vahinko suurempi kuin 0. Jos kyllä, se vahingoittaa pomoa ja näyttää vahingon, mikä oikeinkirjoituksen teki ja määrän. Se tekee tämän myös useimmille muille arvoille. Saatat ajatella, että yli nollan tarkistus on hyödytön, mutta ajattelet uudelleen, kun peli sanoo, että olet tehnyt 0 vahinkoa ja palauttanut 0 manaa.
  • Sitten se suorittaa mukautetun toiminnon, jos loitsulla on sellainen. Tätä voidaan käyttää loitsujen erikoistehosteiden tuottamiseen, jotka eivät ole mahdollisia päähyökkäystoimintomme avulla.

Pelin silmukka

Minulle pelisilmukka tarkistaa ja päivittää asioita: pelaajien tilastot, onko pelaaja kuollut, onko pelaaja juuri tasoittunut, onko pomo kuollut ja niin edelleen.

Sinun täytyy selvittää tämä itse. Mielestäni se on hyvä oppimiskokemus. Ajattele, mitä ja milloin tarkastukset ja päivitykset on suoritettava. Esimerkiksi tasotarkastuksella asetin sen toimimaan 20 sekunnin välein, koska tasoitus ei ole niin iso juttu.

Mutta sitten minulla on myös pomon kuolintarkastus, joka suoritetaan joka sekunti taistelun alkamisen jälkeen. Miksi? Pelaajien ei siis tarvitse odottaa 20 sekuntia, kunnes pomo kuolee.

Joidenkin muiden asioiden ei tarvitse edes olla silmukassa. Funktioita voidaan kutsua vain, kun niitä tarvitaan. Otetaan esimerkiksi päivityskirjoitustoimintoni. Sitä kutsutaan vain, kun pelaaja käyttää loitsua.

Muutama asia, jonka olen oppinut:

  • Esineet ovat hyviä. Tällä tavalla, kun sinun on tallennettava tietoja, sinun on vain tallennettava objekti - ei 50 yksittäistä muuttujaa.
  • Aseta aina aikakatkaisut ja aikavälit muuttujiksi, jotta ne voidaan tyhjentää myöhemmin - paitsi jos ne ovat pysyviä vaikutuksia, ja et ole varma, että sinun ei tarvitse koskaan tyhjentää niitä.
  • Yksi iso javascript-tiedosto ei ehkä ole viisas idea. CodePen sallii vain yhden JavaScript-tiedoston, mutta ihannetapauksessa sinun tulisi erottaa kaikki moduuleiksi.
  • Jos et ole huolissasi suorituskyvystä, voit kopioida ja liittää objektin, kun se on päivitettävä - puolet arvoista ei tarvitse päivittää erikseen. Jos kohde on valtava, voit jopa määritellä objektin ensin muuttujana, kuten: var object; ja sitten rakenna se jollakin muulla toiminnolla, kun haluat sen päivittyvän. Tein tämän loitsuillani. Aina kun pelaaja loitsuu, updateSpell () -toiminto määrittää ensin loitsuobjektin uudelleen, laskee kaikki vahingot ja tilastot ja laukaisee loitsun.

Hauskoja asioita, joista olen tinkinyt:

  • Taitomanakustannukset ovat pomotasoa kohti, koska jos ne olisivat pelaajatasolla, rankaisin pelaajia tasaantumisesta. Tämä teki myös korkeamman tason pomot paljon vaikeammaksi, mistä pidin.
  • Kohteet luodaan kaikilla tilastoilla, mutta niitä ei näytetä, jos ne ovat 0. Tällä tavoin minun ei tarvitse tarkistaa määrittelemättömyyttä, ja voin välttää tilastojen näyttämistä, jos ne luodaan 0. Tuplavoitto!
  • Minulla on yksinkertaistettuja buffeja ja debuffeja paljon. Pohjimmiltaan on olemassa var buffStat, nerfStat, totalStat ja stat. Joten buffit tai debuffit eivät koskaan pinoa.
  • Pomoilla nerf stat -taito ei oikeastaan ​​nollaa sitä nollaan. Tämä on paljon hienostuneempaa. Se nollaa tilastotiedon 9999999: lla ja tarkistaa sitten, onko se pienempi kuin 0. Jos kyllä, se asettaa sen arvoksi 0. Joten jos onnistut saavuttamaan tason, jolla sinulla on miljardeja tilastoja, minun on ehkä lisättävä lisää nollat.

Kaikki tämä on ajatellut minua siitä, että minun pitäisi suunnitella hieman eteenpäin, vaikka rakentaisin vain hauskaa projektia omien taitojeni laajentamiseksi.

Lisäksi minulla on nyt paljon parempi käsitys siitä, miten virheet syntyvät: joskus et ymmärrä kaikkia reunatapauksia, joissa asiat voivat rikkoa tietä. Ja silloin viat purevat.

Vikoja ja hyväksikäyttöjä

Tämä hämmästytti minua ja pelotti minua hieman. En voinut uskoa, että täydellisessä taideteoksessa oli vikoja!

Ok, liioittelen hieman. Mutta aliarvioin pelkän määrän asioita, jotka voivat mennä pieleen ilman, että edes ymmärtäisin sitä.

Tässä muutamia vikoja ja hyväksikäyttöjä, jotka leikkasivat pääni yläosasta:

  1. Voisit muuttaa pomotasoja taistellessasi pomoa vastaan ​​ja saada parempia ryöstöpisteitä tällä tavalla
  2. HP- ja Mana-palkit ylittyvät joskus
  3. Voit hyökätä pomoon ennen taistelun edes alkamista. Keskustele tikkareista!
  4. Mana voi mennä negatiiviseksi, mikä esti sinua suorittamasta edes perushyökkäyksiä, mikä on tärkein tapa palauttaa mana.
  5. Parannukset parantavat tilapäisesti maksimaalista terveyttäsi.
  6. Yksi loitsu ei oikeastaan ​​ollut napsautettavissa suurimman osan ajasta CSS-ongelman takia
  7. Hyökkäys ilman taistelua laittaa loitsut äärettömään viileään

Nämä kaikki kuulostavat kauhistuttavilta? MMORPG: ssä näitä asioita käytettäisiin väärin alusta alkaen ja pilalla kaikki!

Hyvä uutinen on, että suurin osa niistä oli helposti korjattavissa - yleensä alle yhdellä rivillä koodia.

Toiset viat vaativat kuitenkin minua uudistamaan koko järjestelmän kokonaan. Loitsujärjestelmässä tarvitsin kirjoittaa 3 kokonaista toimintoa jokaiselle loitsulle tarvitsemaan vain pienen objektin, joka vie vain muutaman sekunnin muokkauksen.

Jälleen tässä on minun pelini, jos haluat kokeilla sitä (huomaa, että sitä ei ole optimoitu mobiililaitteille):

Ja tässä on koodi (joka on myös avoimen lähdekoodin ja muokattava CodePenissä):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Tapa pomot, hanki LOOT! github.com

Muista, että olen aloittelija (vain 2 kuukautta ohjelmoinnista), joten joitain ratkaisujani voidaan parantaa. Toivottavasti kuitenkin annoin sinulle ainakin perusasiat aloittaaksesi!

Pidä hauskaa luoda Javascript-peliäsi!