scrimba
Create an RPG game - Rob Sutcliffe
Placeholder Dice
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

Placeholder Dice
by
AboutCommentsNotes
Placeholder Dice
by
Expand for more info
Character.js
run
preview
console
// 1. Make the current dice roll be all zeros when we first load each character.
// 2. Add a ternary to the dice element so it has a class of no-score when the score is zero.
import { getDiceRollArray, sumArray, getPercentage } from "./utils";

function Character(data) {

Object.assign(this, data);

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

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

this.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>`;
};

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

this.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
-2:50