title: Random Monster Generator in simple Text Based RPG
body: <p>I'm trying to create a little text based rpg to put in practice what i learned of javascript. I tried two approaches, one is working and the other one isn't it, and I want to know why.</p>
  
  <p>In the first one, I created an object "monster" with a method that sets all the properties of each monster (hit points, attack points, etc). The problem with this it's i have to write the properties one by one, and it makes the code too long for my taste.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Write JavaScript here */
  /* Write JavaScript here */
  $(document).ready(function() {
  
   var hero = {
    hitPoints: 13,
    armorClass: 10,
    attackBonus: 1,
    weaponDamage: 7,
    heroStats: function() {
     return "Hero" + "&lt;br/&gt;" +
      "Hit Points: " + this.hitPoints + "&lt;br/&gt;" +
      "Armor Class: " + this.armorClass + "&lt;br/&gt;" +
      "Attack Bonus: " + this.attackBonus + "&lt;br/&gt;" +
      "Weapon Damage: " + this.weaponDamage;
    },
    alive: true
   };
  
   var monster = {
    name: "",
    hitPoints: 0,
    armorClass: 0,
    attackBonus: 0,
    weaponDamage: 0,
    monsterStats: function() {
     return this.name + "&lt;br/&gt;" +
      "Hit Points: " + this.hitPoints + "&lt;br/&gt;" +
      "Armor Class: " + this.armorClass + "&lt;br/&gt;" +
      "Attack Bonus: " + this.attackBonus + "&lt;br/&gt;" +
      "Weapon Damage: " + this.weaponDamage;
    },
    monsterSelected: false,
    selectMonster: function() {
     if (this.monsterSelected === false) {
      switch (Math.floor(Math.random() * 2) + 1) {
       case 1:
        this.name = "Werewolf";
        this.hitPoints = 20;
        this.armorClass = 8;
        this.attackBonus = 4;
        this.weaponDamage = 3;
        this.monsterSelected = true;
        break;
       case 2:
        this.name = "Goblin";
        this.hitPoints = 15;
        this.armorClass = 10;
        this.attackBonus = 4;
        this.weaponDamage = 3;
        this.monsterSelected = true;
        break;
      }
     }
    },
    alive: true
   };
  
   monster.selectMonster();
   $(".hero_info").html(hero.heroStats());
   $(".monster_info").html(monster.monsterStats());
  
   $("button").click(function() {
    battle(monster);
   });
  
  
  
   function battle(actualmonster) {
    if (actualmonster.alive === false) {
     actualmonster.monsterSelected = false;
     actualmonster.selectMonster();
     $(".monster_info").html(actualmonster.monsterStats());
     $(".battle_info").html("");
     actualmonster.alive = true;
    } else {
     var d20 = Math.floor(Math.random() * 20) + 1;
     var d_wp = Math.floor(Math.random() * hero.weaponDamage) + 1;
     if (d20 + hero.attackBonus &gt; actualmonster.armorClass) {
      $(".battle_info").html("You attack!: d20+" + hero.attackBonus + ": " + (d20 + hero.attackBonus) + " vs AC " + actualmonster.armorClass + "&lt;br/&gt;" + "You hit!: d" + hero.weaponDamage + ": " + d_wp);
      actualmonster.hitPoints = actualmonster.hitPoints - d_wp;
      $(".monster_info").html(actualmonster.monsterStats());
     } else {
      $(".battle_info").html("You miss!: d20+" + hero.attackBonus + ": " + (d20 + hero.attackBonus) + " vs AC " + actualmonster.armorClass);
     }
     if (actualmonster.hitPoints &lt;= 0) {
      actualmonster.hitPoints = 0;
      $(".monster_info").html(actualmonster.monsterStats());
      $(".battle_info").html("You killed the monster!");
      actualmonster.alive = false;
     } else {
      var d20_m = Math.floor(Math.random() * 20) + 1;
      var d_wp_m = Math.floor(Math.random() * monster.weaponDamage) + 1;
      if (d20_m + actualmonster.attackBonus &gt; hero.armorClass) {
       $(".battle_info").append("&lt;br/&gt;Monster attacks you!: d20+" + actualmonster.attackBonus + ": " + (d20_m + actualmonster.attackBonus) + " vs AC " + hero.armorClass + "&lt;br/&gt;" + "Monster hits you!: d" + actualmonster.weaponDamage + ": " + d_wp_m);
       hero.hitPoints = hero.hitPoints - d_wp_m;
       $(".hero_info").html(hero.heroStats());
      } else {
       $(".battle_info").append("&lt;br/&gt;Monster miss!: d20+" + hero.attackBonus + ": " + (d20_m + monster.attackBonus) + " vs AC " + hero.armorClass);
      }
     }
    }
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;p class="monster_info"&gt;&lt;/p&gt;
    &lt;p class="battle_info"&gt;&lt;/p&gt;
    &lt;p class="hero_info"&gt;&lt;/p&gt;
    &lt;button type="button"&gt;Attack&lt;/button&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the second one, instead of creating and object "monster", i make a constructor, so i could define the monsters in a shorter and simplier way (for example: var phantom = new monster (prop1, prop2, prop3...)). The issue comes when i tried select a random monster for each battle. I tried a lot of things, but the problem remains the same: if a create a random function to select the monsters, this works every time a click the attack button, making a mess. This is driven me crazy, and i have no idea what to do. Any suggestions? Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
      var hero = {
          hitPoints: 13,
          armorClass: 10,
          attackBonus: 1,
          weaponDamage: 7,
          heroStats: function() {
              return "Hero" + "&lt;br/&gt;" +
                  "Hit Points: " + this.hitPoints + "&lt;br/&gt;" +
                  "Armor Class: " + this.armorClass + "&lt;br/&gt;" +
                  "Attack Bonus: " + this.attackBonus + "&lt;br/&gt;" +
                  "Weapon Damage: " + this.weaponDamage;
          },
          alive: true
      };
  
      function monster(name, hitpoints, armorclass, attackbonus, weapondamage) {
          this.name = name;
          this.hitPoints = hitpoints;
          this.armorClass = armorclass;
          this.attackBonus = attackbonus;
          this.weaponDamage = weapondamage;
          this.monsterStats = function() {
                  return this.name + "&lt;br/&gt;" +
                      "Hit Points: " + this.hitPoints + "&lt;br/&gt;" +
                      "Armor Class: " + this.armorClass + "&lt;br/&gt;" +
                      "Attack Bonus: " + this.attackBonus + "&lt;br/&gt;" +
                      "Weapon Damage: " + this.weaponDamage;
              },
              this.selected = false;
          this.alive = true;
      }
  
      function selectMonster() {
          var werewolf = new monster("Werewolf", 5, 4, 4, 3);
          var goblin = new monster("Goblin", 15, 4, 4, 3);
          switch (Math.floor(Math.random() * 2) + 1) {
              case 1:
                  if (werewolf.selected === false) {
                      werewolf.selected = false;
                      return werewolf;
                  }
                  break;
              case 2:
                  if (goblin.selected === false) {
                      goblin.selected = false;
                      return goblin;
                  }
                  break;
          }
      }
  
      $(".hero_info").html(hero.heroStats());
      $(".monster_info").html(selectMonster().monsterStats());
  
      $("button").click(function() {
          battle(selectMonster());
      });
  
  
  
      function battle(actualmonster) {
          if (actualmonster.alive === false) {
              actualmonster.selected = false;
              actualmonster.selectMonster();
              $(".monster_info").html(actualmonster.monsterStats());
              $(".battle_info").html("");
              actualmonster.alive = true;
          } else {
              var d20 = Math.floor(Math.random() * 20) + 1;
              var d_wp = Math.floor(Math.random() * hero.weaponDamage) + 1;
              if (d20 + hero.attackBonus &gt; actualmonster.armorClass) {
                  $(".battle_info").html("You attack!: d20+" + hero.attackBonus + ": " + (d20 + hero.attackBonus) + " vs AC " + actualmonster.armorClass + "&lt;br/&gt;" + "You hit!: d" + hero.weaponDamage + ": " + d_wp);
                  actualmonster.hitPoints = actualmonster.hitPoints - d_wp;
                  $(".monster_info").html(actualmonster.monsterStats());
              } else {
                  $(".battle_info").html("You miss!: d20+" + hero.attackBonus + ": " + (d20 + hero.attackBonus) + " vs AC " + actualmonster.armorClass);
              }
              if (actualmonster.hitPoints &lt;= 0) {
                  actualmonster.hitPoints = 0;
                  $(".monster_info").html(actualmonster.monsterStats());
                  $(".battle_info").html("You killed the monster!");
                  actualmonster.alive = false;
              } else {
                  var d20_m = Math.floor(Math.random() * 20) + 1;
                  var d_wp_m = Math.floor(Math.random() * hero.weaponDamage) + 1;
                  if (d20_m + actualmonster.attackBonus &gt; hero.armorClass) {
                      $(".battle_info").append("&lt;br/&gt;Monster attacks you!: d20+" + actualmonster.attackBonus + ": " + (d20_m + actualmonster.attackBonus) + " vs AC " + hero.armorClass + "&lt;br/&gt;" + "Monster hits you!: d" + actualmonster.weaponDamage + ": " + d_wp_m);
                      hero.hitPoints = hero.hitPoints - d_wp_m;
                      $(".hero_info").html(hero.heroStats());
                  } else {
                      $(".battle_info").append("&lt;br/&gt;Monster miss!: d20+" + hero.attackBonus + ": " + (d20_m + actualmonster.attackBonus) + " vs AC " + hero.armorClass);
                  }
              }
          }
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p class="monster_info"&gt;&lt;/p&gt;
    &lt;p class="battle_info"&gt;&lt;/p&gt;
    &lt;p class="hero_info"&gt;&lt;/p&gt;
    &lt;button type="button"&gt;Attack&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>