Code Example From Script-8 As Output

script-8-important-health.js

// Kino Rose
// NierPixe.com
// Zelda Heart, Health Bar Tutorial
//title: Heart Containers



init = (state) => {
  state.player = {
    health: 12,
    healthMaximum: 12,
    spr: 5
  }
  state.frameCount = 0
}


update = (state, input, elapsed) => {
 state.frameCount += 1
  
  //Show dynamic incrementation of player Health
  // Note with the Zelda Implementation, due to the way the sine wave works, you will never see full 3 hearts.
  state.player.health = clamp((state.player.healthMaximum * Math.abs(Math.sin(state.frameCount / 250))), 0, state.player.healthMaximum)
}

draw = (state) => {
  clear()
  drawLogoInformation()  
  drawPlayerHealthMinMax(state.player)
  drawPlayerHealthBar(state.player)
  drawPlayerHealthZeldaStyle(state.player)
}

function drawPlayerHealthZeldaStyle(player) {
  const playerfullHearts = Math.floor(player.health / 4) 
  const playerRemainderHeart = (player.health % 4 ) /4
  let xOffset = 0 
  const lineY = 72
  
  //Draws all the full hearts, simply because they are all similar to  each other
  range(0, playerfullHearts).forEach( heart => {
    xOffset = heart * 8
    sprite(0 + xOffset , lineY, 0)
  })
  
  
  //drawRemainderHeart
  //Update once more to place the heart next to the other hearts
  xOffset += 8
  /*
  * Given that the last heart is the only that should be different from the others
  * We evaluate it as a separate case from the others.
  * Therefore, we only need to check this one case only.
  * In the case of Zelda, each heart is broken up into pieces so we evaluate the quarters.
  * This allows us to create the final heart based on the remainder rather than whole numbers.
  */
  
  if(playerRemainderHeart >= 0.50) {
   sprite(0 + xOffset, lineY, 1) 
  }  else if(playerRemainderHeart >= 0.25) {
  
    sprite(0 + xOffset, lineY, 2)
  } else if(playerRemainderHeart > 0) {
    sprite(0 + xOffset, lineY, 3)
  } 
}

//Standard Style of Drawing Health as numbers
function drawPlayerHealthMinMax(player) {
  print(0, 36, `Player Health: ${Math.round(player.health)}/${player.healthMaximum}`)
}


//Draw Player Health as HealthBar
/*
* A bar is just a rectangle with a width. A health bar is usually represented as some number out
* of the maximum. Therefore, we can use the percentage of the player health to adjust the width
* of the bar to represent health. We create a bar below to make it more apparent that there is a
* cap on the player health and what the maximum is.
*/
function drawPlayerHealthBar(player) {
  const maxHealthBarWidth = 40
  const maxHealthBarHeight = 12
  const cappedHealthBar = clamp((maxHealthBarWidth * (player.health / player.healthMaximum)) - 4, 0, maxHealthBarWidth)
  rectFill(0, 48, maxHealthBarWidth, maxHealthBarHeight, 5)
  rectFill(2, 50, cappedHealthBar, maxHealthBarHeight - 4, 3)
  
}

function drawLogoInformation() {
  const title = "NierPixel.com"
  const creator = "Kino Rose"
  const tutorialName = "Zelda Heart + Health Bar Tutorial"
  const lineHeight = 8
  print(0, 0, title, 0)
  print(0, lineHeight, creator, 0)
  print(0, lineHeight * 2, tutorialName, 0)
}