Game proto REAL

game-proto-real.markdown

Game proto REAL

A Pen by Robert on CodePen.

License.

index.html

<div oncontextmenu="return false;" id="main">
  <div id="viewscreen">
    <div class="col-xs-3">
      <table class="inventory" id="inventory">
        <tr>
          <td id="i1" class="slot "></td>
          <td id="i2" class="slot "></td>
          <td id="i3" class="slot "></td>
          <td id="i4" class="slot "></td>
        </tr>
        <tr>
          <td id="i5" class="slot "></td>
          <td id="i6" class="slot "></td>
          <td id="i7" class="slot "></td>
          <td id="i8" class="slot "></td>
        </tr>
        <tr>
          <td id="i9" class="slot "></td>
          <td id="i10" class="slot "></td>
          <td id="i11" class="slot "></td>
          <td id="i12" class="slot "></td>
        </tr>
        <tr>
          <td id="i13" class="slot "></td>
          <td id="i14" class="slot "></td>
          <td id="i15" class="slot "></td>
          <td id="i16" class="slot "></td>
        </tr>
        <tr>
          <td id="i17" class="slot "></td>
          <td id="i18" class="slot "></td>
          <td id="i19" class="slot "></td>
          <td id="i20" class="slot "></td>
        </tr>
        <tr>
          <td id="i21" class="slot "></td>
          <td id="i22" class="slot "></td>
          <td id="i23" class="slot "></td>
          <td id="i24" class="slot "></td>
        </tr>
        <tr>
          <td id="i25" class="slot "></td>
          <td id="i26" class="slot "></td>
          <td id="i27" class="slot "></td>
          <td id="i28" class="slot "></td>
        </tr>
      </table>

      <div class="col-xs-3" id="shop"></div>

    </div>
    <div class="col-xs-6 col-xs-pull-1">

      <div id="screen">

        <div id="battle">
        </div>

        <div id="spells">

         <table id="spellslots">
            <tr>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
              <td class="spellslot inventory"></td>
            </tr>
          </table>
        </div>

      </div>

      <div class="col-xs-6 col-xs-pull-1" id="box">

        <div id="boxy">
          
          <div class="col-xs-3" id="stats1"></div>
          <div class="col-xs-3" id="stats2"></div>         
        </div>

      </div>

    </div>


    <div class="col-xs-3">


      <div class="text-center" id="info"></div>

      <table id="character">

        <tr>
          <td id="talisman" class="characterslot slot1"></td>
          <td id="head" class="characterslot slot1"></td>
          <td id="ring" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>
        <tr>
          <td id="shoulder" class="characterslot slot1"></td>
          <td id="chest" class="characterslot slot1"></td>
          <td id="book" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>
        <tr>
          <td id="wrist" class="characterslot slot1"></td>
          <td id="leg" class="characterslot slot1"></td>
          <td id="glove" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>
        <tr>
          <td id="weapon" class="characterslot slot1"></td>
          <td id="boot" class="characterslot slot1"></td>
          <td id="necklace" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>


      </table>

    </div>


  </div>
 
  
  
<div id="showdiv">
  <button class="btn btn-block btn-success" id="equip">Equip</button>
  <button class="btn btn-block btn-info" id="show">Create Item!</button>
  <button class="btn btn-block btn-warning" id="sell">Sell</button>
  <button class="btn btn-block btn-danger" id="close">Close</button>
</div>


<div id="showdiv1">
  <button class="btn btn-block btn-success" id="unequip">Unequip</button>
   <button class="btn btn-block btn-danger" id="close1">Close</button>
</div>
</div>




</div>

<!-- MAIN -->

script.js

var clickeditemid;
var affixnames = [
  "Blindness",
  "Bravery",
  "Burning",
  "Burrowing",
  "Conjuration",
  "Darkness",
  "Dawn",
  "Death",
  "Deception",
  "Defense",
  "Deflection",
  "Delerium",
  "Desire",
  "Despair",
  "Destruction",
  "Domination",
  "Doom",
  "Dragonslaying",
  "Dreaming",
  "Durability",
  "Dusk",
  "Evocation",
  "Fire",
  "Flame",
  "Freezing",
  "Fury",
  "Glory",
  "Growth",
  "Healing",
  "Heroism",
  "Hope",
  "Horror",
  "Ice",
  "Illusion",
  "Impact",
  "Imprisonment",
  "Incineration",
  "Insanity",
  "Invulnerability",
  "Invisibility",
  "Justice",
  "Life",
  "Light",
  "Lightlessness",
  "Lightning",
  "Love",
  "Madness",
  "Malice",
  "Mercy",
  "Midnight",
  "Obedience",
  "Peace",
  "Petrification",
  "Piercing",
  "Planeswalking",
  "Prophecy",
  "Rage",
  "Resurrection",
  "Retribution",
  "Seeking",
  "Shadow",
  "Shadowbinding",
  "Shattering",
  "Shieldbreaking",
  "Shielding",
  "Shocking",
  "Siege",
  "Sightblinding",
  "Silence",
  "Smiting",
  "Solidity",
  "Soul",
  "Soulbinding",
  "Soulcutting",
  "Spellbreaking",
  "Starlight",
  "Stealth",
  "Stonecutting",
  "Striking",
  "Sundering",
  "the Angel",
  "the Banshee",
  "the Centaur",
  "the Demon",
  "the Desert",
  "the Dragon",
  "the Dwarf",
  "the Elf",
  "the Elements",
  "the Fairie",
  "the Gargoyle",
  "the Genie",
  "the Ghost",
  "the Ghoul",
  "the Giant",
  "the Gnome",
  "the Goblin",
  "the God",
  "the Gremlin",
  "the Gryphon",
  "the Homunculus",
  "the Lich",
  "the Mermaid",
  "the Monster",
  "the Ogre",
  "the Orc",
  "the Titan",
  "the Troll",
  "the Vampire",
  "the Werebeast",
  "the Werewolf",
  "the Wight",
  "Thought",
  "Townsaving",
  "Treachery",
  "True Sight",
  "Twilight",
  "Valor",
  "Vengeance",
  "Void",
  "Warding",
  "Wayfinding",
  "Weightlessness",
  "Wind",
  "Winter",
  "Wisdom",
  "Woundhealing",
];
var itemname = "";
var itemslotnames = ["Talisman", "Helmet", "Ring", "Shoulders", "Chestplate", "Book", "Bracelet", "Leggings", "Gloves", "Weapon", "Boots", "Necklace"];
var slotplayernames = ["talisman", "head", "ring", "shoulder", "chest", "book", "wrist", "leg", "glove", "weapon", "boot", "necklace"];
var itemslot = 0;
var generateditem = {};
var rarities = ["Common", "Magic", "Rare", "Epic", "Legendary"];
var affixnumber = "";
var itemrarity;
var currentitemid = "";
// affixes : name > starting stat > stat per level
var affixes = [
  ["Health", 100, 10],
  ["Mana", 100, 10],
  ["Dodge", 5, 0],
  ["Critical", 5, 0],
  ["Damage", 10, 1],
  ["MagicPow", 20, 2],
  ["ShadowDMG", 30, 3],
  ["NatureDMG", 30, 3],
  ["IceDMG", 30, 3],
  ["FireDMG", 30, 3],
  ["BloodDMG", 30, 3],
  ["StormDMG", 30, 3],
  ["HealPow", 20, 2],
]
var randomstat;
var usedstats = [];
var itempicturenum;
var iconnumbers = {
  head: 5,
  chest: 17,
  leg: 7,
  boot: 10,
  ring: 11,
  talisman: 23,
  weapon: 56,
  wrist: 13,
  shoulder: 10,
  book: 11,
  glove: 11,
  necklace: 7,
}

function displaystats() {

  $("#stats1").empty();
  $("#stats2").empty();

  $("#stats1").append(
    "<p>Health: " + Health + "</p>" +
    "<p>Mana: " + Mana + "</p>" +
    "<p>Critical: " + Critical + "</p>" +
    "<p>Dodge: " + Dodge + "</p>" +
    "<p>MagicPow: " + MagicPow + "</p>" +
    "<p>Damage: " + Damage + "</p>" +
    "<p>HealPow " + HealPow + "</p>"
  )
  $("#stats2").append(
    "<p>IceDMG: " + IceDMG + "</p>" +
    "<p>FireDMG: " + FireDMG + "</p>" +
    "<p>ShadowDMG: " + ShadowDMG + "</p>" +
    "<p>NatureDMG: " + NatureDMG + "</p>" +
    "<p>StormDMG: " + StormDMG + "</p>" +
    "<p>BloodDMG: " + BloodDMG + "</p>"
  )

}

setInterval(displaystats, 1000);
setInterval(countplayerstats, 5000);

function countplayerstats() {

  player.totalHealth = 0;
  player.totalMana = 0;
  player.totalDodge = 0;
  player.totalMagicPow = 0;
  player.totalDamage = 0;
  player.totalIceDMG = 0;
  player.totalFireDMG = 0;
  player.totalStormDMG = 0;
  player.totalCritical = 0;
  player.totalBloodDMG = 0;
  player.totalShadowDMG = 0;
  player.totalNatureDMG = 0;
  player.totalHealPow = 0;

  for (var d = 0; d < slotplayernames.length; d++) {

    if ($.isEmptyObject(player[slotplayernames[d]]) === false) {

      for (var f = 0; f < affixes.length; f++) {

        player["total" + affixes[f][0]] = player["total" + affixes[f][0]] + player[slotplayernames[d]]['totalstats'][affixes[f][0]];

      }
    }
  } // for loops d f

  Health = 100 + player.buffHealth + player.totalHealth - player.nerfHealth;
  Mana = 100 + player.buffMana + player.totalMana - player.nerfMana;
  Dodge = 5 + player.buffDodge + player.totalDodge - player.nerfDodge;
  MagicPow = 10 + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
  Damage = 10 + player.buffDamage + player.totalDamage - player.nerfDamage;
  IceDMG = 0 + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
  FireDMG = 0 + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
  StormDMG = 0 + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
  Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
  BloodDMG = 0 + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
  ShadowDMG = 0 + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
  NatureDMG = 0 + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
  HealPow = 5 + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
} // count stats function

var finishedgenerating = true;

function createitem() {
  finishedgenerating = false;
  // choose rarity, slot and affix for item
  var randomslot = Math.floor(Math.random() * 12) + 1;
  var randomaffix = Math.floor(Math.random() * affixnames.length);
  var affixnumber = Math.floor(Math.random() * rarities.length) + 1;
  usedstats = [];
  // now generate the item 
  function randomitem(slot) {

    for (var i = 0; i < affixnumber; i++) {

      if (i === 0) {
        generateditem = {};
        usedstats = [];
        itemname = itemslotnames[slot - 1] + " of " + affixnames[randomaffix];
        itemslot = slotplayernames[slot - 1];
        itemrarity = rarities[affixnumber - 1];

        generateditem.name = itemname;
        generateditem.slot = itemslot;
        generateditem.stats = {};
        generateditem.rarity = itemrarity;
        generateditem.value = affixnumber * player.level;
        generateditem.upgrade = {};
        generateditem.upgrade.level = 0;
        generateditem.upgrade.stats = {};
        generateditem.level = player.level;
        generateditem.totalstats = {};

        for (var g = 0; g < affixes.length; g++) {
          generateditem.totalstats[affixes[g][0]] = 0;

        }

        itempicturenum = iconnumbers[itemslot];
        var randompicturenum = Math.floor(Math.random() * itempicturenum) + 1;
        generateditem.icon = itemslot.toString() + "-" + randompicturenum.toString();

      };

      randomstat = Math.floor(Math.random() * affixes.length);
      while (usedstats.indexOf(randomstat) != -1) {
        randomstat = Math.floor(Math.random() * affixes.length);
      }
      usedstats.push(randomstat);

      var statnumber = Math.floor(Math.random() * (affixes[randomstat][1] + (affixes[randomstat][2] * player.level)));
      var statmax = affixes[randomstat][1] + (affixes[randomstat][2] * player.level);

      var statcolor = "Common";
      if (statnumber > statmax / 10) {
        statcolor = "Magic"
      };
      if (statnumber > statmax / 4) {
        statcolor = "Rare"
      };
      if (statnumber > statmax / 2) {
        statcolor = "Epic"
      };
      if (statnumber > statmax / 1.2) {
        statcolor = "Legendary"
      };

      //we finalize the item stats here  
      generateditem.stats[affixes[randomstat][0]] = [statnumber, statmax, statcolor];
      generateditem.totalstats[affixes[randomstat][0]] = statnumber;
    }
    var invcount, itemidcount, itemid, allclasses, itemclass;

    // item done generating
    for (var f = 1; f < 29; f++) {
      invcount = "i" + f;
      itemidcount = "#" + invcount;
      itemid = itemidcount + "S";
      if (jQuery.isEmptyObject(inventory[invcount])) {
        allclasses = "item sprite " + generateditem.icon + " " + generateditem.rarity;
        $(itemidcount).append("<img id='" + itemid + "'class='" + allclasses + "' '></img>");
        f = 50;
        inventory[invcount] = generateditem;

      }
    }

    finishedgenerating = true;
  }

  // this choses item slot

  randomitem(randomslot);
}

var inventory = {
  i1: {},
  i2: {},
  i3: {},
  i4: {},
  i5: {},
  i6: {},
  i7: {},
  i8: {},
  i9: {},
  i10: {},
  i11: {},
  i12: {},
  i13: {},
  i14: {},
  i15: {},
  i16: {},
  i17: {},
  i18: {},
  i19: {},
  i20: {},
  i21: {},
  i22: {},
  i23: {},
  i24: {},
  i25: {},
  i26: {},
  i27: {},
}

var mouseX;
var mouseY;
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

//inventory options
$(".slot").mousedown(function(e) {
  if (e.button == 2) {
     clickeditemid = this.id;
    $("#showdiv").css({
      'top': mouseY,
      'left': mouseX,
      'display': 'block'
    });
  }
});
// to unequip items
$(".slot1").mousedown(function(e) {
  if (e.button == 2) {
     clickeditemid = this.id;
    $("#showdiv1").css({
      'top': mouseY,
      'left': mouseX,
      'display': 'block'
    });
  }
});

$("#unequip").click(function() {

  for (var ff = 1; ff < 29; ff++) {
    var invcount1 = "i" + ff;
    var itemidcount1 = "#" + invcount1;

    if (jQuery.isEmptyObject(inventory[invcount1])) {
      $("#" + clickeditemid).children().appendTo(itemidcount1);
      ff = 50;
      inventory[invcount1] = player[clickeditemid];
      player[clickeditemid] = {};

    }
  }
  countplayerstats()

});

document.oncontextmenu = function() {
  return false;
};

$("#close").click(function() {
  $("#showdiv").css({
    'display': 'none'
  });
});

$("#close1").click(function() {
  $("#showdiv1").css({
    'display': 'none'
  });
});

$("#sell").click(function() {
  sell();
});
$("#equip").click(function() {

  function equip() {
    var equipslot = inventory[clickeditemid]["slot"];

    if ($.isEmptyObject(player[equipslot])) {
      $("#" + clickeditemid).children().appendTo("#" + equipslot);
      $("#" + clickeditemid).empty();
      // now to delete and transfer data
      player[equipslot] = inventory[clickeditemid];
      inventory[clickeditemid] = {};
    }
  }

  equip();
  countplayerstats();

});

$("#show").click(function() {
  if (finishedgenerating === true) {
    createitem()
  }
});



//INVENTORY CLICK
$(".slot").click(function() {

  clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu
  //console.log(inventory[clickeditemid]["slot"]);

  $('td').children().removeClass("selected");
  $("#" + clickeditemid).children().addClass("selected");

  $("#info").empty();
  for (var y = 0; y < affixes.length; y++) {
    var statstuff = inventory[clickeditemid]["stats"][affixes[y][0]];

    if (y === 0) {
      var namerarity = inventory[clickeditemid]["rarity"];
      var clickeditemname = inventory[clickeditemid]["name"];

      $("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
    }

    if (statstuff != undefined) {
      $("#info").append(
        "<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
      );
    }
    if (y === affixes.length - 1) {
      $("#info").append("<p>Item Level: " + inventory[clickeditemid]["level"] + "</p>");
    }
  }
});

//CHARACTER CLICK
$(".slot1").click(function() {
  clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu

  $('td').children().removeClass("selected");
  $("#" + clickeditemid).children().addClass("selected");

  $("#info").empty();
  for (var y = 0; y < affixes.length; y++) {
    var statstuff = player[clickeditemid]["stats"][affixes[y][0]];

    if (y === 0) {
      var namerarity = player[clickeditemid]["rarity"];
      var clickeditemname = player[clickeditemid]["name"];

      $("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
    }

    if (statstuff != undefined) {
      $("#info").append(
        "<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
      );
    }
    if (y === affixes.length - 1) {
      $("#info").append("<p>Item Level: " + player[clickeditemid]["level"] + "</p>");
    }
  }

});

function sell() {
  var sellgold = inventory[clickeditemid]["value"];
  $("#" + clickeditemid).empty();
  inventory[clickeditemid] = {};
  player.gold = player.gold + sellgold;
}

var buffhealth = 0;
var buffmana = 0;
var buffdodge = 0;
var buffmagicpower = 0;
var buffdamage = 0;
var bufficedamage = 0;
var bufffiredamage = 0;
var buffstormdamage = 0;
var buffblooddamage = 0;
var buffcritical = 0;
var buffshadowdamage = 0;
var buffnaturedamage = 0;

var iceboltcooldown, basicattackcooldown = false;

var player = {
  level: 1,
  gold: 0,
  experience: 0,

  head: {},
  chest: {},
  leg: {},
  boot: {},
  ring: {},
  talisman: {},
  necklace: {},
  weapon: {},
  wrist: {},
  shoulder: {},
  book: {},
  glove: {},

  totalHealth: 0,
  totalMana: 0,
  totalDodge: 0,
  totalMagicPow: 0,
  totalDamage: 0,
  totalIceDMG: 0,
  totalFireDMG: 0,
  totalStormDMG: 0,
  totalCritical: 0,
  totalBloodDMG: 0,
  totalShadowDMG: 0,
  totalNatureDMG: 0,
  totalHealPow: 0,

  buffHealth: 0,
  buffMana: 0,
  buffDodge: 0,
  buffMagicPow: 0,
  buffDamage: 0,
  buffIceDMG: 0,
  buffFireDMG: 0,
  buffStormDMG: 0,
  buffCritical: 0,
  buffBloodDMG: 0,
  buffShadowDMG: 0,
  buffNatureDMG: 0,
  buffHealPow: 0,

  nerfHealth: 0,
  nerfMana: 0,
  nerfDodge: 0,
  nerfMagicPow: 0,
  nerfDamage: 0,
  nerfIceDMG: 0,
  nerfFireDMG: 0,
  nerfStormDMG: 0,
  nerfCritical: 0,
  nerfBloodDMG: 0,
  nerfShadowDMG: 0,
  nerfNatureDMG: 0,
  nerfHealPow: 0,

}

var Health = 100 + player.buffHealth + player.totalHealth - player.nerfHealth;
var Mana = 100 + player.buffMana + player.totalMana - player.nerfMana;
var Dodge = 5 + player.buffDodge + player.totalDodge - player.nerfDodge;
var MagicPow = 10 + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
var Damage = 10 + player.buffDamage + player.totalDamage - player.nerfDamage;
var IceDMG = 0 + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
var FireDMG = 0 + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
var StormDMG = 0 + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
var Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
var BloodDMG = 0 + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
var ShadowDMG = 0 + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
var NatureDMG = 0 + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
var HealPow = 5 + player.buffHealPow + player.totalHealPow - player.nerfHealPow;

var playerdamage = false;
var critroll = 0;

function basicattack() {

  if (basicattackcooldown === false) {
    var basicattackcooldown = true;

    function clearbasicattackcooldown() {
      basicattackcooldown = false;
    }
    setTimeout(clearbasicattackcooldown(), 1000);
    critical();
  }
}

function critical(x) {
  if (x == "icebolt") {
    critroll = Math.floor(Math.random() * (100 - player.critical)) + 1;

    if (critroll < player.critical) {
      playerdamage = (player.damage + magicpower + icedamage) * 2;
    } else {
      playerdamage = (player.damage + magicpower + icedamage);
    }
  }

}

function icebolt() {
  if (iceboltcooldown === false) {
    iceboltcooldown = true;
    critical("icebolt");
    setTimeout(cleariceboltcooldown(), 150);
  }
}

function reloadeverything(){
  
      for (var f = 1; f < 29; f++) {
      var invcount1 = "i" + f;
      var itemidcount1 = "#" + invcount1;
      var itemid1 = itemidcount1 + "S";
      if (jQuery.isEmptyObject(inventory[invcount1])===false) {
        var allclasses1 = "item sprite " + inventory[invcount1]["icon"] + " " + inventory[invcount1]['rarity'];
        $(itemidcount1).append("<img id='" + itemid1 + "'class='" + allclasses1 + "' '></img>");        
       
      }
    }

   for (var x = 0; x <slotplayernames.length; x++) {
      var itemslot1= slotplayernames[x];
      var itemid1 = "#" + slotplayernames[x];
      var newid1="#c"+x;
     
     if (jQuery.isEmptyObject(player[itemslot1])===false) {
        var allclasses1 = "item sprite " + player[itemslot1]["icon"] + " " + player[itemslot1]['rarity'];
        $(itemid1).append("<img id='" +newid1+ "'class='" + allclasses1 + "' '></img>");        
       
      }
    }
  
  
}

function save() {

  
  var save = {
    player1: player,
    inventory1: inventory,
    
  }
  localStorage.setItem("save", JSON.stringify(save));

}

function load() {

  var savegame = JSON.parse(localStorage.getItem("save"));

  inventory = savegame.inventory1;
  player = savegame.player1;
  reloadeverything();
  countplayerstats()
  displaystats();
}

setInterval(save, 5000);

window.onload = function() {
  load();
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.scss

$maincolor: #8F5D38;
$shadow:orange;
$common:#ffffff;
$magic:#1eff00;
$rare:#0070dd;
$epic:#a335ee;
$legendary:#ff8000;
#main{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
.Common {
  border-color: $common;
  color: $common;
}

.Magic {
  border-color: $magic;
  color: $magic;
}

.Rare {
  border-color: $rare;
  color: $rare;
}

.Epic {
  border-color: $epic;
  color: $epic;
}

.Legendary {
  border-color: $legendary;
  color: $legendary;
}

.selected {
  outline: 5px solid green;
}
#showdiv1 {
  border: solid 5px #222;
  width: 100px;
  height: auto;
  position: absolute;
  background-color: #24303E;
  display: none;
}
#shop {
  width: 222px;
  height: 222px;
  background-color: #24303E;
  border: 5px solid #333;
}

.characterslot {
  border-width: 1px;
  border-style: solid;
  border-color: #BF942C;
  width: 53px;
  height: 53px;
  background-color: $maincolor;
  display: fixed;
  background: url("http://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
  background-size: 53px;
}

#showdiv {
  border: solid 5px #222;
  width: 100px;
  height: auto;
  position: absolute;
  background-color: #24303E;
  display: none;
}

.line {
  height: 18px;
}

p {
  height: 11px;
  font-weight: bold;
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000, 2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000, -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
  font-weight: bold;
}
#stats1{
  width:20%;
  height:100%;
  padding-top:10px;
  
}
#stats2{
 width:20%;
  height:100%;
  float:right;
  text-align: right;
  padding-top:10px;
  
}
#boxy {
  width: 865px;
  height: 216px;
  background: url("http://res.cloudinary.com/treborx555/image/upload/v1472066255/texture_xhoaxc.png");
  
  border: 10px solid #333;
  margin-left: 38px;
  
}

#box {
  margin-top: 5px;
  width: 100%;
  height: 150px;
}

#screen {
  width: 865px;
  height: 381px;
  background-color: #24303E;
  border: 10px solid #333;
  position: block;
  float: left;
  background-size: 100px;
}

#inventory {
  float: left;
}

#info {
  height: 381px;
  width: 222px;
  background-color: #24303E;
  border: 5px solid #333;
  padding-left: 5px;
  float: left;
  margin-left: 83px;
  border: 10px solid #333;
}

.slot {
  border-width: 1px;
  border-style: solid;
  border-color: #BF942C;
  width: 53px;
  height: 53px;
  background-color: $maincolor;
  display: fixed;
  background: url("http://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
  background-size: 53px;
}
.spellslot {
@extend .slot;
}
.item {
  max-width: 45px;
  max-height: 45px;
  border-width: 3.5px;
  border-style: solid;
  vertical-align: middle;
  margin: 0 auto;
}

body {
  padding: 10px;
  background-color: #222;
  width: 100%;
  height: 100vh;
  background: url("https://upload.wikimedia.org/wikipedia/commons/a/a2/San_Raphael_Grasslands_(4412326574).jpg");
  background-size: 100vw;
  max-height: 765px;
  max-width: 1366px;
  margin: 0 auto;
}

table {
  background-color: #333;
  border: 10px solid #333;
}

#battle {
  width: 100%;
  height: 300px;
}

#spellchild {
  margin: 0 auto;
  border: solid 2px #BF942C;
}

#character {
  float: right;
}

.sprite {
  background: url("http://res.cloudinary.com/treborx555/image/upload/v1472148365/spritesheet_2_oqummc.png");
  display: block;
  background-repeat: no-repeat;
}

.book-10 {
  width: 48px;
  height: 48px;
  background-position: 0 0;
}

.book-11 {
  width: 48px;
  height: 48px;
  background-position: -48px 0;
}

.book-1 {
  width: 48px;
  height: 48px;
  background-position: -96px 0;
}

.book-2 {
  width: 48px;
  height: 48px;
  background-position: -144px 0;
}

.book-3 {
  width: 48px;
  height: 48px;
  background-position: -192px 0;
}

.book-4 {
  width: 48px;
  height: 48px;
  background-position: -240px 0;
}

.book-5 {
  width: 48px;
  height: 48px;
  background-position: -288px 0;
}

.book-6 {
  width: 48px;
  height: 48px;
  background-position: -336px 0;
}

.book-7 {
  width: 48px;
  height: 48px;
  background-position: -384px 0;
}

.book-8 {
  width: 48px;
  height: 48px;
  background-position: -432px 0;
}

.book-9 {
  width: 48px;
  height: 48px;
  background-position: -480px 0;
}

.boot-10 {
  width: 48px;
  height: 48px;
  background-position: -528px 0;
}

.boot-1 {
  width: 48px;
  height: 48px;
  background-position: -576px 0;
}

.boot-2 {
  width: 48px;
  height: 48px;
  background-position: -624px 0;
}

.boot-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -48px;
}

.boot-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -48px;
}

.boot-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -48px;
}

.boot-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -48px;
}

.boot-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -48px;
}

.boot-8 {
  width: 48px;
  height: 48px;
  background-position: -240px -48px;
}

.boot-9 {
  width: 48px;
  height: 48px;
  background-position: -288px -48px;
}

.wrist-10 {
  width: 48px;
  height: 48px;
  background-position: -336px -48px;
}

.wrist-11 {
  width: 48px;
  height: 48px;
  background-position: -384px -48px;
}

.wrist-12 {
  width: 48px;
  height: 48px;
  background-position: -432px -48px;
}

.wrist-13 {
  width: 48px;
  height: 48px;
  background-position: -480px -48px;
}

.wrist-1 {
  width: 48px;
  height: 48px;
  background-position: -528px -48px;
}

.wrist-2 {
  width: 48px;
  height: 48px;
  background-position: -576px -48px;
}

.wrist-3 {
  width: 48px;
  height: 48px;
  background-position: -624px -48px;
}

.wrist-4 {
  width: 48px;
  height: 48px;
  background-position: 0 -96px;
}

.wrist-5 {
  width: 48px;
  height: 48px;
  background-position: -48px -96px;
}

.wrist-6 {
  width: 48px;
  height: 48px;
  background-position: -96px -96px;
}

.wrist-7 {
  width: 48px;
  height: 48px;
  background-position: -144px -96px;
}

.wrist-8 {
  width: 48px;
  height: 48px;
  background-position: -192px -96px;
}

.wrist-9 {
  width: 48px;
  height: 48px;
  background-position: -240px -96px;
}

.chest-10 {
  width: 48px;
  height: 48px;
  background-position: -288px -96px;
}

.chest-11 {
  width: 48px;
  height: 48px;
  background-position: -336px -96px;
}

.chest-12 {
  width: 48px;
  height: 48px;
  background-position: -384px -96px;
}

.chest-13 {
  width: 48px;
  height: 48px;
  background-position: -432px -96px;
}

.chest-14 {
  width: 48px;
  height: 48px;
  background-position: -480px -96px;
}

.chest-15 {
  width: 48px;
  height: 48px;
  background-position: -528px -96px;
}

.chest-16 {
  width: 48px;
  height: 48px;
  background-position: -576px -96px;
}

.chest-17 {
  width: 48px;
  height: 48px;
  background-position: -624px -96px;
}

.chest-1 {
  width: 48px;
  height: 48px;
  background-position: 0 -144px;
}

.chest-2 {
  width: 48px;
  height: 48px;
  background-position: -48px -144px;
}

.chest-3 {
  width: 48px;
  height: 48px;
  background-position: -96px -144px;
}

.chest-4 {
  width: 48px;
  height: 48px;
  background-position: -144px -144px;
}

.chest-5 {
  width: 48px;
  height: 48px;
  background-position: -192px -144px;
}

.chest-6 {
  width: 48px;
  height: 48px;
  background-position: -240px -144px;
}

.chest-7 {
  width: 48px;
  height: 48px;
  background-position: -288px -144px;
}

.chest-8 {
  width: 48px;
  height: 48px;
  background-position: -336px -144px;
}

.chest-9 {
  width: 48px;
  height: 48px;
  background-position: -384px -144px;
}

.glove-10 {
  width: 48px;
  height: 48px;
  background-position: -432px -144px;
}

.glove-11 {
  width: 48px;
  height: 48px;
  background-position: -480px -144px;
}

.glove-1 {
  width: 48px;
  height: 48px;
  background-position: -528px -144px;
}

.glove-2 {
  width: 48px;
  height: 48px;
  background-position: -576px -144px;
}

.glove-3 {
  width: 48px;
  height: 48px;
  background-position: -624px -144px;
}

.glove-4 {
  width: 48px;
  height: 48px;
  background-position: 0 -192px;
}

.glove-5 {
  width: 48px;
  height: 48px;
  background-position: -48px -192px;
}

.glove-6 {
  width: 48px;
  height: 48px;
  background-position: -96px -192px;
}

.glove-7 {
  width: 48px;
  height: 48px;
  background-position: -144px -192px;
}

.glove-8 {
  width: 48px;
  height: 48px;
  background-position: -192px -192px;
}

.glove-9 {
  width: 48px;
  height: 48px;
  background-position: -240px -192px;
}

.head-1 {
  width: 48px;
  height: 48px;
  background-position: -288px -192px;
}

.head-2 {
  width: 48px;
  height: 48px;
  background-position: -336px -192px;
}

.head-3 {
  width: 48px;
  height: 48px;
  background-position: -384px -192px;
}

.head-4 {
  width: 48px;
  height: 48px;
  background-position: -432px -192px;
}

.head-5 {
  width: 48px;
  height: 48px;
  background-position: -480px -192px;
}

.misc-10 {
  width: 48px;
  height: 48px;
  background-position: -528px -192px;
}

.misc-11 {
  width: 48px;
  height: 48px;
  background-position: -576px -192px;
}

.misc-12 {
  width: 48px;
  height: 48px;
  background-position: -624px -192px;
}

.misc-13 {
  width: 48px;
  height: 48px;
  background-position: 0 -240px;
}

.misc-14 {
  width: 48px;
  height: 48px;
  background-position: -48px -240px;
}

.misc-15 {
  width: 48px;
  height: 48px;
  background-position: -96px -240px;
}

.misc-16 {
  width: 48px;
  height: 48px;
  background-position: -144px -240px;
}

.misc-17 {
  width: 48px;
  height: 48px;
  background-position: -192px -240px;
}

.misc-18 {
  width: 48px;
  height: 48px;
  background-position: -240px -240px;
}

.misc-19 {
  width: 48px;
  height: 48px;
  background-position: -288px -240px;
}

.misc-1 {
  width: 48px;
  height: 48px;
  background-position: -336px -240px;
}

.misc-20 {
  width: 48px;
  height: 48px;
  background-position: -384px -240px;
}

.misc-21 {
  width: 48px;
  height: 48px;
  background-position: -432px -240px;
}

.misc-22 {
  width: 48px;
  height: 48px;
  background-position: -480px -240px;
}

.misc-2 {
  width: 48px;
  height: 48px;
  background-position: -528px -240px;
}

.misc-3 {
  width: 48px;
  height: 48px;
  background-position: -576px -240px;
}

.misc-4 {
  width: 48px;
  height: 48px;
  background-position: -624px -240px;
}

.misc-5 {
  width: 48px;
  height: 48px;
  background-position: 0 -288px;
}

.misc-6 {
  width: 48px;
  height: 48px;
  background-position: -48px -288px;
}

.misc-7 {
  width: 48px;
  height: 48px;
  background-position: -96px -288px;
}

.misc-8 {
  width: 48px;
  height: 48px;
  background-position: -144px -288px;
}

.misc-9 {
  width: 48px;
  height: 48px;
  background-position: -192px -288px;
}

.necklace-1 {
  width: 48px;
  height: 48px;
  background-position: -240px -288px;
}

.necklace-2 {
  width: 48px;
  height: 48px;
  background-position: -288px -288px;
}

.necklace-3 {
  width: 48px;
  height: 48px;
  background-position: -336px -288px;
}

.necklace-4 {
  width: 48px;
  height: 48px;
  background-position: -384px -288px;
}

.necklace-5 {
  width: 48px;
  height: 48px;
  background-position: -432px -288px;
}

.necklace-6 {
  width: 48px;
  height: 48px;
  background-position: -480px -288px;
}

.necklace-7 {
  width: 48px;
  height: 48px;
  background-position: -528px -288px;
}

.leg-1 {
  width: 48px;
  height: 48px;
  background-position: -576px -288px;
}

.leg-2 {
  width: 48px;
  height: 48px;
  background-position: -624px -288px;
}

.leg-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -336px;
}

.leg-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -336px;
}

.leg-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -336px;
}

.leg-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -336px;
}

.leg-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -336px;
}

.ring-10 {
  width: 48px;
  height: 48px;
  background-position: -240px -336px;
}

.ring-11 {
  width: 48px;
  height: 48px;
  background-position: -288px -336px;
}

.ring-1 {
  width: 48px;
  height: 48px;
  background-position: -336px -336px;
}

.ring-2 {
  width: 48px;
  height: 48px;
  background-position: -384px -336px;
}

.ring-3 {
  width: 48px;
  height: 48px;
  background-position: -432px -336px;
}

.ring-4 {
  width: 48px;
  height: 48px;
  background-position: -480px -336px;
}

.ring-5 {
  width: 48px;
  height: 48px;
  background-position: -528px -336px;
}

.ring-6 {
  width: 48px;
  height: 48px;
  background-position: -576px -336px;
}

.ring-7 {
  width: 48px;
  height: 48px;
  background-position: -624px -336px;
}

.ring-8 {
  width: 48px;
  height: 48px;
  background-position: 0 -384px;
}

.ring-9 {
  width: 48px;
  height: 48px;
  background-position: -48px -384px;
}

.shoulder-10 {
  width: 48px;
  height: 48px;
  background-position: -96px -384px;
}

.shoulder-1 {
  width: 48px;
  height: 48px;
  background-position: -144px -384px;
}

.shoulder-2 {
  width: 48px;
  height: 48px;
  background-position: -192px -384px;
}

.shoulder-3 {
  width: 48px;
  height: 48px;
  background-position: -240px -384px;
}

.shoulder-4 {
  width: 48px;
  height: 48px;
  background-position: -288px -384px;
}

.shoulder-5 {
  width: 48px;
  height: 48px;
  background-position: -336px -384px;
}

.shoulder-6 {
  width: 48px;
  height: 48px;
  background-position: -384px -384px;
}

.shoulder-7 {
  width: 48px;
  height: 48px;
  background-position: -432px -384px;
}

.shoulder-8 {
  width: 48px;
  height: 48px;
  background-position: -480px -384px;
}

.shoulder-9 {
  width: 48px;
  height: 48px;
  background-position: -528px -384px;
}

.talisman-10 {
  width: 48px;
  height: 48px;
  background-position: -576px -384px;
}

.talisman-11 {
  width: 48px;
  height: 48px;
  background-position: -624px -384px;
}

.talisman-12 {
  width: 48px;
  height: 48px;
  background-position: 0 -432px;
}

.talisman-13 {
  width: 48px;
  height: 48px;
  background-position: -48px -432px;
}

.talisman-14 {
  width: 48px;
  height: 48px;
  background-position: -96px -432px;
}

.talisman-15 {
  width: 48px;
  height: 48px;
  background-position: -144px -432px;
}

.talisman-16 {
  width: 48px;
  height: 48px;
  background-position: -192px -432px;
}

.talisman-17 {
  width: 48px;
  height: 48px;
  background-position: -240px -432px;
}

.talisman-18 {
  width: 48px;
  height: 48px;
  background-position: -288px -432px;
}

.talisman-19 {
  width: 48px;
  height: 48px;
  background-position: -336px -432px;
}

.talisman-1 {
  width: 48px;
  height: 48px;
  background-position: -384px -432px;
}

.talisman-20 {
  width: 48px;
  height: 48px;
  background-position: -432px -432px;
}

.talisman-21 {
  width: 48px;
  height: 48px;
  background-position: -480px -432px;
}

.talisman-22 {
  width: 48px;
  height: 48px;
  background-position: -528px -432px;
}

.talisman-23 {
  width: 48px;
  height: 48px;
  background-position: -576px -432px;
}

.talisman-2 {
  width: 48px;
  height: 48px;
  background-position: -624px -432px;
}

.talisman-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -480px;
}

.talisman-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -480px;
}

.talisman-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -480px;
}

.talisman-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -480px;
}

.talisman-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -480px;
}

.talisman-8 {
  width: 48px;
  height: 48px;
  background-position: -240px -480px;
}

.talisman-9 {
  width: 48px;
  height: 48px;
  background-position: -288px -480px;
}

.weapon-10 {
  width: 48px;
  height: 48px;
  background-position: -336px -480px;
}

.weapon-11 {
  width: 48px;
  height: 48px;
  background-position: -384px -480px;
}

.weapon-12 {
  width: 48px;
  height: 48px;
  background-position: -432px -480px;
}

.weapon-13 {
  width: 48px;
  height: 48px;
  background-position: -480px -480px;
}

.weapon-14 {
  width: 48px;
  height: 48px;
  background-position: -528px -480px;
}

.weapon-15 {
  width: 48px;
  height: 48px;
  background-position: -576px -480px;
}

.weapon-16 {
  width: 48px;
  height: 48px;
  background-position: -624px -480px;
}

.weapon-17 {
  width: 48px;
  height: 48px;
  background-position: 0 -528px;
}

.weapon-18 {
  width: 48px;
  height: 48px;
  background-position: -48px -528px;
}

.weapon-19 {
  width: 48px;
  height: 48px;
  background-position: -96px -528px;
}

.weapon-1 {
  width: 48px;
  height: 48px;
  background-position: -144px -528px;
}

.weapon-20 {
  width: 48px;
  height: 48px;
  background-position: -192px -528px;
}

.weapon-21 {
  width: 48px;
  height: 48px;
  background-position: -240px -528px;
}

.weapon-22 {
  width: 48px;
  height: 48px;
  background-position: -288px -528px;
}

.weapon-23 {
  width: 48px;
  height: 48px;
  background-position: -336px -528px;
}

.weapon-24 {
  width: 48px;
  height: 48px;
  background-position: -384px -528px;
}

.weapon-25 {
  width: 48px;
  height: 48px;
  background-position: -432px -528px;
}

.weapon-26 {
  width: 48px;
  height: 48px;
  background-position: -480px -528px;
}

.weapon-27 {
  width: 48px;
  height: 48px;
  background-position: -528px -528px;
}

.weapon-28 {
  width: 48px;
  height: 48px;
  background-position: -576px -528px;
}

.weapon-29 {
  width: 48px;
  height: 48px;
  background-position: -624px -528px;
}

.weapon-2 {
  width: 48px;
  height: 48px;
  background-position: 0 -576px;
}

.weapon-30 {
  width: 48px;
  height: 48px;
  background-position: -48px -576px;
}

.weapon-31 {
  width: 48px;
  height: 48px;
  background-position: -96px -576px;
}

.weapon-32 {
  width: 48px;
  height: 48px;
  background-position: -144px -576px;
}

.weapon-33 {
  width: 48px;
  height: 48px;
  background-position: -192px -576px;
}

.weapon-34 {
  width: 48px;
  height: 48px;
  background-position: -240px -576px;
}

.weapon-35 {
  width: 48px;
  height: 48px;
  background-position: -288px -576px;
}

.weapon-36 {
  width: 48px;
  height: 48px;
  background-position: -336px -576px;
}

.weapon-37 {
  width: 48px;
  height: 48px;
  background-position: -384px -576px;
}

.weapon-38 {
  width: 48px;
  height: 48px;
  background-position: -432px -576px;
}

.weapon-39 {
  width: 48px;
  height: 48px;
  background-position: -480px -576px;
}

.weapon-3 {
  width: 48px;
  height: 48px;
  background-position: -528px -576px;
}

.weapon-40 {
  width: 48px;
  height: 48px;
  background-position: -576px -576px;
}

.weapon-41 {
  width: 48px;
  height: 48px;
  background-position: -624px -576px;
}

.weapon-42 {
  width: 48px;
  height: 48px;
  background-position: 0 -624px;
}

.weapon-43 {
  width: 48px;
  height: 48px;
  background-position: -48px -624px;
}

.weapon-44 {
  width: 48px;
  height: 48px;
  background-position: -96px -624px;
}

.weapon-45 {
  width: 48px;
  height: 48px;
  background-position: -144px -624px;
}

.weapon-46 {
  width: 48px;
  height: 48px;
  background-position: -192px -624px;
}

.weapon-47 {
  width: 48px;
  height: 48px;
  background-position: -240px -624px;
}

.weapon-48 {
  width: 48px;
  height: 48px;
  background-position: -288px -624px;
}

.weapon-49 {
  width: 48px;
  height: 48px;
  background-position: -336px -624px;
}

.weapon-4 {
  width: 48px;
  height: 48px;
  background-position: -384px -624px;
}

.weapon-50 {
  width: 48px;
  height: 48px;
  background-position: -432px -624px;
}

.weapon-51 {
  width: 48px;
  height: 48px;
  background-position: -480px -624px;
}

.weapon-52 {
  width: 48px;
  height: 48px;
  background-position: -528px -624px;
}

.weapon-53 {
  width: 48px;
  height: 48px;
  background-position: -576px -624px;
}

.weapon-54 {
  width: 48px;
  height: 48px;
  background-position: -624px -624px;
}

.weapon-55 {
  width: 48px;
  height: 48px;
  background-position: -672px 0;
}

.weapon-56 {
  width: 48px;
  height: 48px;
  background-position: -672px -48px;
}

.weapon-5 {
  width: 48px;
  height: 48px;
  background-position: -672px -96px;
}

.weapon-6 {
  width: 48px;
  height: 48px;
  background-position: -672px -144px;
}

.weapon-7 {
  width: 48px;
  height: 48px;
  background-position: -672px -192px;
}

.weapon-8 {
  width: 48px;
  height: 48px;
  background-position: -672px -240px;
}

.weapon-9 {
  width: 48px;
  height: 48px;
  background-position: -672px -288px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />