обновление классов JavaScript с использованием литералов шаблонов

У меня ограниченное понимание классов JavaScript, и мне трудно найти хорошие ресурсы о них, которые помогли бы мне с моим проектом.

Я создал следующие классы для пошаговой игры;

class Player {
    constructor(name, image, location, isTurn) {
      this.name = name;
      this.image = image;
      this.location = location;
      this.isTurn = isTurn;
      this.cssClass = "player";
      this.weapon = "unarmed";
      this.health = 100;
  
      //deal with default weapon here
    }
    // get css class
    getCSSClass() {
        return this.cssClass;
      }
      getPosition() {
          return this.location;
        }
  
      // set position
      setPosition(identifier) {
         this.location = identifier;
         return this.location.toString();
      }
    }
    
  
  let player1 = new Player("player2", "css/player1.png", "", true);
  let player2 = new Player("player2", "css/player2.png", "", false);

Я также сделал функцию для появления игрока в случайном месте на доске. Каждая плитка имеет уникальный пронумерованный идентификатор (от 1 до 150). Функция случайных чисел работает нормально.

ниже моя функция появления, с которой у меня проблемы;

function spawnPlayer(n, identifier) {
    let playerSpawn = document.getElementById(identifier);
    playerSpawn = playerSpawn.id;
    console.log(playerSpawn)


    if (occupied.includes(playerSpawn) == true) {

    spawnPlayer(n, identifier);

    } else {
       
   `player${n}`.setPosition(playerSpawn);
    console.log(("player" + `${n}`).getPosition());
    playerArray.shift();
    playerArray.unshift(playerSpawn.id);
    playerSpawn.classList.add("player");
    playerSpawn.classList.add("player" + n.toString());
    //console.log("player" + n);
    //console.log(player2.image);
    playerSpawn.style.setProperty(
        "background-image",
        "url(css/player" + n + ".png)"
    );
    playerSpawn.style.setProperty("background-size", "cover");
    }
}
spawnPlayer(1, randomise());

у меня возникли проблемы с пониманием того, как использовать литералы шаблонов таким образом, чтобы я мог повторно использовать эту функцию как для игрока 1, так и для игрока 2 в качестве аргументов.

`player${n}`.setPosition(playerSpawn);

это то, что вызывает у меня проблемы. Моя текущая ошибка

Uncaught TypeError: n.setPosition не является функцией в spawnPlayer

Будем очень признательны за любую помощь, а также если кто-нибудь может порекомендовать какой-нибудь материал, который исследует реализацию класса JavaScript, который был бы очень полезен.

Благодарю вас


javascript template-literals
person newby webber    schedule 13.08.2020    source источник
comment
`player${n}` является строкой и не имеет идентификатора для экземпляров player1 или player2.   -  person Jan Stránský    schedule 13.08.2020
comment
Помимо ответа Лайонела, вы можете использовать объект global: let player1 = global.player1 = new Player(...); console.log(global["player1"])   -  person Jan Stránský    schedule 13.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Установите player1 и player2 как свойства некоторого объекта. Затем вы можете получить к ним динамический доступ:

const obj = {
  player1: new Player(...),
  player2: new Player(...),
}

// ...

obj[`player${n}`].setPosition(playerSpawn)
person Lionel Rowe    schedule 13.08.2020
comment
Или вы можете использовать массив и получить доступ к игрокам по их индексу - person Jan Stránský; 13.08.2020