6

I am trying to make my own version of a pokemon game using very simple HTML and JavaScript.

So far, I have everything covered, except the health bar. How do I make an entity in my code, that will represent a bar, and when the opposing team selects a move, the health bar goes down?

Would I use a bunch of small div's?

Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
user3047715
  • 73
  • 1
  • 1
  • 4
  • 3
    How are you drawing things; using a canvas or just floating elements or ASCII? Your question is too vague to get an answer. – JDong Nov 29 '13 at 01:29
  • @JDong given the considered solution, I assume DHTML, not canvas. Also, it should be quite straightforward with canvas. But you are right - this should be clarified by the asker. – John Dvorak Nov 29 '13 at 01:31
  • I also assume you are asking about the rendering part only? The internal model representation should be obvious and up to you. – John Dvorak Nov 29 '13 at 01:34
  • @JDong, I'm quite new to programming, especially to this language, I just signed up for the class at my school, so I honestly have no idea what you are talking about. Sorry if I wasn't able to clarify enough. – user3047715 Nov 29 '13 at 02:00

3 Answers3

15

I would recommend a HTML progress bar:

<progress id="health" value="100" max="100"></progress>

And when they lose/gain health, do run this Javascript code:

let health = document.getElementById("health")
health.value -= 10; //Or whatever you want to do with it.
MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
  • 1
    Thank you very much, this looks better than the bootstrap plugin down below. – user3047715 Nov 29 '13 at 02:01
  • For completeness, there is also [JQuery's progressbar](http://jqueryui.com/progressbar/) for older browsers. Note that you don't need to download anything to use JQuery. [See here](http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn). – Domi Nov 29 '13 at 08:26
  • Love it! Perfect for what I was looking for is there any way to make it have circular borders? – Rahul Sonwanshi Mar 04 '20 at 17:59
3

You could try Bootstrap's progress bar component.

MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
Marc
  • 416
  • 3
  • 8
-1

Im working on a game too using nodejs pure js and a lot of libraries i recommend you use a percentage as the bar will cover the content

Ren Lowsphere
  • 7
  • 1
  • 3
  • simple answer might not be helpful. could you please post some example code? – Shuduo Aug 07 '21 at 01:08
  • Sure , you could add to a span as an ex:( 100% ) then simply start the action in js:
    hp = document.getElementById("health").innerHTML; damage = hp - 15; document.getElementById("health").innerHTML = damage; That's simply how you would put damage into action using a 100 health points     – Ren Lowsphere Aug 08 '21 at 07:54