Jeg byggede et rollespil i JavaScript. Du kan også. Sådan gør du.

Så du vil prøve at lave et spil, men er lidt skræmt? Bare rolig, jeg var også!

Jeg var for eksempel bange for at bruge objekter. Det var denne store uhyggelige ting, som jeg lagde væk til senere. Men nu bruger jeg dem hele tiden!

Jeg vil lede dig gennem alle de trin, jeg har gennemgået for at opbygge mit JavaScript-rollespil.

Her er mit spil, der kører på CodePen. (Bemærk, at det endnu ikke er optimeret til mobil):

Først ,vælg punktet i dit spil. Er det et puslespil? Et RPG? Et hack & skråstreg? Okay, tænk nu på de tekniske vanskeligheder ved at gøre det. Et puslespil ville kræve en masse kompliceret javascript. Et hack & skråstreg ville have brug for meget omhyggelig afvejning og så videre.

Beslut også, om du vil have det til at være et browserspil, et mobilspil eller begge dele (et ”native web” -spil).

For eksempel kan mit spil ikke passe godt på mobilskærmen, fordi spilleren har 24 besværgelser. Det er ikke behageligt at klikke på disse små knapper på en lille skærm, så jeg bliver nødt til at redesigne spillet til mobil.

For det andet skal du nedskrive alle de ting, du har brug for at programmere for faktisk at skabe spillet. For mig var det:

  • et beholdningssystem
  • en varegenerator
  • et spillerstatssystem
  • et opsparingssystem

For det tredje skal du starte dit spil ved at løse disse problemer en efter en.

Brug for hjælp til at skabe spillet?

Det er meget lettere at opdele dit spil i små opgaver. Du laver ikke et spil, du laver et beholdningssystem. Så laver du et kampsystem. Og så videre.

Medmindre du allerede er god til at tegne - eller vil bruge måneder eller år på at blive god til det - skal du bruge disse værktøjer til at skabe aktiver, der får dit spil til at se godt ud:

  • Game-Icons.net - disse ikoner er sjove og nemme at farve
  • Åben spilkunst - få nogle gode aktiver i det offentlige domæne
  • Bulk Resize Photos - et fantastisk værktøj til at lave dine egne små ikoner
  • CSS Sprite Generator - hjælper dig med at lave CSS spritesheets til dine ikoner

Problemer, jeg stødte på, og hvordan jeg løste dem

Spritesheets

Har du planer om at have mere end 20 billeder i dit spil? I så fald vil du ikke lave 20 billeder med billedlink til hver enkelt. Du synes måske ikke, at 20 billeder er så meget, men hvis du beslutter at tilføje 50 mere? Det er her spritesheets er nyttige. Læg nogle billeder på dem, kopier CSS-filen til dit projekt, og tilføj bare klassen til dit element, der svarer til det ønskede billede.

Gemmer dit spil tilstand

Vil du have, at dit spil skal gemmes? Nå kan du vælge mellem at bruge browserens LocalStorage og at gemme ting på en server. Servere kræver back end-viden. Hvis du ikke har nogen, foreslår jeg at bruge LocalStorage. Det gemmer spillet, så længe brugeren ikke sletter det med et eller andet oprydningsværktøj. Sådan gjorde jeg det:

Dybest set skal du gemme alle dine data i et objekt, og derefter opdatere dine varer under indlæsning. Brug JSON-stramningen og analyser den senere.

Modulariser din kode

Find ud af, hvilken del der skal hardkodes, og hvilke dele der skal moduleres. Jeg startede fejlagtigt hårdkodende trylleformularer, som hurtigt blev grimme. Jeg havde brug for 24 af disse funktioner sammen med 24 ifCritical-funktioner.

Nu kan du spørge, hvordan fungerer den anden magi? Jeg har en funktion playerAttack (), der bruger staveobjektet til at gøre ting:

  • Den kører først opdateringsformularfunktionen, som kalder magiobjektet. Derefter tager trylleformularen din nuværende statistik og forvandler dem til værdier som "skade" og "manakostnad".
  • Det kontrollerer, om skaden er mere end 0. Hvis ja, skader den boss og viser skaden, hvilken stave gjorde det, og beløbet. Det gør det også for de fleste andre værdier. Du tror måske, at en check, der er større end nul, er ubrugelig, men du tænker igen, når spillet siger, at du gjorde 0 skade og gendannede 0 mana.
  • Derefter kører den en brugerdefineret funktion, hvis stavningen har en. Dette kan bruges til at give trylleformularer specielle effekter, som ikke er mulige gennem vores vigtigste angrebsfunktion.

Spilsløjfen

For mig kontrollerer og opdaterer spilsløjfen ting: spillerstatistik, om spilleren er død, om spilleren lige er nivelleret, om en chef er død osv.

Du bliver nødt til at finde ud af denne selv. Jeg synes, det er god læringserfaring. Tænk på, hvad og hvornår kontrol og opdateringer skal køre. For eksempel med en niveaukontrol satte jeg den til at køre hvert 20. sekund, da nivellering ikke er så stor en aftale.

Men så har jeg også en Boss death check, der kører hvert sekund efter kampstart. Hvorfor? Så spillerne behøver ikke at vente 20 sekunder på, at en chef dør.

Nogle andre ting behøver ikke engang at være i en løkke. Funktionerne kan bare kaldes, når de er nødvendige. Tag f.eks. Min opdateringsfunktion. Det kaldes kun, når en spiller bruger en trylleformular.

Et par ting, jeg har lært:

  • Objekter er gode. På denne måde skal du bare gemme objektet - ikke de 50 individuelle variabler, når du skal gemme data.
  • Indstil altid timeouts og intervaller som variabler, så de kan ryddes senere - medmindre de er permanente effekter, og du er sikker på, at du aldrig får brug for at rydde dem.
  • En stor javascript-fil er måske ikke en klog idé. CodePen tillader kun en JavaScript-fil, men ideelt set skal du adskille alt i moduler.
  • Hvis du ikke er bekymret for ydeevne, kan du bare kopiere og indsætte objektet, når det skal opdateres - intet behov for at opdatere halvdelen af ​​værdierne individuelt. Hvis objektet er stort, kan du endda definere objektet først som en variabel som: var objekt; og bygg det derefter op ved hjælp af en anden funktion, når du vil have den opdateret. Jeg gjorde det med mine besværgelser. Hver gang en spiller trylleformulerer, definerer opdateringsspell () -funktionen først trylleobjektet igen, beregner al skade og statistik og affyrer derefter trylleformularen.

Sjove ting, jeg har kompromitteret med:

  • Færdighedsmana-omkostninger er pr. Bossniveau, for hvis de var på spillerniveau, ville jeg straffe spillere for at udjævne. Dette gjorde også bosser på højere niveau meget sværere, hvilket jeg kunne lide.
  • Elementer oprettes med al statistik, men de vises ikke, hvis de er 0. På denne måde behøver jeg ikke tjekke for udefineret, og jeg kan undgå at vise statistik, hvis de genereres som 0. Dobbelt gevinst!
  • Jeg har forenklet buffs og debuffs meget. Dybest set er der en var buffStat, nerfStat, totalStat og stat. Så buffs eller debuffs stabler aldrig.
  • Med bosser nerf stat dygtighed faktisk ikke nerf det til 0. Dette er meget mere sofistikeret end det. Det nedbryder statussen med 9999999 og kontrollerer derefter, om den er mindre end 0. Hvis ja, indstilles den til 0. Så hvis du formår at nå et niveau, hvor du har statistik, der er i milliarder, er jeg muligvis nødt til at tilføje mere nuller.

Hvad alt dette har tænkt mig er, at jeg skulle planlægge lidt længere fremme, selvom jeg bare bygger et sjovt projekt for at udvide mine egne færdigheder.

Jeg har nu også en meget bedre forståelse af, hvordan bugs opstår: nogle gange er du ikke klar over alle kanttilfælde, hvor ting kan bryde ned ad vejen. Og det er når bugs bider.

Fejl og udnyttelser

Denne overraskede mig og skræmte mig lidt. Jeg kunne ikke tro, at mit perfekte kunstværk indeholdt bugs!

Ok, jeg overdriver lidt. Men jeg undervurderede det store antal ting, der kunne gå galt, uden at jeg engang var klar over det.

Her er et par fejl og udnyttelser, der dukkede op, oven på mit hoved:

  1. Du kan ændre bossniveauer, mens du kæmper med en boss, og få bedre byttedråber på den måde
  2. HP- og Mana-bjælker ville engang løbe over
  3. Du kunne angribe chefen, før kampen endda startede. Tal om en sucker punch!
  4. Mana kunne blive negativ, hvilket forhindrede dig i at være i stand til at udføre selv grundlæggende angreb, hvilket er den vigtigste måde, du kan gendanne din mana på.
  5. Heals øgede din maksimale helbred midlertidigt.
  6. Én trylleformular var faktisk ikke klikbar for det meste på grund af et CSS-problem
  7. At angribe, mens du ikke er i kamp, ​​sæt dine trylleformularer på uendelig nedkøling

Disse lyder alle forfærdelige, ikke? I en MMORPG ville disse ting blive misbrugt fra første dag og ødelægge alt!

Nå, den gode nyhed er, at de fleste af dem let kunne rettes - normalt med mindre end 1 linje kode.

Andre fejl krævede dog, at jeg skulle omarbejde hele systemet fuldstændigt. Med stavningssystemet gik jeg fra at skulle skrive 3 hele funktioner for hver stave til kun at have brug for et lille objekt, der kun tager et par sekunder redigering.

Igen, her er mit spil, hvis du vil prøve det (bemærk, at det ikke er optimeret til mobile enheder):

Og her er koden (som også er open source og kan redigeres på CodePen):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Dræb bosser, få LOOT! github.com

Husk at jeg er nybegynder (kun 2 måneder inden programmering), så nogle af mine løsninger kan forbedres. Forhåbentlig dog gav jeg dig i det mindste det grundlæggende for at komme i gang!

Hav det sjovt ved at oprette dit Javascript-spil!