HP + Mana Bar

Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5

by Dennis Betman

HTML

<div class="hp_bar_wrapper">
    <div class="hp_inner_bar"></div>
    <div class="hp_score"><span class="hp_total_score"></span><span class="hp_total_name"></span><span class="hp_per_sec"></span>

    </div>
</div>
<div class="mana_bar_wrapper">
    <div class="mana_inner_bar"></div>
    <div class="mana_score"><span class="mana_total_score"></span><span class="mana_total_name"></span><span class="mana_per_sec"></span>

    </div>
</div>
<button class="mana_boost">Mana Boost</button>
<div class="spells spellQ">Q
    <img src="http://ddragon.leagueoflegends.com/cdn/5.6.2/img/spell/Volley.png" /><span class="spell_CD spellQ_cooldown"></span><span class="spell_CD spellQ_no_mana"></span>

</div>
<div class="spells spellW">W
    <img src="http://ddragon.leagueoflegends.com/cdn/5.6.2/img/spell/AsheSpiritOfTheHawk.png" /><span class="spell_CD spellW_cooldown"></span><span class="spell_CD spellW_no_mana"></span>

</div>
<div class="spells spellE">E
    <img src="http://ddragon.leagueoflegends.com/cdn/5.6.2/img/spell/EnchantedCrystalArrow.png" /><span class="spell_CD spellE_cooldown"></span><span class="spell_CD spellE_no_mana"></span>

</div>
<div class="current_level">Level: 1</div>
<div class="error_log"></div>

CSS

.active {
    color: red;
}
.hp_bar_wrapper {
    width: 300px;
    background: url(http://www.jewelbeast.com/something/jsfiddle/ground_normal.png);
    height: 35px;
    border: 1px solid black;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    color: white;
    margin-bottom:5px;
    overflow:hidden;
    position: relative;
}
.mana_bar_wrapper {
    width: 300px;
    background: url(http://www.jewelbeast.com/something/jsfiddle/ground_normal.png);
    height: 35px;
    border: 1px solid black;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    color: white;
    overflow:hidden;
    position: relative;
}
.mana_score, .hp_score {
    position: absolute;
    top:7px;
    width:100%;
    text-align:center;
    z-index: 2;
    font-family: sans-serif;
    font-size: 15px;
}
.mana_inner_bar {
    width:100%;
    height: 34px;
    background: url(http://www.jewelbeast.com/something/jsfiddle/ground_mana.png);
    position: relative;
    z-index: 1;
}
.hp_inner_bar {
    width:100%;
    height: 34px;
    background: url(http://www.jewelbeast.com/something/jsfiddle/ground_hp.png);
    position: relative;
    z-index: 1;
}
.spells_wrapper {
    margin-top:20px;
}
.mana_per_sec, .hp_per_sec {
    position: absolute;
    right: 10px;
}
.spells {
    max-width: 50px;
    min-width: 50px;
    padding: 23px 8px;
    float: left;
    margin-right: 5px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    margin-top: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-family: sans-serif;
}
.spells img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:-1;
}
.spell_CD {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    top: 0px;
    left: 0;
    width: 100%;
    padding: 19px 0px;
    opacity: 0;
    font-size: 23px;
    font-family: sans-serif;
    z-index: 2;
}
.spellQ_no_mana {
    z-index: 1;
}
.spellW_no_mana {
   ...

JavaScript

var HpPerSec = 2.56;
var ManaPerSec = 3.75;

var hpName = "HP";
var manaName = "Mana";

var level1 = [
    750,
    375
];

var totalHP = level1[0];
var totalMana = level1[1];

$(".hp_total_score").html(totalHP);
$(".mana_total_score").html(totalMana);

var Hpdata = parseInt($(".hp_total_score").text()) + 0;
var Manadata = parseInt($(".mana_total_score").text()) + 0;

//Hp Bar
bar(".hp_total_score", ".hp_total_name", ".hp_per_sec", ".hp_inner_bar", totalHP, hpName, HpPerSec);

// Mana Bar
bar(".mana_total_score", ".mana_total_name", ".mana_per_sec", ".mana_inner_bar", totalMana, manaName, ManaPerSec);

var manaBoost = false;
var spell1 = false;
var spell2 = false;
var spell3 = false;

var levelSpellQ = 1;
var levelSpellW = 1;
var levelSpellE = 1;

var manaCostQ = 75;
var manaCostW = 100;
var manaCostE = 89;

// Function Bar
function bar(place, place2, place3, innerbar, total, name, perSec) {

    $(place).html(parseInt($(place).text()) + 0);
    $(place2).html(" / " + total + " " + name);

    $(document).keyup(function (e) {
        if (place == ".mana_total_score") {
            var code = e.keyCode || e.which;

            if (code == 81) { //Enter keycode
                if (!spell1 == true) {
                    var cooldown = 10;
                    var CD2 = (cooldown * 1000) + 100;

                    if (parseInt($(place).text()) >= manaCostQ) {
                        $(".error_log").prepend("<span>Spell(Q) fired</span>");
                        spells(place, manaCostQ, ".spellQ_cooldown", cooldown);
                    } else {
                        $(".error_log").prepend("<span>that ability isn't ready yet</span>");
                        setTimeout(function () {
                            spell1 = false;
                        }, 5);
                    }

                    setTimeout(function () {
                        spell1 = true;
                    }, 1);
                    setTimeout(function () {
                        spell1 =...