scrimba
Build an RPG
Build a role-playing game part 2 - Constructor functions
Amalgamate the objects
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

Amalgamate the objects
AboutCommentsNotes
Amalgamate the objects
Expand for more info
index.js
run
preview
console
function getDiceRollArray(diceCount) {  
return new Array(diceCount).fill(0).map(function(){
return Math.floor(Math.random() * 6) + 1
});
}

/*
CHALLENGE
-Create a new const called characterData and set it equals to an
object which holds both our hero and monster objects.

-Think about how we access the data from our new object
when we set up new characters down at the very bottom of the app.
-See if you can work out what needs to change there to keep the
app working.
*/

const hero = {
elementId: "hero",
name: "Wizard",
avatar: "images/wizard.png",
health: 60,
diceCount: 3
}

const monster = {
elementId: "monster",
name: "Orc",
avatar: "images/orc.png",
health: 10,
diceCount: 1
}

function Character(data) {
Object.assign(this, data)

this.getDiceHtml = function(diceCount) {
return getDiceRollArray(diceCount).map(function(num){
return `<div class="dice">${num}</div>`
}).join('')
}

this.getCharacterHtml = function () {
const { elementId, name, avatar, health, diceCount } = this;
let diceHtml = this.getDiceHtml(diceCount);

return `
<div class="character-card">
<h4 class="name"> ${name} </h4>
<img class="avatar" src="${avatar}" />
<div class="health">health: <b> ${health} </b></div>
<div class="dice-container">
${diceHtml}
</div>
</div>`;
}
}


function render() {
document.getElementById(wizard.elementId).innerHTML = wizard.getCharacterHtml();
document.getElementById(orc.elementId).innerHTML = orc.getCharacterHtml();
}

/*Does something here need to change?*/
const wizard = new Character(hero)
const orc = new Character(monster)
render()
Console
/index.html
-3:17