scrimba
Create an RPG game - Rob Sutcliffe
Check for Life
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

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

function Character(data) {

Object.assign(this, {
...data,
currentDiceRole: new Array(data.diceCount).fill(0),
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;
}
},

getHealthBarElement: function() {
const percent = getPercentage(this.health, this.maxHealth);
return `<div class="health-bar-outer">
<div
class="health-bar-inner ${percent < 26 ? "danger" : ""}"
style="width:${percent}%;">
</div>
</div>`;
},

getDiceElementArray: function() {
return this.currentDiceRole.map((num) =>
`<div class="dice ${num ? "":"no-score"}">${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:29