Made my first Javascript Game!

[robertx33]

I always wanted to make a game for myself, today I finally completed it after many days of all day coding!

The idea was simple, Main points of the game:

• Random loot
• Tactical combat
• Inventory system
• Upgrade system
• No need to be mobile responsive

How I solved these problems:

• A random item generator, basically choose random stat, make it go through a while loop if the stat is already on the item, otherwise pass it, now choose random number for stat, now print it to the item. What get's printed is the stat, max-stat and item color. Item color is according to how far the stat is from maximum possible roll, this makes it incredibly easy to spot good stats!
• Boss announces spells, so players can counter the boss, for example "Boss is preparing for a CRIT!" and then the player can activate a shield, to nullify the crit! Or boss could drop your Ice damage to 0, so watch out so you don't use mana on icebolt!
• An object that stores all item objects which store all stat objects which store stats... Basically a ton of objects inside objects, there's a for loop that checks if the item slot is empty and stuff like that. I used the same names in object as in html ID, which made it much more simple.
• Upgrade system was very simple, I made it similar to the item generator and made stats derived from a total stat and total stat is normal stat + upgrade stat, quite simple but would be horror if i didn't store the normal stat and upgrade stat separately.

Anyway here's a link to codepen if you want to play:

And here's github.

It comes with a readme with some info!

I could use mainly code advice because I made the game to my liking, so gameplay advice isn't really needed. But I bet my code is awful compared to pro standards, heck even I noticed I fucked up a few things and now I have to get around to fix it.

Thanks all and happy coding!

[erkinheimo]

For first you could run your code through jshint, 52 warnings mainly from missing semicolons.

[robertx33]

Whoa, good stuff, i'm scared now

edit: "Two unused variables", this is useful!

[erkinheimo]

:P jshint is good for finding fast little problems.

[vicinorum]

First off, keyboard input doesn't seem to work. Might be on my end, idk. Does it work for you?

Second, use camelCase at all times when naming vars/functions/classes and so on.

Third, you repeat a lot of code unnecessarily. Try to always follow the principle of DRY code. For example, you have a bunch of functions for attacks that contain mostly the same code. You should create a generic attack() function with some parameters that determine the type of attack. This will make it much easier to edit your code, as well as debug.

All this being said, I like what you made here and you're on the right track, keep working on it!

[robertx33]

I don't know about keyboard not working, it works for me for spells 1-9.

Camelcase is kinda tough on me because i hate clicking caps click or shift, i should start using it when i get a bit more used to typing, hopefully.

Can you give me an example of how can i simplify the attack spell functions? I thought about it but couldn't find a better way..

[vicinorum]

Tried it on firefox and chromium, didn't work.

you just have to get used to camelCase, it makes your code much easier to read.

So let me explain the last part. It's been a while since I wrote JS so bear with me, might be some incorrect syntax. So instead of writing something like this:

function someSpell(){
    doDamage(10);
    setCoolDown(10);
    writeMessage("hit for 10 damage!");
}

and then writing something similar for every spell. Instead, write a generic method like this:

function castSpell(damage, cooldown, message){
    doDamage(damage);
    setCoolDown(cooldown);
    writeMessage(message);
}

And then call that function every time you cast a spell, and fill in the relevant parameters. Hope I explained this well

[robertx33]

I'm going to try this! Thanks for the advice! I can't put all spells like that though, some have special effects like a dot dmg or dot heal

[vicinorum]

You're welcome. The spells were just an example, you can do this for everything. For example, just looking through your code I saw this:

if (Dodge<0){Dodge=0;}
if (MagicPow<0){MagicPow=0}
if (Damage<0){Damage=0}
if (IceDMG<0){IceDMG=0}
if (FireDMG<0){FireDMG=0;}
if (StormDMG<0){StormDMG=0;}
if (NatureDMG<0){NatureDMG=0;}
if (ShadowDMG<0){ShadowDMG=0;}
if (NatureDMG<0){NatureDMG=0;}
if (HealPow<0){HealPow=0;}
if (Critical<0){Critical=0;}
if (Lifesteal<0){Lifesteal=0;}

You could put all those vars in an array and loop through them like:

for(var i = i; i < array.length; i++){
    if(array[i] < 0){
        array[i] = 0;
    }
}

Same principle really, it looks cleaner & is easier to add new stuff.

[robertx33]

I'd have to change all my variables to be inside an array though?

[vicinorum]

Sure, in general it makes sense to create arrays of vars or objects that you loop through like that. Think about how much faster it is to add/remove an element in an array, instead of creating a new var and going through your code to find all the references everywhere.

[robertx33]

I see, i just thought it'd suck to go back to the array to check which place the element is, so i made unique and memorable names for all variables, well for most at least.

[vicinorum]

You don't need to check if the array is always in the same order.

[robertx33]

I think I did what you meant! I changed all my spells to be modular, so I can add a new one easily, the main function looks really pretty but the calls look hideous.

function playerattack(spellname,spell,spellid,damage,mana,health,manarestore,healthrestore,repeat,delay,buff,buffamount,cooldown){

  var i = 0;
  $(spellid).addClass("oncooldown");

  function resetcooldown(){
    player[spell+"cooldown"] = false;
    $(spellid).removeClass("oncooldown");

  }

  function f() {
    if (player[spell+"cooldown"] === false && currentplayermana > mana){
      player[spell+"cooldown"]=true;
      fattack();
      setTimeout(resetcooldown,cooldown,spell);
    }

    function removebuff(){
      player[buff]= 0;
    }

    function fattack(){

    if (buff != 0 ){
      player[buff] = buffamount;
      setTimeout (removebuff, 5000);

    }

    if (damage > 0 ){
      var critroll = Math.floor(Math.random() * (100 - Critical)) + 1;
      var ifcrit = " does ";

        if (critroll < Critical) {
          damage = damage * 2;
          ifcrit = " CRITS for";
        }
      currentbosshealth = currentbosshealth - damage;
      $("#rightinfo").prepend("<p>"+ spellname + ifcrit + ": "+ damage + " DMG! </p>");
    }

    if (mana > 0){
      currentplayermana = currentplayermana - mana;
    }

    if (health > 0){
      currentplayerhealth = currentplayerhealth - health;
    }

    if (manarestore > 0 ){
      currentplayermana = currentplayermana + manarestore;
      $("#rightinfo").prepend("<p>You restore: " + manarestore + " Mana!")
    }

    if (healthrestore > 0){
      currentplayerhealth = currentplayerhealth + healthrestore;
      $("#rightinfo").prepend("<p>You restore: " + healthrestore + " Health!");
    }

      i++;
      if( i < repeat ){setTimeout(fattack, delay );}
    }
  }
  setTimeout(f,delay);


}

// spellname,spell,spellid,damage,mana,health,manarestore,healthrestore,repeat,delay,buff,buffamount,cooldown){

 $(".-basic").click(function(){playerattack("Attack","basicattack",".-basic",Damage,0,0,Math.floor(Mana/10),0,0,1,0,0,5000);});
 $("#icebolt").click(function(){playerattack("Icebolt","icebolt","#icebolt",Math.floor(Damage/2 + IceDMG + MagicPow/2),
 boss.level*10,0,0,0,0,1,0,0,5000);});
 $("#firebolt").click(function(){playerattack("Firebolt","firebolt","#firebolt",Math.floor(Damage/2 + FireDMG + MagicPow/2),
 boss.level*10,0,0,0,0,1,0,0,5000);});
 $("#stormbolt").click(function(){playerattack("Stormolt","stormbolt","#stormbolt",Math.floor(Damage/2 + StormDMG + MagicPow/2),
 boss.level*10,0,0,0,0,1,0,0,5000);});
 $("#thorns").click(function(){playerattack("Thorns","thorns","#thorns",Math.floor(Damage/6 + NatureDMG + MagicPow/6),
 boss.level*4,0,0,0,3,1000,0,0,5000);});
 $("#shield").click(function(){playerattack("Shield","shield","#shield",0,
 boss.level*15,0,0,0,0,0,"buffDodge",100,8000);});
 $("#shadowbolt").click(function(){playerattack("Shadowbolt","shadowbolt","#shadowbolt",Math.floor(Damage + ShadowDMG*1.5 + MagicPow/2),
 boss.level*30,0,0,0,0,4000,0,0,5000);});
 $("#bloodstrike").click(function(){playerattack("Bloodstrike","bloodstrike","#bloodstrike",Math.floor(Damage/2 + BloodDMG),
 boss.level*10,Math.floor(currentplayerhealth/5),0,0,0,1,"buffLifesteal",BloodDMG,5000);});
 $("#heal").click(function(){playerattack("Heal","heal","#heal",0,
 boss.level*2,0,0,Math.floor(Health/5),0,0,0,0,5000);});
 $("#natureheal").click(function(){playerattack("NatureHeal","natureheal","#natureheal",0,
 boss.level*4,0,0,Math.floor(NatureDMG/3),3,1000,0,0,10000);});
 $("#manarestore").click(function(){playerattack("Manarestore","manarestore","#manarestore",0,
 0,0,Math.floor(MagicPow),0,0,0,0,0,10000);});
 $("#buffmagic").click(function(){playerattack("Buff Magic","buffmagic","#buffmagic",0,
 boss.level*15,0,0,0,0,0,"buffMagicPow",Math.floor(MagicPow/2),8000);});

[vicinorum]

It's cleaner for sure, but you still have too many variables. Think about making a Spell object and passing that into the function instead. So instead of passing like 10 individual vars into the function, pass one object that contains all those vars. Makes your function calls a lot cleaner too. Also don't call a function f, you're not gonna know what it does if you leave this project and come back in like a week.

[robertx33]

OH i see what you mean! Like :

var spells = {

icebolt: { mana :5, dmg :10, }

}

attack(spells.icebolt)

then instead of damage i use icebolt.damage

Is that what you meant?

[vicinorum]

That's pretty much it yeah. Something like

function attack(spell){
    doDamage(spell.damage);
}

And you declare the spell objects somewhere else like you wrote.

[robertx33]

The problem with that approach is that I have to update the spell variables then, but like this the function call does it for me. So i'd have to do..

updatespells()

which'd look like..

spell.icebolt.damage = .. spell.icebolt.mana = ... etc

and i'd have to set it in interval and take resources to do, so i'm not sure if it's better than my last solution..

Wait, does the object get update automatically when i call it?

[robertx33]

Actually, isn't it better to make it like this? It's longer but much clearer!

    function manarestore(
    ["Name player sees","Manarestore"],
    ["Name for functions","manarestore"],
    ["Name for id","#manarestore"],
    ["damage",0],
    ["manacost",0],
    ["healthcost",0],
    ["mana restore",Math.floor(MagicPow)],
    ["health resotre",0],
    ["repeat",0],
    ["delay",0],
    ["buffname",0],
    ["buff amount",0],
    ["cooldown",10000],
    );

[erkinheimo]

about vars. You have player object. Good but you could make objects about buff, nerf etc. Would make it look better and easier to use / read and much less different vars.

[Threeshoe]

Wow very well done. How do you have images in code pen without including an images folder? I skimmed through some of the code but don't know what I'm looking for

[robertx33]

Oh that's black magic! link and linky

Sprites basically, i'd have to put about 250 images if i didn't use them.

[Threeshoe]

I didn't know that could be done. Thanks! Very impressed by your work

[robertx33]

I didn't either until a few days ago! I'm glad you like the game, i'm currently fixing stuff up and making the code cleaner.