Click on the example then use WASD or the arrow keys to move around. Moving will drain Slimy's energy, whilst resting will restore it. Note: the screen wraps around so you can just run in one direction forever.
Fully understand the concept by watching the tutorial in full screen at high res.
Once you have watched the video, you can refer to the code below to help you make your own that fits your game. Make sure you type it yourself to help you learn.
When making a health bar, energy bar, or any kind of stat bar, the first thing is to make sure you store the value, such as energy, as well as a max value.
You can then make any adjustments to it you like during the update function, like reducing it on an enemy hit etc.
Finally, you can draw the bar (see below), in this case above the player's head.