scrimba
Create an RPG game - Rob Sutcliffe
Dangerous Health Bar
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Dangerous Health Bar
by
AboutCommentsNotes
Dangerous Health Bar
by
Expand for more info
Character.js
run
preview
console
import { getDiceRollArray, sumArray, getPercentage } from "./utils";

function Character(data) {

Object.assign(this, {
...data,
currentDiceRole: [],
maxHealth: data.health,
rollDice: function() {
this.currentDiceRole = getDiceRollArray(this.diceCount);
return sumArray(this.currentDiceRole);
},

takeDamage: function(damage) {
this.health -= damage;
if(this.health <= 0) {
this.dead = true;
this.health = 0;
}
},

// use a ternary opperator to add a conditional
// where if the percentage is below 25% the health-bar-inner
// should have an extra class "danger"
getHealthBarElement: function() {
const percent = getPercentage(this.health, this.maxHealth);
return `<div class="health-bar-outer">
<div class="health-bar-inner" style="width:${percent}%;">
</div>
</div>`;
},

getDiceElementArray: function() {
return this.currentDiceRole.map((num) => `<div class="dice">${num}</div>`);
},

getTemplate: function() {
const { name, emoji, health } = this;
const diceElementArray = this.getDiceElementArray();
const healthBarArray = this.getHealthBarElement();

return `<div class="character">
<div class="name">${name}</div>
<div class="emoji">️${emoji}</div>
<div class="health">health: <b>${health}</b></div>
${healthBarArray}
<div class="dice-container">
${diceElementArray.join("")}
</div>
</div>`;
}
});

};

export default Character;
Console
/index.html
-1:06