The Game

by Dennis Betman

HTML

<div class="mana_bar_wrapper"> <span class="mana_points"></span>

    <div class="mana_bar"></div>
    <div class="mana_persec_wrapper"> <span class="mana_persec">+1</span>

    </div>
</div>
<button id="lose_mana">Click here to lose mana</button>
<button id="one">1 mana per sec</button>
<button id="ten">10 mana per sec</button>

CSS

* {
    margin:0px;
    padding:0px;
}
body, html {
    background:rgb(55, 55, 55);
}
/* Mana bar */
 .mana_bar_wrapper {
    width: 400px;
    height: 35px;
    background: rgb(40, 40, 40);
    border: 1px solid rgb(0, 180, 213);
    ;
    border-radius: 3px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -200px;
}
.mana_points {
    color: white;
    text-align: center;
    display: block;
    width: 100%;
    top: 8px;
    position: absolute;
}
.mana_bar {
    display: block;
    background: rgb(0, 160, 189);
    height: 100%;
}
.mana_persec_wrapper {
    position: absolute;
  right: 7px;
  top: 8px;
  /* background: rgb(19, 19, 19); */
  /* border: 1px solid rgb(90, 90, 90); */
  box-sizing: border-box;
  border-radius: 3px;
  /* padding: 14px 23px; */
  color: white;
}

JavaScript

var totalMana = 500;
var CurrentMana = 500;
var manaPerSec = 3.5;
$(".mana_points").html(CurrentMana + " / " + totalMana);
$(".mana_bar").css({
    "width": (CurrentMana / totalMana) * 100 + "%"
})

$("#ten").click(function(){
    manaPerSec = 10;
    $(".mana_persec").html("+" + manaPerSec);
});

$("#one").click(function(){
    manaPerSec = 3.5;
    $(".mana_persec").html("+" + manaPerSec);
});

setInterval(function () {
    if (CurrentMana < totalMana) {
        CurrentMana = CurrentMana + manaPerSec;
        $(".mana_bar").animate({
            "width": (CurrentMana / totalMana) * 100 + "%"
        }, 500);
        $(".mana_points").html(CurrentMana + " / " + totalMana);
        $(".mana_persec_wrapper").css({
            "display": "block",
            "opacity": "1"
        });
    } else {
        $(".mana_points").html(totalMana + " / " + totalMana);
        $(".mana_persec_wrapper").animate({
            "opacity": "0"
        }, 500);
        $(".mana_bar").animate({
            "width": 100 + "%"
        }, 500);
    }
}, 1000);

/* Lose mana */
$("#lose_mana").click(function () {
    if (CurrentMana >= 200) {
        CurrentMana = CurrentMana - 200;
    } else {
        alert("not enough mana");
    }
});