¿Cómo agrego texto en este bucle en javascript?

Ringorin:

Lo sentimos Im sólo un principiante,

Así que he este juego se está modificando y la salida hasta ese momento se parece a esto La puntuación está en la parte inferior, la que yo cercado

Quería añadir un nombre a él

Hasta ahora acabo de descubrir cómo se hizo, al parecer, el creador hizo un bucle en el que, para cada jugador, no habría una puntuación para ellos aquí está el código llamado 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();
        }
    }
}

He añadido console.log(player.name);al bucle y esto ocurre Como se puede ver, se escribe el nombre del jugador (Jugador 1, Player2, etc.)

El problema de cómo puedo llegar a escribir junto a su puntuación?

Estoy seguro de que no se supone que es un código que debería poner dentro de ese bucle en lugar de console.log

Probé document.write()o document.writeIn()pero estoy bastante seguro de que no va a funcionar Y Im especie de derecho

Ps.here es score.js los códigos de llamada, que tiene conexión con scoreboard.js No estoy seguro de si esta información es útil, así que lo dejo aquí

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;
    }

}

Otra PD: Si usted se está preguntando, la puntuación es sólo una imagen llamada 0-9 .png

Ariel:

Hay varias formas en las que podría esto. Se podría usar HTML + CSS como esto:

<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>

Y cambiar el contenido con:

var playernames = "";
for (const player of players) {
  playernames += "<div>" + 
    player.name.replace(/[&<>"]/g, "") + // Strip Html sensitive characters
    "</div>";
  ...
}
document.getElementById("playernames").innerHTML = playernames;