Trying To Make An HP Bar For A Game Using HTML/JavaScript

I'm trying to make a health bar for a game where I have 2 buttons linked to the bar, one adds damage and the other adds health. I have it all designed the way I want it but am havi

Solution 1:

In your example you merely change the output but never the actual health width itself. Here is a quick analysis

function add() {
    //REM: You fetch the element correctly;
    let addHealth = document.getElementById('health')
    //REM: You reset the heath to 100 for some reason?
    let width = 100;
    //REM: You change a width property of the element?
    //REM: Here you should reduce the value of width
    addHealth.width += 1;

    if (addHealth) {
        //REM: You set the width of the element according to the health, which seems correct
        addHealth.style.width = width + '%'; 
        //REM: You set the displayed value to 100, since width always gets set to 100 inside the function
        addHealth.innerHTML = width * 1  + 'hp';
    }
}

The most simple way is to store the health in a seperate variable and build on that.

var _Health = 100; //REM: Default HP

function add() {
	let addHealth = document.getElementById('health')
	_Health += 1;

	if (addHealth) {
		addHealth.style.width = _Health + '%'; 
    	addHealth.innerHTML = _Health + 'hp';
    }
}

function remove() {
	let damage = document.getElementById('health')
	_Health -= 1;

	if(damage) {
		damage.style.width = _Health + '%'; 
   	 	damage.innerHTML = _Health + 'hp';
	}
}

.hp {
	text-align: center;
	padding-bottom: 50px;
}

.gage {
	display: inline-block;
	width: 500px;
	padding-bottom: 30px;
}

.bar { 
	height: 60px;
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.bar > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.lvl {
  background-color: #078a25;
  background-image: linear-gradient(to bottom, #078a25, #f36d0a);
}

#health {
	font-size: 20px;
	color: white;
	font-weight: bold;
	text-align: right;
}

.btn-3d {
	position: relative;
	display: inline-block;
	font-size: 22px;
	padding: 20px 60px;
	color: white;
	margin: 20px 10px 10px;
	border-radius: 6px;
	text-align: center;
	transition: top .01s linear;
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
	cursor: pointer;
}

.btn-3d.green:hover  {background-color: #80C49D;}

.btn-3d:active {
	top: 9px;
}

.btn-3d.green {
	background-color: #82c8a0;
	box-shadow: 0 0 0 1px #82c8a0 inset,
				0 0 0 2px rgba(255,255,255,0.15) inset,
				0 8px 0 0 rgba(126, 194, 155, .7),
				0 8px 0 1px rgba(0,0,0,.4),
				0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
	box-shadow: 0 0 0 1px #82c8a0 inset,
				0 0 0 2px rgba(255,255,255,0.15) inset,
				0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.red:hover    {background-color: #e74c3c;}

.btn-3d.red {
	background-color: #e74c3c;
	box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
				0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
	box-shadow: 0 0 0 1px #c63702 inset,
				0 0 0 2px rgba(255,255,255,0.15) inset,
				0 0 0 1px rgba(0,0,0,0.4);
}

<div class="hp">
		<div class="gage">
			<div class="bar">
				<span id="health" class="lvl" style="width: 100%">100hp</span>
			</div>
		</div>
		<div class="click">
			<span class="btn-3d green" onclick="add()">Health</span>
			<span class="btn-3d red" onclick="remove()">Damage</span>
		</div>
	</div>

Solution 2:

Change the JS to:

let width=100;

function add() {
    let addHealth = document.getElementById('health')
    width +=1;

    if (addHealth) {
        addHealth.style.width = width + '%'; 
        addHealth.innerHTML = width * 1  + 'hp';
    }
}

function remove() {
    let damage = document.getElementById('health')
    width-=1;

    if(damage) {
        damage.style.width = width + '%'; 
        damage.innerHTML = width - 1  + 'hp';
    }
}

You had to make the variable width a global variable. And actually add and subtract from that variable.

Solution 3:

You can try this

    let width = 100;

function add() {
let addHealth = document.getElementById('health')
    width =width+ 1 
    width=width>100?width=100:width
    if(addHealth){
        addHealth.style.width = width + '%'; 
        addHealth.innerHTML = width  + 'hp';
    }
}

function remove() {
    let damage = document.getElementById('health')
    width =width- 1
    width=width<0?width=0:width

    if(damage) {
        damage.style.width = width + '%'; 
        damage.innerHTML = width  + 'hp';
    }
}

Solution 4:

it's better to use the object to control the limitation.

  const healthObject = {
      _currentHelth: 100,
      getHealth: function () {
        return this._currentHelth
      },
      increase: function () {
        if (this._currentHelth < 100) {
          this._currentHelth++
        }
      },
      decrease: function () {
        if (this._currentHelth > 0) {
          this._currentHelth--
        }
      },
    }

    function add() {
      let addHealth = document.getElementById('health')
      healthObject.increase()
      if (addHealth) {
        addHealth.style.width = healthObject.getHealth() + '%'
        addHealth.innerHTML = healthObject.getHealth() + 'hp'
      }
    }

function remove() {
  let addHealth = document.getElementById('health')
  healthObject.decrease()
  if (addHealth) {
    addHealth.style.width = healthObject.getHealth() + '%'
    addHealth.innerHTML = healthObject.getHealth() + 'hp'
  }
}