Health Bar Example

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

/* Define a container that will hold the health bar. The contents inside it will be updated when the character takes damage or is healed (when the buttons are clicked). This will allow the value to change even if the passage isn't reloaded. */ <div id="health-bar"> /* Call the widget defined in teh Widgets passage, which displays the health bar at its current value This will happen when the passage loads */ <<healthbar>> </div> <<button "Damage">> /* Reduce $health by 5, but use Math.clamp to make sure it stays between 0 and the maximum health value. */ <<set $health = Math.clamp($health - 5, 0, 100)>> /* If you are using $maxHealth instead, do this: <<set $health = Math.clamp($health - 5, 0, $maxHealth)>> */ /* Next, use the <<replace>> macro to grab the <div> element that contains the health bar. What's between the quotes should match the ID of that <div> element, only it needs the "#" sign in front of it to tell the <<replace>> macro you're retrieving the element by its ID value. */ <<replace "#health-bar">> /* Call the Widget you defined in here. This will replace the div's current content with whatever the widget outputs - in this case, the updated health bar. */ <<healthbar>> <</replace>> <</button>> /* This button will raise the $health value, but the concepts are exactly the same as above: update the value while making sure it stays within bounds, then replace the div's content with an updated version of the health bar. */ <<button "Heal">> <<set $health = Math.clamp($health + 5, 0, 100)>> <<replace "#health-bar">> <<healthbar>> <</replace>> <</button>>

/* This will run when the story begins, so set these values to what they should be initially. If the Maximum health is fixed and won't chang,e you don't need to define $maxHealth; you'll just use that number in the rest of the game instead of a variable. */ <<set $maxHealth = 100>> <<set $health = $maxHealth>>

/* This widget draws the actual health bar when it is called. The @ symbol before the 'value' attribute tells SugarCube to evaluate what is between the quotes as if it is Twine Script. So, the value attribute will be set to the current value of the $health variable instead of being interpretted literally as "$health" */ <<widget "healthbar">> <progress max="100" @value="$health"></progress>> <</widget>> /* If you also want the maximum value of health to be variable, you could make that attribute pull from a $maxHealth variable: <progress @max="$maxHealth" @value="$health"></progress> $maxHealth will - of course - need to be defined first, as $health needs to be */