HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id="all">
<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="playerstats">
<table id="stattable">
<tr>
<td class="statsprite -health"></td>
<td class="statnum"><p id="health"></p></td>
<td class="statnum"><p id="ice"></p></td>
<td class="statsprite -ice"></td>
</tr>
<tr>
<td class="statsprite -mana"></td>
<td class="statnum"><p id="mana"></p></td>
<td class="statnum"><p id="fire"></p></td>
<td class="statsprite -fire"></td>
</tr>
<tr>
<td class="statsprite -damage"></td>
<td class="statnum"><p id="damage"></p></td>
<td class="statnum"><p id="storm"></p></td>
<td class="statsprite -storm"></td>
</tr>
<tr>
<td class="statsprite -dodge"></td>
<td class="statnum"><p id="dodge"></p></td>
<td class="statnum"><p id="shadow"></p></td>
<td class="statsprite -shadow"></td>
</tr>
<tr>
<td class="statsprite -critical"></td>
<td class="statnum"><p id="critical"></p></td>
<td class="statnum"><p id="nature"></p></td>
<td class="statsprite -nature"></td>
</tr>
<tr>
<td class="statsprite -magicpow"></td>
<td class="statnum"><p id="magicpow"></p></td>
<td class="statnum"><p id="blood"></p></td>
<td class="statsprite -blood"></td>
</tr>
<tr>
<td class="statsprite -healpow"></td>
<td class="statnum"><p id="healpow"></p></td>
<td class="statnum"><p id="lifesteal"></p></td>
<td class="statsprite -lifesteal"></td>
</tr>
</table>
</div>
</div>
<div class="col-xs-6 col-xs-pull-1">
<div id="screen">
<div id="battle">
<div id="totalbosshpbar">
<div id="bosshpbar"></div>
</div>
<div class="col-xs-2" id="leftinfo"></div>
<div style="text-align: right;" class="col-xs-2" id="rightinfo"></div>
<p id="bosshptext" class="text-center">Boss Health</p>
<p id="bosslevel">LVL</p>
<div id="boss"><img id="currentboss" class="mobsprites boss3"></img></div>
<div class="" id="totalplayerhpbar"><div id="playerhpbar"></div></div>
<div class="" id="totalplayermanabar"><div id="playermanabar"></div></div>
</div>
<div class="col-xs-6 col-xs-pull-1" id="box">
<div id="boxy">
<div id="buttonwrapper">
<div class="col-xs-4" id="bosslevelminus"><button id="minus" class="btn btn-block btn-warning">Boss Level Decrease</button></div>
<div class="col-xs-4" id="fightbuttondiv"><button id="fightbutton" class="btn btn-block btn-success">FIGHT BOSS!</button></div>
<div class="col-xs-4" id="bosslevelplus"><button id="plus" class="btn btn-block btn-warning">Boss Level Increase</button></div>
</div>
<div id="summonbuttons">
<div class="col-xs-4" id="summonslower"><button id="minus" class="btn btn-block btn-warning">Slower Boss spawn</button></div>
<div class="col-xs-4" id="summonsdiv"><button id="summons" class="btn btn-block btn-success">1 spawn per: 1 minute</button></div>
<div class="col-xs-4" id="summonfaster"><button id="plus" class="btn btn-block btn-warning">Faster Boss spawn</button></div>
</div>
<div id="textstats">
<p id="gold">Gold</p>
<p id="level"> Level </p>
<p id="bosssummons">Boss Summons:</p>
</div>
<div id="sellalldiv" class="col-xs-12"><button id="sellall" class="btn btn-block btn-danger">Sell all inventory!</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="text-center" id="info">
</div>
<div class="text-center" id="upgradeinfo"></div>
<div id="powerleveldiv"> <p class="text-center" id="powerlevel"></p></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"><img id="manualauto"></img></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"><img id="autobasic"></img></td>
</tr>
</table>
</div>
</div>
<div id="spells">
<table id="spellslots">
<tr>
<td class="spellslot inventory "><p class="barnum">1</p><div id="bar1"class="">
<img class="spellsprite spell1 -basic" id="basic"></img></div></td>
<td class="spellslot inventory "><p class="barnum">2</p><div id="bar2"class="spellbar">
<img class="spellsprite spell2 -ice-1" id="icebolt"></img></div></td>
<td class="spellslot inventory "><p class="barnum">3</p><div id="bar3"class="spellbar">
<img class="spellsprite spell3 -fire-3" id="firebolt"></img></div></td>
<td class="spellslot inventory "><p class="barnum">4</p><div id="bar4"class="spellbar">
<img class="spellsprite spell4 -lightning-2" id="stormbolt"></img></div></td>
<td class="spellslot inventory "><p class="barnum">5</p><div id="bar5"class="spellbar">
<img class="spellsprite spell5 -nature-4" id="thorns"></img></div></td>
<td class="spellslot inventory "><p class="barnum">6</p><div id="bar6"class="spellbar">
<img class="spellsprite spell6 -shadow-1" id="shadowbolt"></img></div></td>
<td class="spellslot inventory "><p class="barnum">7</p><div id="bar7"class="spellbar">
<img class="spellsprite spell7 -blood-2" id="bloodstrike"></img></div></td>
<td class="spellslot inventory "><p class="barnum">8</p><div id="bar8"class="spellbar">
<img class="spellsprite spell8 -heal-2" id="heal"></img></div></td>
<td class="spellslot inventory "><p class="barnum">9</p><div id="bar9"class="spellbar">
<img class="spellsprite spell9 -defend-3" id="shield"></img></div></td>
<td class="spellslot inventory "><p class="barnum">10</p><div id="bar10"class="spellbar">
<img class="spellsprite spell10 -defend-6" id="defenseheal"></img></div></td>
<td class="spellslot inventory "><p class="barnum">11</p><div id="bar11"class="spellbar">
<img class="spellsprite spell11 -support-2" id="manarestore"></img></div></td>
<td class="spellslot inventory "><p class="barnum">12</p><div id="bar12"class="spellbar">
<img class="spellsprite spell12 -shadow-3" id="buffmagic"></img></div></td>
</tr>
<tr>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar13"class="">
<img class="spellsprite -support-4" id="magebuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar14"class="spellbar">
<img class="spellsprite -ice-3" id="icebuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar15"class="spellbar">
<img class="spellsprite -fire-5" id="firebuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar16"class="spellbar">
<img class="spellsprite -lightning-6" id="stormbuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar17"class="spellbar">
<img class="spellsprite -nature-2" id="natureheal"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar18"class="spellbar">
<img class="spellsprite -shadow-2" id="shadowbuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar19"class="spellbar">
<img class="spellsprite -blood-3" id="bloodsap"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar20"class="spellbar">
<img class="spellsprite -heal-3" id="healwings"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar21"class="spellbar">
<img class="spellsprite -defend-5" id="helmet"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar22"class="spellbar">
<img class="spellsprite -blood-6" id="attackbuff"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar22"class="spellbar">
<img class="spellsprite -support-5" id="lotus"></img></div></td>
<td class="spellslot inventory "><p class="barnum"></p><div id="bar24"class="spellbar">
<img class="spellsprite -support-6" id="magicattack"></img></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="showdiv">
<button class="btn btn-block btn-success" id="equip">Equip</button>
<button class="btn btn-block btn-info" id="upgrade">Upgrade!</button>
<button class="btn btn-block btn-warning" id="sell">Sell</button>
</div>
<div id="showdiv1">
<button class="btn btn-block btn-success" id="unequip">Unequip</button>
<button class="btn btn-block btn-info" id="upgradeitemonchar">Upgrade!</button>
</div>
<div id="desc">
<table>
<tr>
<td id="spellicon"class="infospells -basicX"></td>
<td class="spelldesc"><p>Basic attack, Damage comes only from Damage and is the only attack with lifesteal!</td>
</tr>
<tr>
<td id="spellicon"class="infospells -ice-1X"></td>
<td class="spelldesc"><p>Icebolt, gets Damage from: Damage, MagicPow and IceDMG.</td>
</tr>
<tr>
<td id="spellicon"class="infospells -fire-3X"></td>
<td class="spelldesc"><p>Firebolt, gets Damage from Damage, MagicPow and FireDMG.</p></td>
</tr>
<tr>
<td id="spellicon"class="infospells -lightning-2X "></td>
<td class="spelldesc"><p>Stormbolt, gets Damage from Damage, MagicPow and StormDMG</p></td>
</tr>
<td id="spellicon"class="infospells -nature-4X"></td>
<td class="spelldesc"><p>Thorns,poison attack, gets Damage from Damage, MagicPow and NatureDMG</p></td>
</tr>
<td id="spellicon"class="infospells -shadow-1X"></td>
<td class="spelldesc"><p>Shadowbolt-delayed nuke,gets Damage from Damage, MagicPow and ShadowDMG</p></td>
</tr>
<td id="spellicon"class="infospells -blood-2X "></td>
<td class="spelldesc"><p>Bloodstrike,sacrifice 50% current health for a lot of Damage, gets Damage from Damage, total HP and BloodDMG</p></td>
</tr>
<td id="spellicon"class="infospells -heal-2X"></td>
<td class="spelldesc"><p>Instant Heal, HealPow increases the healing.</p></td>
</tr>
<td id="spellicon"class="infospells -defend-3X"></td>
<td class="spelldesc"><p>Shield, your dodge chance increases past 100% for a short time.</p></td>
</tr>
<td id="spellicon"class="infospells -support-2X"></td>
<td class="spelldesc"><p>Mana Restore, restores mana based on HealPow.</p></td>
</tr>
<td id="spellicon"class="infospells -nature-2X"></td>
<td class="spelldesc"><p>Nature Heal, 3 tiny consecutive heals based on NatureDMG.</p></td>
</tr>
<td id="spellicon"class="infospells -shadow-3X"></td>
<td class="spelldesc"><p>Magic Buff, buffs magic based on MagicPow.</p></td>
</tr>
</tr>
</table>
</div>
</div>
</div>
html {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#centerinfo{
overflow-y: scroll;
}
#statnum {
margin-left: 20px;
margin-top: 5px;
}
.danger{
color:red;
}
#sellalldiv{
padding-top:2px;
margin:0 auto;
margin-top:10px;
}
#sellall{
margin:0 auto;
width:300px;
}
#textstats{
position:absolute;
margin-top:20px;
margin-left:10px;
}
#upgradeinfo{
position:absolute;
width:210px;
height:160px;
margin-left:90px;
margin-top:200px;
padding:10px;
float:left;
}
#buttonwrapper{
margin:0 auto;
width:566px;
padding:5px;
}
#summonbuttons{
margin:0 auto;
width:556px;
margin-top:35px;
}
#bosslevel{
position:absolute;
margin-left:405px;
margin-top:167px;
}
.ui-effects-wrapper {
display:inline;
position:absolute;
}
#desc{
position:absolute;
display:none;
border: 2px solid #333;
}
.spelldesc{
padding-left:10px;
background-color:#24303E;
}
.Common {
border-color: #ffffff;
color: #ffffff;
}
.Magic {
border-color: #1eff00;
color: #1eff00;
}
.Rare {
border-color: #0070dd;
color: #0070dd;
}
.Epic {
border-color: #a335ee;
color: #a335ee;
}
.Legendary {
border-color: #ff8000;
color: #ff8000;
}
.barnum {
position: absolute;
}
.selected {
outline: 5px solid green;
}
#showdiv1 {
border: solid 5px #222;
width: 100px;
height: auto;
position: absolute;
background-color: #24303E;
display: none;
}
#playerstats {
padding: 5px;
width: 222px;
height: 222px;
background-color: #24303E;
border: 0px solid #333;
}
#stattable {
border: 0px solid #333;
background-color: #24303E;
}
#fire, #ice, #storm, #nature, #shadow, #blood, #lifesteal {
float: right;
padding-right: 5px;
}
#health, #mana, #critical, #dodge, #damage, #healpow, #magicpow {
float: left;
padding-left: 5px;
}
#spelldesc{
display:none;
position: absolute;
width:1000px;
height:600px;
background-color:#24303E;
border: 0px solid #333;
}
.statnum {
width: 90px;
height: 30px;
}
.characterslot {
border-width: 1px;
border-style: solid;
border-color: #BF942C;
width: 53px;
height: 53px;
background-color: #8F5D38;
display: fixed;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
background-size: 53px;
}
#autobasic{
width:48px;
height:48px;
background:url("https://res.cloudinary.com/treborx555/image/upload/v1472805367/autobasic_tfoxw3.png");
}
#manualauto{
width:48px;
height:48px;
background:url("https://res.cloudinary.com/treborx555/image/upload/v1472807538/mailed-fist_1_bjsu5v.png");
}
#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: 163px;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472066255/texture_xhoaxc.png");
border: 10px solid #333;
margin-left: 46px;
margin-top:125px;
padding-top:5px;
}
#box {
margin-top: 5px;
width: 100%;
height: 150px;
}
#screen {
width: 865px;
height: 300px;
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: #8F5D38;
display: fixed;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
background-size: 53px;
}
.statslot {
border-width: 1px;
border-style: solid;
border-color: #BF942C;
width: 30px;
height: 30px;
background-color: #8F5D38;
display: fixed;
}
.spellslot {
border: 3px solid #333;
border-right:10px solid ;
background-color: #24303E;
width: 60px;
height: 60px;
float:left;
}
.fire{
color:orange;
}
.blood{
color:red;
}
.ice{
color:blue;
}
.storm{
color:yellow;
}
.nature{
color:green;
}
.dodge{
color:green;
}
.fire{
color:orange;
}
.BloodDMG{
color:red;
}
.IceDMG{
color:blue;
}
.StormDMG{
color:yellow;
}
.NatureDMG{
color:green;
}
.ShadowDMG{
color:purple;
}
.FireDMG{
color:orange;
}
.MagicPow{
color:pink;
}
.HealPow{
color:yellow;
}
#spells{
background-color:#24303E;
border-left:10px solid #333;
border-right:10px solid #333;
top:310px;
width:865px;
margin-left:239px;
height:auto;
position:absolute;
}
#spellslots{
margin: 0 auto;
}
#infodiv{
position:absolute;
left:822px;
top:-305px;
}
.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:transparent;
width: 100%;
height: 100vh;
max-height: 765px;
max-width: 1366px;
margin: 0 auto;
}
html{
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472724902/photo-1457903685934-249e8108a246_v8ugfn.jpg");
background-size: 100vw 100vh;
}
#powerleveldiv{
position:absolute;
margin-top:350px;
margin-left:90px;
width:210px;
height:50px;
}
table {
background-color: #333;
border: 10px solid #333;
}
#battle {
width: 100%;
height: 300px;
}
#boss {
margin: 0 auto;
height: 150px;
width: 125px;
outline: 0px solid white;
border: 5px solid #24303E;
background-color: #24303E;
margin-top: 20px;
margin-bottom:35px;
}
#bosshptext{
padding-top:10px;
}
#bosshpbar {
width: 100%;
height: 30px;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/red_ukpo3h.jpg");
float: left;
}
#totalbosshpbar {
width: 845px;
height: 30px;
background-color: black;
outline: 4px solid darkred;
}
#totalplayerhpbar {
width: 845px;
height: 20px;
background-color: black;
}
#totalplayermanabar {
width: 845px;
height: 20px;
background-color: black;
}
#playermanabar {
width: 100%;
height: 20px;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/dblue168_zjpw0l.jpg");
background-size:150px;
border:5px solid #333;
top:0;
}
#playerhpbar {
width: 100%;
height: 20px;
background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/red_ukpo3h.jpg");
background-size:150px;
border:5px solid #333;
}
#leftinfo{
height:180px;
width:300px;
border:5px solid #333;
overflow-y:scroll;
margin-top:15px;
float:left;
}
::-webkit-scrollbar {
display: none;
}
#rightinfo{
height:180px;
width:300px;
border:5px solid #333;
overflow-y:scroll;
float:right;
margin-top:15px;
text-align:right;
}
.oncooldown {
opacity: 0.1;
}
#spellchild {
margin: 0 auto;
border: solid 2px #BF942C;
}
#character {
position:absolute;
margin-top:380px;
margin-left:83px;
width:220px;
}
.sprite {
background: url("https://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;
}
/* SPELL SPRITES NOW */
.spellsprite {
background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472247353/spritesheet_ne1oxv.png");
background-repeat: no-repeat;
display: block;
}
.-basic {
width: 60px;
height: 60px;
background-position: 0 0;
}
.-blood-1 {
width: 60px;
height: 60px;
background-position: -60px 0;
}
.-blood-2 {
width: 60px;
height: 60px;
background-position: -120px 0;
}
.-blood-3 {
width: 60px;
height: 60px;
background-position: -180px 0;
}
.-blood-4 {
width: 60px;
height: 60px;
background-position: -240px 0;
}
.-blood-5 {
width: 60px;
height: 60px;
background-position: -300px 0;
}
.-blood-6 {
width: 60px;
height: 60px;
background-position: -360px 0;
}
.-defend-1 {
width: 60px;
height: 60px;
background-position: 0 -60px;
}
.-defend-2 {
width: 60px;
height: 60px;
background-position: -60px -60px;
}
.-defend-3 {
width: 60px;
height: 60px;
background-position: -120px -60px;
}
.-defend-4 {
width: 60px;
height: 60px;
background-position: -180px -60px;
}
.-defend-5 {
width: 60px;
height: 60px;
background-position: -240px -60px;
}
.-defend-6 {
width: 60px;
height: 60px;
background-position: -300px -60px;
}
.-fire-1 {
width: 60px;
height: 60px;
background-position: -360px -60px;
}
.-fire-2 {
width: 60px;
height: 60px;
background-position: 0 -120px;
}
.-fire-3 {
width: 60px;
height: 60px;
background-position: -60px -120px;
}
.-fire-4 {
width: 60px;
height: 60px;
background-position: -120px -120px;
}
.-fire-5 {
width: 60px;
height: 60px;
background-position: -180px -120px;
}
.-fire-6 {
width: 60px;
height: 60px;
background-position: -240px -120px;
}
.-heal-1 {
width: 60px;
height: 60px;
background-position: -300px -120px;
}
.-heal-2 {
width: 60px;
height: 60px;
background-position: -360px -120px;
}
.-heal-3 {
width: 60px;
height: 60px;
background-position: 0 -180px;
}
.-heal-4 {
width: 60px;
height: 60px;
background-position: -60px -180px;
}
.-heal-5 {
width: 60px;
height: 60px;
background-position: -120px -180px;
}
.-heal-6 {
width: 60px;
height: 60px;
background-position: -180px -180px;
}
.-ice-1 {
width: 60px;
height: 60px;
background-position: -240px -180px;
}
.-ice-2 {
width: 60px;
height: 60px;
background-position: -300px -180px;
}
.-ice-3 {
width: 60px;
height: 60px;
background-position: -360px -180px;
}
.-ice-4 {
width: 60px;
height: 60px;
background-position: 0 -240px;
}
.-ice-5 {
width: 60px;
height: 60px;
background-position: -60px -240px;
}
.-ice-6 {
width: 60px;
height: 60px;
background-position: -120px -240px;
}
.-lightning-1 {
width: 60px;
height: 60px;
background-position: -180px -240px;
}
.-lightning-2 {
width: 60px;
height: 60px;
background-position: -240px -240px;
}
.-lightning-3 {
width: 60px;
height: 60px;
background-position: -300px -240px;
}
.-lightning-4 {
width: 60px;
height: 60px;
background-position: -360px -240px;
}
.-lightning-5 {
width: 60px;
height: 60px;
background-position: 0 -300px;
}
.-lightning-6 {
width: 60px;
height: 60px;
background-position: -60px -300px;
}
.-nature-1 {
width: 60px;
height: 60px;
background-position: -120px -300px;
}
.-nature-2 {
width: 60px;
height: 60px;
background-position: -180px -300px;
}
.-nature-3 {
width: 60px;
height: 60px;
background-position: -240px -300px;
}
.-nature-4 {
width: 60px;
height: 60px;
background-position: -300px -300px;
}
.-nature-5 {
width: 60px;
height: 60px;
background-position: -360px -300px;
}
.-nature-6 {
width: 60px;
height: 60px;
background-position: 0 -360px;
}
.-shadow-1 {
width: 60px;
height: 60px;
background-position: -60px -360px;
}
.-shadow-2 {
width: 60px;
height: 60px;
background-position: -120px -360px;
}
.-shadow-3 {
width: 60px;
height: 60px;
background-position: -180px -360px;
}
.-shadow-4 {
width: 60px;
height: 60px;
background-position: -240px -360px;
}
.-shadow-5 {
width: 60px;
height: 60px;
background-position: -300px -360px;
}
.-shadow-6 {
width: 60px;
height: 60px;
background-position: -360px -360px;
}
.-support-1 {
width: 60px;
height: 60px;
background-position: -420px 0;
}
.-support-2 {
width: 60px;
height: 60px;
background-position: -420px -60px;
}
.-support-3 {
width: 60px;
height: 60px;
background-position: -420px -120px;
}
.-support-4 {
width: 60px;
height: 60px;
background-position: -420px -180px;
}
.-support-5 {
width: 60px;
height: 60px;
background-position: -420px -240px;
}
.-support-6 {
width: 60px;
height: 60px;
background-position: -420px -300px;
}
.statsprite{
background:url("https://res.cloudinary.com/treborx555/image/upload/v1472414022/spritesheet_9_vyyt5q.png");
background-repeat: no-repeat;
display: block;
}
.-blood {
width: 30px;
height: 30px;
background-position: 0 0;
}
.-critical {
width: 30px;
height: 30px;
background-position: -30px 0;
}
.-damage {
width: 30px;
height: 30px;
background-position: -60px 0;
}
.-dodge {
width: 30px;
height: 30px;
background-position: 0 -30px;
}
.-fire {
width: 30px;
height: 30px;
background-position: -30px -30px;
}
.-healpow {
width: 30px;
height: 30px;
background-position: -60px -30px;
}
.-health {
width: 30px;
height: 30px;
background-position: 0 -60px;
}
.-ice {
width: 30px;
height: 30px;
background-position: -30px -60px;
}
.-lifesteal {
width: 30px;
height: 30px;
background-position: -60px -60px;
}
.-magicpow {
width: 30px;
height: 30px;
background-position: -90px 0;
}
.-mana {
width: 30px;
height: 30px;
background-position: -90px -30px;
}
.-nature {
width: 30px;
height: 30px;
background-position: -90px -60px;
}
.-shadow {
width: 30px;
height: 30px;
background-position: 0 -90px;
}
.-storm {
width: 30px;
height: 30px;
background-position: -30px -90px;
}
.mobsprites {
background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472288881/spritesheet_7_guocsq.png");
background-repeat: no-repeat;
display: block;
}
.boss10 {
width: 125px;
height: 150px;
background-position: 0 0;
}
.boss11 {
width: 125px;
height: 150px;
background-position: -125px 0;
}
.boss12 {
width: 125px;
height: 150px;
background-position: -250px 0;
}
.boss13 {
width: 125px;
height: 150px;
background-position: 0 -150px;
}
.boss1 {
width: 125px;
height: 150px;
background-position: -125px -150px;
}
.boss2 {
width: 125px;
height: 150px;
background-position: -250px -150px;
}
.boss3 {
width: 125px;
height: 150px;
background-position: 0 -300px;
}
.boss4 {
width: 125px;
height: 150px;
background-position: -125px -300px;
}
.boss5 {
width: 125px;
height: 150px;
background-position: -250px -300px;
}
.boss6 {
width: 125px;
height: 150px;
background-position: -375px 0;
}
.boss7 {
width: 125px;
height: 150px;
background-position: -375px -150px;
}
.boss8 {
width: 125px;
height: 150px;
background-position: -375px -300px;
}
.boss9 {
width: 125px;
height: 150px;
background-position: 0 -450px;
}
.tinyspellsprites {
background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472327630/spritesheet_8_igvtbg.png");
background-repeat: no-repeat;
display: block;
}
.basic {
width: 30px;
height: 30px;
background-position: 0 0;
}
.blood-1 {
width: 30px;
height: 30px;
background-position: -30px 0;
}
.blood-2 {
width: 30px;
height: 30px;
background-position: -60px 0;
}
.blood-3 {
width: 30px;
height: 30px;
background-position: -90px 0;
}
.blood-4 {
width: 30px;
height: 30px;
background-position: -120px 0;
}
.blood-5 {
width: 30px;
height: 30px;
background-position: -150px 0;
}
.blood-6 {
width: 30px;
height: 30px;
background-position: -180px 0;
}
.defend-1 {
width: 30px;
height: 30px;
background-position: 0 -30px;
}
.defend-2 {
width: 30px;
height: 30px;
background-position: -30px -30px;
}
.defend-3 {
width: 30px;
height: 30px;
background-position: -60px -30px;
}
.defend-4 {
width: 30px;
height: 30px;
background-position: -90px -30px;
}
.defend-5 {
width: 30px;
height: 30px;
background-position: -120px -30px;
}
.defend-6 {
width: 30px;
height: 30px;
background-position: -150px -30px;
}
.fire-1 {
width: 30px;
height: 30px;
background-position: -180px -30px;
}
.fire-2 {
width: 30px;
height: 30px;
background-position: 0 -60px;
}
.fire-3 {
width: 30px;
height: 30px;
background-position: -30px -60px;
}
.fire-4 {
width: 30px;
height: 30px;
background-position: -60px -60px;
}
.fire-5 {
width: 30px;
height: 30px;
background-position: -90px -60px;
}
.fire-6 {
width: 30px;
height: 30px;
background-position: -120px -60px;
}
.heal-1 {
width: 30px;
height: 30px;
background-position: -150px -60px;
}
.heal-2 {
width: 30px;
height: 30px;
background-position: -180px -60px;
}
.heal-3 {
width: 30px;
height: 30px;
background-position: 0 -90px;
}
.heal-4 {
width: 30px;
height: 30px;
background-position: -30px -90px;
}
.heal-5 {
width: 30px;
height: 30px;
background-position: -60px -90px;
}
.heal-6 {
width: 30px;
height: 30px;
background-position: -90px -90px;
}
.ice-1 {
width: 30px;
height: 30px;
background-position: -120px -90px;
}
.ice-2 {
width: 30px;
height: 30px;
background-position: -150px -90px;
}
.ice-3 {
width: 30px;
height: 30px;
background-position: -180px -90px;
}
.ice-4 {
width: 30px;
height: 30px;
background-position: 0 -120px;
}
.ice-5 {
width: 30px;
height: 30px;
background-position: -30px -120px;
}
.ice-6 {
width: 30px;
height: 30px;
background-position: -60px -120px;
}
.storm-1 {
width: 30px;
height: 30px;
background-position: -90px -120px;
}
.storm-2 {
width: 30px;
height: 30px;
background-position: -120px -120px;
}
.storm-3 {
width: 30px;
height: 30px;
background-position: -150px -120px;
}
.storm-4 {
width: 30px;
height: 30px;
background-position: -180px -120px;
}
.storm-5 {
width: 30px;
height: 30px;
background-position: 0 -150px;
}
.storm-6 {
width: 30px;
height: 30px;
background-position: -30px -150px;
}
.nature-1 {
width: 30px;
height: 30px;
background-position: -60px -150px;
}
.nature-2 {
width: 30px;
height: 30px;
background-position: -90px -150px;
}
.nature-3 {
width: 30px;
height: 30px;
background-position: -120px -150px;
}
.nature-4 {
width: 30px;
height: 30px;
background-position: -150px -150px;
}
.nature-5 {
width: 30px;
height: 30px;
background-position: -180px -150px;
}
.nature-6 {
width: 30px;
height: 30px;
background-position: 0 -180px;
}
.shadow-1 {
width: 30px;
height: 30px;
background-position: -30px -180px;
}
.shadow-2 {
width: 30px;
height: 30px;
background-position: -60px -180px;
}
.shadow-3 {
width: 30px;
height: 30px;
background-position: -90px -180px;
}
.shadow-4 {
width: 30px;
height: 30px;
background-position: -120px -180px;
}
.shadow-5 {
width: 30px;
height: 30px;
background-position: -150px -180px;
}
.shadow-6 {
width: 30px;
height: 30px;
background-position: -180px -180px;
}
.support-1 {
width: 30px;
height: 30px;
background-position: -210px 0;
}
.support-2 {
width: 30px;
height: 30px;
background-position: -210px -30px;
}
.support-3 {
width: 30px;
height: 30px;
background-position: -210px -60px;
}
.support-4 {
width: 30px;
height: 30px;
background-position: -210px -90px;
}
.support-5 {
width: 30px;
height: 30px;
background-position: -210px -120px;
}
.support-6 {
width: 30px;
height: 30px;
background-position: -210px -150px;
}
.infospells{
background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472455892/spritesheet_10_mgjpmb.png");
background-repeat: no-repeat;
display: block;
}
.-basicX {
width: 30px;
height: 30px;
background-position: 0 0;
}
.-blood-2X {
width: 30px;
height: 30px;
background-position: -30px 0;
}
.-blood-3X {
width: 30px;
height: 30px;
background-position: -60px 0;
}
.-defend-3X {
width: 30px;
height: 30px;
background-position: 0 -30px;
}
.-fire-3X {
width: 30px;
height: 30px;
background-position: -30px -30px;
}
.-heal-2X {
width: 30px;
height: 30px;
background-position: -60px -30px;
}
.-ice-1X {
width: 30px;
height: 30px;
background-position: 0 -60px;
}
.-lightning-2X {
width: 30px;
height: 30px;
background-position: -30px -60px;
}
.-nature-2X {
width: 30px;
height: 30px;
background-position: -60px -60px;
}
.-nature-4X {
width: 30px;
height: 30px;
background-position: -90px 0;
}
.-shadow-1X {
width: 30px;
height: 30px;
background-position: -90px -30px;
}
.-shadow-3X {
width: 30px;
height: 30px;
background-position: -90px -60px;
}
.-support-2X {
width: 30px;
height: 30px;
background-position: 0 -90px;
}
@media screen and (max-width: 1360px) {
body {
-moz-transform: scale(0.9, 0.9); /* Moz-browsers */
zoom: 0.9; /* Other non-webkit browsers */
zoom: 90%; /* Webkit browsers */
}
}
@media screen and (max-width: 1230px) {
body {
-moz-transform: scale(0.8, 0.8); /* Moz-browsers */
zoom: 0.8; /* Other non-webkit browsers */
zoom: 80%; /* Webkit browsers */
}
}
@media screen and (max-width: 1155px) {
body {
-moz-transform: scale(0.7, 0.7); /* Moz-browsers */
zoom: 0.7; /* Other non-webkit browsers */
zoom: 70%; /* Webkit browsers */
}
}
@media screen and (max-width: 1050px) {
body {
-moz-transform: scale(0.6, 0.6); /* Moz-browsers */
zoom: 0.6; /* Other non-webkit browsers */
zoom: 60%; /* Webkit browsers */
}
}
@media screen and (max-width: 950px) {
body {
-moz-transform: scale(0.55, 0.55); /* Moz-browsers */
zoom: 0.55; /* Other non-webkit browsers */
zoom: 55%; /* Webkit browsers */
}
}
@media screen and (max-width: 850px) {
body {
-moz-transform: scale(0.45, 0.45); /* Moz-browsers */
zoom: 0.45; /* Other non-webkit browsers */
zoom: 45%; /* Webkit browsers */
}
}
$(document).ready(function() {
var player = {
level: 1,
gold: 0,
experience: 0,
summons: 30,
summonbosscounter: 0,
summoninterval: 10000,
bosslevel: 1,
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,
totalLifesteal: 0,
basicattackcooldown:false,
iceboltcooldown:false,
fireboltcooldown:false,
stormboltcooldown:false,
shadowboltcooldown:false,
thornscooldown:false,
bloodstrikecooldown:false,
healcooldown:false,
shieldcooldown:false,
buffmagiccooldown:false,
naturehealcooldown:false,
manarestorecooldown:false,
icebuffcooldown: false,
firebuffcooldown: false,
stormbuffcooldown: false,
shadowbuffcooldown: false,
bloodsapcooldown: false,
healwingscooldown: false,
helmetcooldown: false,
attackbuffcooldown:false,
magebuffcooldown: false,
lotuscooldown: false,
magicattackcooldown: false,
defensehealcooldown: false,
buffHealth : 0,
buffMana : 0,
buffDodge : 0,
buffMagicPow : 0,
buffDamage : 0,
buffIceDMG : 0,
buffFireDMG : 0,
buffStormDMG : 0,
buffBloodDMG : 0,
buffCritical : 0,
buffShadowDMG : 0,
buffNatureDMG : 0,
buffHealPow : 0,
buffLifesteal : 0,
nerfHealth : 0,
nerfMana : 0,
nerfDodge : 0,
nerfMagicPow : 0,
nerfDamage : 0,
nerfIceDMG : 0,
nerfFireDMG : 0,
nerfStormDMG : 0,
nerfBloodDMG : 0,
nerfCritical : 0,
nerfShadowDMG : 0,
nerfNatureDMG : 0,
nerfHealPow : 0,
nerfLifesteal : 0,
}
var Health = 200*player.level + player.buffHealth + player.totalHealth - player.nerfHealth;
var Mana = 100*player.level + player.buffMana + player.totalMana - player.nerfMana;
var Dodge = 5*player.level + player.buffDodge + player.totalDodge - player.nerfDodge;
var MagicPow = 10*player.level + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
var Damage = 10*player.level + player.buffDamage + player.totalDamage - player.nerfDamage;
var IceDMG = 5*player.level + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
var FireDMG = 5*player.level + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
var StormDMG = 5*player.level + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
var Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
var BloodDMG = 5*player.level + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
var ShadowDMG = 5*player.level + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
var NatureDMG = 5*player.level + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
var HealPow = 5*player.level + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
var Lifesteal = player.buffLifesteal + player.totalLifesteal - player.nerfLifesteal;
var currentplayerhealth;
var currentplayermana;
var currentbosshealth;
var currentbosslevel;
var battle=false;
var boss = {
level: 1,
health: this.level * 500 + Math.floor(this.level/10 * 5000),
damage: this.level * 15,
}
var playerdamage = false;
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", 15, 15],
["Mana", 15, 15],
["Dodge", 7, 0],
["Critical", 10, 0],
["Damage", 5, 5],
["MagicPow", 7, 7],
["ShadowDMG", 10, 10],
["NatureDMG", 10, 10],
["IceDMG", 10, 10],
["FireDMG", 10, 10],
["BloodDMG", 10, 10],
["StormDMG", 10, 10],
["HealPow", 7, 7],
["Lifesteal",6,6]
]
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,
}
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;
});
function playerattack(object){
countplayerstats();
updatespells();
var i = 0;
function resetcooldown(){
player[object.namefunction+"cooldown"] = false;
$(object.nameid).removeClass("oncooldown");
}
function f() {
if (player[object.namefunction +"cooldown"] === false && currentplayermana >= object.manacost && battle === true){
player[object.namefunction+"cooldown"]=true;
// 0 means 1 spell use per battle
useattack();
if (object.cooldown !== 0 ){
setTimeout(resetcooldown,object.cooldown,object.namefunction);
}
}
function removebuff(){
player[object.buffname]= 0;
}
function useattack(){
if (object.buffamount != 0 && i === 0){
player[object.buffname] = object.buffamount;
var classname = object.buffname.replace("buff","");
$("#rightinfo").prepend("<p class='"+ classname +"'>"+object.buffname.replace("buff","")+" buffed: "+object.buffamount+"</p>");
if (object.buffduration != 0){
setTimeout (removebuff, object.buffduration);
}
}
if (object.damage > 0 ){
var critroll = Math.floor(Math.random() * (100 - Critical)) + 1;
var ifcrit = " does ";
if (critroll < Critical) {
object.damage = object.damage * 2;
ifcrit = " CRITS for";
}
currentbosshealth = currentbosshealth - object.damage;
if( object.namefunction != "basicattack"){
$("#rightinfo").prepend("<p>"+ object.nameplayer + ifcrit + ": "+ object.damage + " DMG! </p>");
}
}
if (object.spellfunction != undefined){
object.spellfunction();
}
if (object.manacost > 0){
currentplayermana = currentplayermana - object.manacost;
}
if (object.healthcost > 0){
currentplayerhealth = currentplayerhealth - object.healthcost;
}
if (object.manarestore > 0 ){
currentplayermana = currentplayermana + object.manarestore;
if ( object.namefunction != "basicattack"){
$("#rightinfo").prepend("<p>You restore: " + object.manarestore + " Mana!")
}
}
if (object.healthrestore > 0){
currentplayerhealth = currentplayerhealth + object.healthrestore;
if ( object.namefunction != "basicattack"){
$("#rightinfo").prepend("<p>You restore: " + object.healthrestore + " Health!");
}
}
i++;
if( i < object.repeat ){setTimeout(useattack, object.delay );}
}
}
if (player[object.namefunction +"cooldown"] === false && currentplayermana >= object.manacost && battle === true){
$(object.nameid).addClass("oncooldown");
setTimeout(f,object.delay);
}
}
var spellobject;
function updatespells(){
spellobject = {
basicattack: {
nameplayer: "Attack",
namefunction: "basicattack",
nameid: ".-basic",
damage: Damage,
manacost: 0,
healthcost: 0,
manarestore: Math.floor(Mana/10),
healthrestore: Math.floor(Lifesteal/4),
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 2000,
},
icebolt: {
nameplayer: "Icebolt",
namefunction: "icebolt",
nameid: "#icebolt",
damage: Math.floor(Damage/2 + IceDMG + MagicPow/2) ,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 5000,
},
firebolt: {
nameplayer: "Firebolt",
namefunction: "firebolt",
nameid: "#firebolt",
damage: Math.floor(Damage/2 + FireDMG + MagicPow/2) ,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 5000,
},
stormbolt: {
nameplayer: "Stormbolt",
namefunction: "stormbolt",
nameid: "#stormbolt",
damage: Math.floor(Damage/2 + StormDMG + MagicPow/2) ,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 5000,
},
shadowbolt: {
nameplayer: "Shadowbolt",
namefunction: "shadowbolt",
nameid: "#shadowbolt",
damage: Math.floor(Damage/2 + ShadowDMG + MagicPow/2) ,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 2000,
buffname: 0,
buffamount: 0,
cooldown: 5000,
},
bloodstrike: {
nameplayer: "Bloodstrike",
namefunction: "bloodstrike",
nameid: "#bloodstrike",
damage: Math.floor(BloodDMG + Damage),
manacost: boss.level * 5,
healthcost: boss.level * 30,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffLifesteal",
buffamount: Math.floor(BloodDMG / 2),
cooldown: 5000,
},
thorns: {
nameplayer: "Thorns",
namefunction: "thorns",
nameid: "#thorns",
damage: Math.floor(Damage/6 + NatureDMG/3 + MagicPow/6) ,
manacost: boss.level * 4,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 3,
delay: 1000,
buffname: 0,
buffamount: 0,
cooldown: 5000,
},
natureheal: {
nameplayer: "Natureheal",
namefunction: "natureheal",
nameid: "#natureheal",
damage: 0,
manacost: boss.level * 5,
healthcost: 0,
manarestore: 0,
healthrestore: Math.floor(NatureDMG/4),
repeat: 3,
delay: 1000,
buffname: "buffNatureDMG",
buffamount: Math.floor(NatureDMG),
buffduration: 5000,
cooldown: 10000,
},
heal: {
nameplayer: "Heal",
namefunction: "heal",
nameid: "#heal",
damage: 0,
manacost: boss.level * 4,
healthcost: 0,
manarestore: 0,
healthrestore: HealPow*2,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 10000,
},
shield: {
nameplayer: "Shield",
namefunction: "shield",
nameid: "#shield",
damage: 0,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffDodge",
buffamount: 100,
cooldown: 10000,
buffduration: 5000,
},
manarestore: {
nameplayer: "Manarestore",
namefunction: "manarestore",
nameid: "#manarestore",
damage: 0,
manacost: 0,
healthcost: 0,
manarestore: Math.floor(MagicPow/2),
healthrestore:0,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 10000,
},
lotus: {
nameplayer: "Lotus",
namefunction: "lotus",
nameid: "#lotus",
damage: 0,
manacost: 0,
healthcost: 0,
manarestore: Math.floor(MagicPow/2),
healthrestore:0,
repeat: 5,
delay: 1000,
buffname: 0,
buffamount: 0,
cooldown: 0,
},
buffmagic: {
nameplayer: "Magic Bottle",
namefunction: "buffmagic",
nameid: "#buffmagic",
damage: 0,
manacost: boss.level * 25,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffMagicPow",
buffamount: Math.floor(MagicPow/2),
cooldown: 10000,
buffduration: 5000,
},
icebuff: {
nameplayer: "Ice Mask",
namefunction: "icebuff",
nameid: "#icebuff",
damage: Math.floor(IceDMG / 2),
manacost: boss.level * 10,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffIceDMG",
buffamount: Math.floor(IceDMG),
cooldown: 10000,
buffduration: 5000,
},
firebuff: {
nameplayer: "Hand of Fire",
namefunction: "firebuff",
nameid: "#firebuff",
damage: Math.floor(FireDMG / 2),
manacost: boss.level * 10,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffFireDMG",
buffamount: Math.floor(FireDMG),
cooldown: 10000,
buffduration: 5000,
},
shadowbuff: {
nameplayer: "Eye of Shadow",
namefunction: "shadowbuff",
nameid: "#shadowbuff",
damage: Math.floor(ShadowDMG / 2),
manacost: boss.level * 10,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffShadowDMG",
buffamount: Math.floor(ShadowDMG),
cooldown: 10000,
buffduration: 5000,
},
stormbuff: {
nameplayer: "Tree of Storm",
namefunction: "stormbuff",
nameid: "#stormbuff",
damage: Math.floor(StormDMG/2),
manacost: boss.level * 10,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffStormDMG",
buffamount: Math.floor(StormDMG ),
cooldown: 10000,
buffduration: 5000,
},
magebuff: {
nameplayer: "Mage Burst",
namefunction: "magebuff",
nameid: "#magebuff",
damage: Math.floor(MagicPow /2),
manacost: Math.floor(currentplayermana / 2),
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffMagicPow",
buffamount: Math.floor(MagicPow /2),
cooldown: 10000,
buffduration: 10000,
},
bloodsap: {
nameplayer: "Blood Sap",
namefunction: "bloodsap",
nameid: "#bloodsap",
damage: Math.floor(BloodDMG/3),
manacost: 0,
healthcost: Math.floor(Health / 4),
manarestore: 0,
healthrestore: Math.floor(BloodDMG/3),
repeat: 3,
delay: 1000,
buffname: "buffBloodDMG",
buffamount: Math.floor(BloodDMG ),
cooldown: 10000,
buffduration: 5000,
},
healwings: {
nameplayer: "Heal Wings",
namefunction: "healwings",
nameid: "#healwings",
damage: 0,
manacost: Math.floor(Mana / 10),
healthcost: 0,
manarestore: 0,
healthrestore: HealPow,
repeat: 5,
delay: 800,
buffname: 0,
buffamount: 0,
cooldown: 10000,
},
defenseheal: {
nameplayer: "Palace of Gods",
namefunction: "defenseheal",
nameid: "#defenseheal",
damage: 0,
manacost: boss.level*7,
healthcost: 0,
manarestore: 0,
healthrestore: Math.floor(HealPow/2),
repeat: 3,
delay: 1000,
buffname: "buffDodge",
buffamount: 30,
buffduration: 4000,
cooldown: 10000,
},
attackbuff: {
nameplayer: "Damage Buff",
namefunction: "attackbuff",
nameid: "#attackbuff",
damage: 0,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffDamage",
buffamount: Math.floor(Damage),
cooldown: 10000,
buffduration: 10000,
},
helmet: {
nameplayer: "Vigor Of Vikings",
namefunction: "helmet",
nameid: "#helmet",
damage: 0,
manacost: boss.level * 15,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: "buffHealth",
buffamount: Math.floor(Mana / 2),
cooldown: 10000,
buffduration: 0,
},
magicattack: {
nameplayer: "Finger Bolt",
namefunction: "magicattack",
nameid: "#magicattack",
damage: MagicPow,
manacost: boss.level * 10,
healthcost: 0,
manarestore: 0,
healthrestore: 0,
repeat: 0,
delay: 0,
buffname: 0,
buffamount: 0,
cooldown: 7000,
buffduration: 0,
},
}
}
updatespells();
$("#magicattack").click(function(){playerattack(spellobject.magicattack);});
$("#helmet").click(function(){playerattack(spellobject.helmet);});
$("#defenseheal").click(function(){playerattack(spellobject.defenseheal);});
$("#attackbuff").click(function(){playerattack(spellobject.attackbuff);});
$("#lotus").click(function(){playerattack(spellobject.lotus);});
$("#healwings").click(function(){playerattack(spellobject.healwings);});
$("#bloodsap").click(function(){playerattack(spellobject.bloodsap);});
$("#magebuff").click(function(){playerattack(spellobject.magebuff);});
$("#shadowbuff").click(function(){playerattack(spellobject.shadowbuff);});
$("#stormbuff").click(function(){playerattack(spellobject.stormbuff);});
$("#firebuff").click(function(){playerattack(spellobject.firebuff);});
$("#icebuff").click(function(){playerattack(spellobject.icebuff);});
$("#icebolt").click(function(){playerattack(spellobject.icebolt);});
$("#firebolt").click(function(){playerattack(spellobject.firebolt);});
$("#stormbolt").click(function(){playerattack(spellobject.stormbolt);});
$("#thorns").click(function(){playerattack(spellobject.thorns);});
$("#shadowbolt").click(function(){playerattack(spellobject.shadowbolt);});
$("#heal").click(function(){playerattack(spellobject.heal);});
$("#natureheal").click(function(){playerattack(spellobject.natureheal);});
$("#manarestore").click(function(){playerattack(spellobject.manarestore);});
$("#bloodstrike").click(function(){playerattack(spellobject.bloodstrike);});
$("#shield").click(function(){playerattack(spellobject.shield);});
$("#buffmagic").click(function(){playerattack(spellobject.buffmagic);});
$(".-basic").click(function(){playerattack(spellobject.basicattack);});
// keyboard spell clicking support! Woo :D
$('body').bind('keypress',function (event){
if (event.keyCode === 49){$(".spell1").trigger('click');}
if (event.keyCode === 50){$(".spell2").trigger('click');}
if (event.keyCode === 51){$(".spell3").trigger('click');}
if (event.keyCode === 52){$(".spell4").trigger('click');}
if (event.keyCode === 53){$(".spell5").trigger('click');}
if (event.keyCode === 54){$(".spell6").trigger('click');}
if (event.keyCode === 55){$(".spell7").trigger('click');}
if (event.keyCode === 56){$(".spell8").trigger('click');}
if (event.keyCode === 57){$(".spell9").trigger('click');}
if (event.charCode === 49){$(".spell1").trigger('click');}
if (event.charCode === 50){$(".spell2").trigger('click');}
if (event.charCode === 51){$(".spell3").trigger('click');}
if (event.charCode === 52){$(".spell4").trigger('click');}
if (event.charCode === 53){$(".spell5").trigger('click');}
if (event.charCode === 54){$(".spell6").trigger('click');}
if (event.charCode === 55){$(".spell7").trigger('click');}
if (event.charCode === 56){$(".spell8").trigger('click');}
if (event.charCode === 57){$(".spell9").trigger('click');}
});
var autobasic1;
$("#autobasic").click(function(){
function autobasicatk(){
$(".spell1").trigger('click');
}
autobasic1 = setInterval(autobasicatk, 300);
});
$("#manualauto").click(function(){
clearInterval(autobasic1);
});
function displaystats() {
$("#health").text(Math.floor(Health));
$("#mana").text(Math.floor(Mana));
$("#damage").text(Math.floor(Damage));
$("#critical").text(Math.floor(Critical));
$("#dodge").text(Math.floor(Dodge));
$("#healpow").text(Math.floor(HealPow));
$("#magicpow").text(Math.floor(MagicPow));
$("#ice").text(Math.floor(IceDMG));
$("#fire").text(Math.floor(FireDMG));
$("#storm").text(Math.floor(StormDMG));
$("#nature").text(Math.floor(NatureDMG));
$("#shadow").text(Math.floor(ShadowDMG));
$("#blood").text(Math.floor(BloodDMG));
$("#lifesteal").text(Math.floor(Lifesteal));
$("#gold").text("Gold: "+Math.floor(player.gold));
$("#level").text("Level: "+player.level);
}
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;
player.totalLifesteal = 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 = 200*player.level + player.buffHealth + player.totalHealth - player.nerfHealth;
Mana = 100*player.level + player.buffMana + player.totalMana - player.nerfMana;
Dodge = player.buffDodge + player.totalDodge - player.nerfDodge;
MagicPow = 20*player.level + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
Damage = 10*player.level + player.buffDamage + player.totalDamage - player.nerfDamage;
IceDMG = 15*player.level + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
FireDMG = 15*player.level + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
StormDMG = 15*player.level + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
BloodDMG = 15*player.level + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
ShadowDMG = 15*player.level + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
NatureDMG = 15*player.level + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
HealPow = 15*player.level + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
Lifesteal = 15*player.level + player.buffLifesteal + player.totalLifesteal - player.nerfLifesteal;
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;}
if (BloodDMG<0){BloodDMG=0;}
if (Mana<0){Mana=0;}
updatespells();
displaystats();
} // count stats function
var finishedgenerating = true;
function upgradeitem(){
var theitem=inventory[clickeditemid];
var upgraderarity= Math.floor(Math.random()*rarities.length);
if (theitem["upgrade"]["level"] < 5 && player.gold > theitem["level"]*5){
player.gold = player.gold - theitem["level"]*5;
var randomupgradestat= Math.floor(Math.random()*affixes.length);
var upgradestatamount= Math.floor((upgraderarity+1)*(theitem.level*affixes[randomupgradestat][2])/5);
var maxupgradestatamount= Math.floor(5*(theitem.level*affixes[randomupgradestat][2])/5);
var upgradestatrarity= rarities[upgraderarity];
theitem.upgrade.stats[affixes[randomupgradestat][0]] = [upgradestatamount, maxupgradestatamount, upgradestatrarity];
theitem.upgrade.level++;
function countitemstats(){
for (var i=0;i<affixes.length;i++){
theitem.totalstats[affixes[i][0]]=theitem.stats[affixes[i][0]][0] + theitem.upgrade.stats[affixes[i][0]][0];
}
}
countitemstats();
} // if upgrade level
} // function upgrade
function upgradeitemonchar(){
theitem=player[clickeditemid];
upgraderarity= Math.floor(Math.random()*rarities.length);
if (theitem["upgrade"]["level"] < 5 && player.gold > theitem["level"]*5){
player.gold = player.gold - theitem["level"]*5;
randomupgradestat= Math.floor(Math.random()*affixes.length);
upgradestatamount= Math.floor((upgraderarity+1)*(theitem.level*affixes[randomupgradestat][2])/5);
maxupgradestatamount= Math.floor(5*(theitem.level*affixes[randomupgradestat][2])/5);
upgradestatrarity= rarities[upgraderarity];
theitem.upgrade.stats[affixes[randomupgradestat][0]] = [upgradestatamount, maxupgradestatamount, upgradestatrarity];
theitem.upgrade.level++;
function countitemstats(){
for (var i=0;i<affixes.length;i++){
theitem.totalstats[affixes[i][0]]=theitem.stats[affixes[i][0]][0] + theitem.upgrade.stats[affixes[i][0]][0];
}
}
countitemstats();
} // if upgrade level
} // function upgrade
$("#upgrade").click(function(){
upgradeitem();
});
$("#upgradeitemonchar").click(function(){
upgradeitemonchar();
});
function createitem(bossLevel) {
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 * bossLevel;
generateditem.upgrade = {};
generateditem.upgrade.level = 0;
generateditem.upgrade.stats = {};
generateditem.level = bossLevel;
generateditem.totalstats = {};
// this generates all possible stats so there's no need for undefined checks and makes calculation easier
for (var g = 0; g < affixes.length; g++) {
generateditem.totalstats[affixes[g][0]] = 0;
generateditem.stats[affixes[g][0]] = [0,0,0];
generateditem.upgrade.stats[affixes[g][0]] = [0,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] * bossLevel)));
var statmax = affixes[randomstat][1] + (affixes[randomstat][2] * bossLevel);
var statcolor = "Common";
if (statnumber > statmax * 0.2) {
statcolor = "Magic"
};
if (statnumber > statmax * 0.4) {
statcolor = "Rare"
};
if (statnumber > statmax * 0.6) {
statcolor = "Epic"
};
if (statnumber > statmax * 0.8) {
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;
// 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);
}
//so right click doesn't fuck up my options menu
document.oncontextmenu = function() {
return false;
};
function addsummon(){
player.summonbosscounter++;
if (player.summonbosscounter > 5){
player.summonbosscounter=0;
player.summons++;
var fightcount = "Boss Summons: " + player.summons;
$("#bosssummons").text(fightcount);
}
}
// easy leveling function
function checkexp(){
if (player.experience > 3 * player.level){
player.experience=0;
player.level++;
}
fightcount = "Boss Summons: " + player.summons;
$("#bosssummons").text(fightcount);
}
function bosslevelkilled(x){
player.bosslevel = x;
console.log(player.bosslevel);
}
function startfight(){
battle=true;
$("#leftinfo").prepend("<p>Fight has started!</p>");
player.basicattackcooldown=false;
player.iceboltcooldown=false;
player.fireboltcooldown=false;
player.stormboltcooldown=false;
player.shadowboltcooldown=false;
player.thornscooldown=false;
player.bloodstrikecooldown=false;
player.healcooldown=false;
player.shieldcooldown=false;
player.buffmagiccooldown=false
player.naturehealcooldown=false;
player.manarestorecooldown=false;
player.icebuffcooldown= false;
player.firebuffcooldown= false;
player.stormbuffcooldown= false;
player.shadowbuffcooldown= false;
player.bloodsapcooldown= false;
player.healwingscooldown= false;
player.helmetcooldown= false;
player.attackbuffcooldown=false;
player.magebuffcooldown= false;
player.lotuscooldown= false;
player.magicattackcooldown= false;
player.defensehealcooldown= false;
$(".oncooldown").removeClass("oncooldown");
resetplayerstats();
var randombossname= Math.floor(Math.random()*13)+1;
var bossname="boss"+randombossname+" "+" mobsprites bosspic";
var bosshitroll;
// there is bonus every 25 levels so you have to stop and get better gear, this is to balance the game
boss.health = boss.level * 500 + (Math.floor(boss.level/25)*20000)+(Math.floor(boss.level/100)*50000) ;
boss.damage = boss.level*20 + (Math.floor(boss.level/25)*150)+(Math.floor(boss.level/100)*250);
currentbosshealth = boss.health;
currentplayerhealth = Health;
currentplayermana = Mana;
var bossdamage= boss.damage;
var bosscritdamage=boss.damage*2;
$("#boss").html("<img class='"+bossname+ "' ></img>");
$("#bosshptext").text(currentbosshealth+"/"+currentbosshealth);
$("#bosshpbar").css("width","100%");
function updatehealthbar(){
var barpercent = currentbosshealth / boss.health*100;
var playerhpbar = currentplayerhealth / Health *100;
var playermanabar =currentplayermana / Mana *100;
if (playerhpbar > 100){playerhpbar = 100;}
if (playermanabar > 100){playermanabar = 100;}
$("#bosshpbar").animate({width: barpercent+"%"},"slow");
$("#bosshptext").text(currentbosshealth + "/"+boss.health);
$("#playerhpbar").animate({width: playerhpbar+"%"},"slow");
$("#playermanabar").animate({width: playermanabar+"%"},"slow");
}
function bossattack(){
bossdamage= boss.damage;
bosscritdamage=boss.damage*5;
bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;
function attackbasicplayer(){
bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;
if (bosshitroll > Dodge){
$("#leftinfo").prepend("<p>Boss Attacks for: " + bossdamage +" DMG!"+"</p>");
currentplayerhealth = currentplayerhealth - bossdamage;}
if(bosshitroll < Dodge){$("#leftinfo").prepend("<p>Boss Missed a basic attack.</p>");}
}
function critplayer(){
bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;
if (bosshitroll > Dodge){
$("#leftinfo").prepend("<p>Boss CRITS for: " + bosscritdamage +" DMG!"+"</p>");
currentplayerhealth = currentplayerhealth - bosscritdamage;}
if(bosshitroll < Dodge){$("#leftinfo").prepend("<p>Boss Missed the crit.</p>");}
}
function castHealPowreduce(){
player.nerfHealPow = 999999991000;
function HealPowreduceremove(){
player.nerfHealPow=0;
}
setTimeout(HealPowreduceremove,10000);
$("#leftinfo").prepend("<p class='heal' > Boss Casts NERF HealPow!</p>");
}
function castIceDMGreduce(){
player.nerfIceDMG = 999991000;
function IceDMGreduceremove(){
player.nerfIceDMG=0;
}
setTimeout(IceDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='ice'> Boss Casts NERF IceDMG!</p>");
}
function castFireDMGreduce(){
player.nerfFireDMG = 9999991000;
function FireDMGreduceremove(){
player.nerfFireDMG=0;
}
setTimeout(FireDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='fire'> Boss Casts NERF FireDMG!</p>");
}
function castStormDMGreduce(){
player.nerfStormDMG = 9999991000;
function StormDMGreduceremove(){
player.nerfStormDMG=0;
}
setTimeout(StormDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='storm'> Boss Casts NERF StormDMG!</p>");
}
function castShadowDMGreduce(){
player.nerfShadowDMG = 9999991000;
function ShadowDMGreduceremove(){
player.nerfShadowDMG=0;
}
setTimeout(ShadowDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='shadow'> Boss Casts NERF ShadowDMG!</p>");
}
function castNatureDMGreduce(){
player.nerfNatureDMG = 9999991000;
function NatureDMGreduceremove(){
player.nerfNatureDMG=0;
}
setTimeout(NatureDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='nature'> Boss Casts NERF NatureDMG!</p>");
}
function castBloodDMGreduce(){
player.nerfBloodDMG = 9999991000;
function BloodDMGreduceremove(){
player.nerfBloodDMG=0;
}
setTimeout(BloodDMGreduceremove,10000);
$("#leftinfo").prepend("<p class='danger'> Boss Casts NERF BloodDMG!</p>");
}
var bosschoosespell = Math.floor(Math.random()*100);
if (bosschoosespell <10){$("#leftinfo").prepend("<p class='danger'> CRITICAL INCOMING!</p>");setTimeout(critplayer,3000);}
else if (bosschoosespell < 12){castBloodDMGreduce();}
else if (bosschoosespell < 14){castIceDMGreduce();}
else if (bosschoosespell < 16){castFireDMGreduce();}
else if (bosschoosespell < 18){castStormDMGreduce();}
else if (bosschoosespell < 20){castNatureDMGreduce();}
else if (bosschoosespell < 22){castHealPowreduce();}
else if (bosschoosespell < 24){castShadowDMGreduce();}
else if (bosschoosespell < 101){attackbasicplayer();}
updatehealthbar();
}
function checkdeath(){
if (currentbosshealth < 1) {
currentbosslevel = boss.level;
battle=false;
clearInterval(bossattack);
clearInterval(checkdeath);
currentbosshealth=boss.health;
createitem(currentbosslevel);
createitem(currentbosslevel);
resetplayerstats();
countplayerstats();
currentplayerhealth = Health;
currentplayermana = Mana;
currentplayerhealth = Health;
updatehealthbar();
player.experience++;
bosslevelkilled(currentbosslevel)
}
if (currentplayerhealth < 1) {
battle=false;
clearInterval(bossattack);
clearInterval(checkdeath);
resetplayerstats();
countplayerstats();
currentplayerhealth = Health;
currentplayermana = Mana;
currentplayerhealth = Health;
currentbosshealth=boss.health;
updatehealthbar();
}
// so mana doesn't overflow..
if (currentplayermana > Mana){currentplayermana=Mana};
if (currentplayerhealth > Health){currentplayerhealth=Health};
if (currentplayermana < 0){currentplayermana=0};
updatehealthbar();
}
var checkdeath=setInterval(checkdeath,1000);
var bossattack=setInterval(bossattack,3000);
}
$("#summonfaster").click(function(){
if (player.summoninterval-10000 > 0){
player.summoninterval=player.summoninterval - 10000;
$("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
}
});
$("#summonslower").click(function(){
player.summoninterval=player.summoninterval + 10000;
$("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
});
$("#minus").click(function(){
if( boss.level > 1 && battle != true){
boss.level--;
$("#bosslevel").text("LVL: "+boss.level);
}
});
$("#plus").click(function(){
if (battle != true){
boss.level++;
$("#bosslevel").text("LVL: "+boss.level);
}
});
//inventory options
$(".slot").mousedown(function(e) {
if (e.button == 2) {
clickeditemid = this.id;
$("#showdiv").css({
'display': 'none'
});
$("#showdiv1").css({
'display': 'none'
});
$("#showdiv").css({
'top': mouseY,
'left': mouseX,
'display': 'block'
});
}
});
//inventory options
$(".spellbar").mousedown(function(e) {
if (e.button == 2) {
clickeditemid = this.id;
$("#showdiv").css({
'display': 'none'
});
$("#showdiv1").css({
'display': 'none'
});
$("#desc").css({
'top': top,
'left': 0,
'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()
});
// closes all menus
$("#main").click(function() {
$("#showdiv").css({
'display': 'none'
});
$("#showdiv1").css({
'display': 'none'
});
$("#desc").css({
'display': 'none'
});
});
$("#sellall").click(function(){
function clicked() {
if (confirm('Are you sure you want to sell your whole inventory?')){
sellall();
} else {
return false;
}
}
clicked();
});
function sellall(){
for (var i=1; i<29;i++){
var sellitemid = "i" + i;
if (inventory[sellitemid]["value"] != undefined && inventory[sellitemid]["value"] != null){
player.gold = player.gold + inventory[sellitemid]["value"];
$("#" + sellitemid).empty();
inventory[sellitemid] = {};
}
}
}
$("#sell").click(function() {
function sell() {
// this is to stop bug when you click an empty inventory slot...
if (inventory[clickeditemid]["value"] != undefined && inventory[clickeditemid]["value"] != null){
player.gold = player.gold + inventory[clickeditemid]["value"];
$("#" + clickeditemid).empty();
inventory[clickeditemid] = {};
}
}
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();
});
$("#fightbutton").click(function(){
function startfightonclick(){
if (player.summons < 1 && battle !=true){
$("#leftinfo").prepend("<p>You don't have enough Boss summons!</p>");
}
if (battle == true){
$("#leftinfo").prepend("<p>Cannot start battle while in combat</p>");
}
if (player.summons > 0 && battle != true ) {
battle = true;
$("#leftinfo").empty();
$("#rightinfo").empty();
$("#leftinfo").prepend("<p>Fight is starting.</p>");
player.summons--;
setTimeout(startfight,5000);
}}
startfightonclick();
});
//INVENTORY CLICK
$(".slot").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");
var rarityarr = [];
$("#info").empty();
$("#upgradeinfo").empty();
$("#powerlevel").empty();
for (var y = 0; y < affixes.length; y++) {
var statstuff = inventory[clickeditemid]["stats"][affixes[y][0]];
var upgradestatstuff = inventory[clickeditemid]["upgrade"]["stats"][affixes[y][0]];
rarityarr.push(inventory[clickeditemid]["upgrade"]["stats"][affixes[y][0]][2] );
rarityarr.push(inventory[clickeditemid]["stats"][affixes[y][0]][2] );
if (y === 0) {
var namerarity = inventory[clickeditemid]["rarity"];
var clickeditemname = inventory[clickeditemid]["name"];
$("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
$("#upgradeinfo").html("<p> Upgrade stats:</p>");
}
if (statstuff != undefined && statstuff[0]>0) {
$("#info").append(
"<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
);
}
if (upgradestatstuff[0] != undefined && upgradestatstuff[0] >0) {
$("#upgradeinfo").append(
"<p>" + affixes[y][0] + ": <span class='" + upgradestatstuff[2] + "'>" + upgradestatstuff[0] + "/" + upgradestatstuff[1] + "</span></p>"
);
}
if (y === affixes.length - 1) {
$("#info").append("<p>Item Level: " + inventory[clickeditemid]["level"] + "</p>");
}
}
var totalperc = 0;
for (var i=0; i<rarityarr.length;i++){
if (rarityarr[i] === "Common"){totalperc = totalperc + 1;}
if (rarityarr[i] === "Magic"){totalperc = totalperc + 2;}
if (rarityarr[i] === "Rare"){totalperc = totalperc + 3;}
if (rarityarr[i] === "Epic"){totalperc = totalperc + 4;}
if (rarityarr[i] === "Legendary"){totalperc = totalperc + 5;}
}
totalperc = Math.floor(totalperc / 45 * 100)+"%";
inventory[clickeditemid].powerlevel = totalperc;
$("#powerlevel").text("Power Level:"+inventory[clickeditemid].powerlevel);
});
//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");
var rarityarr =[];
$("#powerlevel").empty();
$("#info").empty();
$("#upgradeinfo").empty();
for (var y = 0; y < affixes.length; y++) {
var statstuff = player[clickeditemid]["stats"][affixes[y][0]];
var upgradestatstuff = player[clickeditemid]["upgrade"]["stats"][affixes[y][0]];
rarityarr.push(player[clickeditemid]["upgrade"]["stats"][affixes[y][0]][2] );
rarityarr.push(player[clickeditemid]["stats"][affixes[y][0]][2] );
if (y === 0) {
var namerarity = player[clickeditemid]["rarity"];
var clickeditemname = player[clickeditemid]["name"];
$("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
$("#upgradeinfo").html("<p> Upgrade stats:</p>");
}
if (statstuff != undefined && statstuff[0]>0) {
$("#info").append(
"<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
);
}
if (upgradestatstuff[0] != undefined && upgradestatstuff[0] >0) {
$("#upgradeinfo").append(
"<p>" + affixes[y][0] + ": <span class='" + upgradestatstuff[2] + "'>" + upgradestatstuff[0] + "/" + upgradestatstuff[1] + "</span></p>"
);
}
if (y === affixes.length - 1) {
$("#info").append("<p>Item Level: " + player[clickeditemid]["level"] + "</p>");
}
}
var totalperc = 0;
for (var i=0; i<rarityarr.length;i++){
if (rarityarr[i] === "Common"){totalperc = totalperc + 1;}
if (rarityarr[i] === "Magic"){totalperc = totalperc + 2;}
if (rarityarr[i] === "Rare"){totalperc = totalperc + 3;}
if (rarityarr[i] === "Epic"){totalperc = totalperc + 4;}
if (rarityarr[i] === "Legendary"){totalperc = totalperc + 5;}
}
totalperc = Math.floor(totalperc / 45 * 100)+"%";
player[clickeditemid].powerlevel = totalperc;
$("#powerlevel").text("Power Level:"+player[clickeditemid].powerlevel);
});
// to unequip items
$(".slot1").mousedown(function(e) {
if (e.button == 2) {
clickeditemid = this.id;
$("#showdiv").css({
'display': 'none'
});
$("#showdiv1").css({
'display': 'none'
});
$("#showdiv1").css({
'top': mouseY,
'left': mouseX,
'display': 'block'
});
}
});
function resetplayerstats(){
player.buffHealth = 0;
player.buffMana = 0;
player.buffDodge = 0;
player.buffMagicPow = 0;
player.buffDamage = 0;
player.buffIceDMG = 0;
player.buffFireDMG = 0;
player.buffStormDMG = 0;
player.buffBloodDMG = 0;
player.buffCritical = 0;
player.buffShadowDMG = 0;
player.buffNatureDMG = 0;
player.nerfHealPow = 0;
player.nerfHealth = 0;
player.nerfMana = 0;
player.nerfDodge = 0;
player.nerfMagicPow = 0;
player.nerfDamage = 0;
player.nerfIceDMG = 0;
player.nerfFireDMG = 0;
player.nerfStormDMG = 0;
player.nerfBloodDMG = 0;
player.nerfCritical = 0;
player.nerfShadowDMG = 0;
player.nerfNatureDMG = 0;
player.nerfHealPow = 0;
}
function reloadeverything(){
// we load inventory items
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>");
}
}
// we also load character items
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 autoitems(){
createitem(player.bosslevel);
}
setInterval(checkexp,20000);
setInterval(countplayerstats, 300);
function save() {
var save = {
player1: player,
inventory1: inventory,
boss1: boss,
}
localStorage.setItem("save", JSON.stringify(save));
}
function load() {
var savegame = JSON.parse(localStorage.getItem("save"));
var basicint = setInterval(addsummon,10000);
if (savegame != null && savegame != undefined){
clearInterval(basicint);
inventory = savegame.inventory1;
player = savegame.player1;
resetplayerstats();
reloadeverything();
countplayerstats();
displaystats();
boss = savegame.boss1;
$("#bosslevel").text("LVL: "+boss.level);
$("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
setInterval(addsummon,player.summoninterval);
setInterval(autoitems, 600000);
}
}
setInterval(save, 10000);
window.onload = function() {
load();
}
}); // doc rdy
Also see: Tab Triggers