Sorry Im just a begginer,
So I have this game being modified and the game output so far looks like this
The score is in the bottom, the one I encircled
I wanted to add a name to it
So far I just discovered how it was made, apparently, the creator made a loop wherein, for every player,there would be a score for them here's the code named scoreboard.js
constructor(players) {
this.scores = {};
let scorePosition = 200; // this changes the position of the scores in width
for (const player of players) {
console.log(player.name);//////////shows the player name in console
this.scores[player.name] = new Score(createVector(scorePosition, config.screen.height + 50));
//originally;
// this.scores[player.name] = new Score(createVector(scorePosition, config.screen.height + 50));
//replacing "config.screen.height" will change the height of scoreboard but in absolute position
scorePosition += 200; //this sets the distance of between space of scores
}
}
reset() {
for (const score in this.scores) {
this.scores[score].value = 0;
}
}
draw() {
for (const score in this.scores) {
this.scores[score].draw();
}
}
}
I added console.log(player.name); to the loop and this happens
As you can see, it writes the player's name (Player1,Player2,etc.)
The problem how do I get to write it next to their score?
Im sure there's supposed to be a code that I should put inside of that for loop instead of console.log
I tried document.write() or document.writeIn()
but I'm pretty sure that won't work
And Im sort of right
Ps.here is the code named score.js, it has connection to scoreboard.js I'm not sure if this information is helpful so I'll leave it here
class Score extends SpriteEntity {
constructor(position) {
super({
position,
sprites: [...Array(10).keys()].map(index => index.toString()),
imageSetup: image => image.resize(100, 100) //this changes the size of the box
});
this.value = 8;
//this is initial value of the score
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.sprite.changeImage(this.value);
} //this replaces the number according to its score
increment() {
++this.value;
}
}
Another ps: If you're wondering, the score is just an image named 0-9 .png
There are several ways you could this. You could use HTML+CSS like this:
<style>
#playernames {
width: 100%;
text-align: center;
}
#playernames > div {
border: none;
display: inline-block;
width: 100px; /* Change this to the score width */
text-align: center;
font: 14px Tahoma;
color: blue;
}
</style>
<div id="playernames"></div>
And change the content with:
var playernames = "";
for (const player of players) {
playernames += "<div>" +
player.name.replace(/[&<>"]/g, "") + // Strip Html sensitive characters
"</div>";
...
}
document.getElementById("playernames").innerHTML = playernames;