Блог

Я пишу приложение для игры в крестики-нолики на Javascript, HTML и CSS, где я должен практиковать размещение всех своих функций внутри модулей или фабрик. В настоящее время у меня возникла проблема с доступом к объекту, созданному фабрикой, внутри других модулей.

Мой полный код можно найти здесь:https://codepen.io/wulfenn/pen/xxVqGrW

Разбивка моего кода:

У меня есть два модуля и одна фабрика; gameBoard это модуль, отвечающий за все, что связано с платой. (чтение платы, изменение платы, визуальные эффекты и т.д.)

game Модуль отвечает за функциональность (запуск новых раундов, обработка ходов игроков, проверка победителей и т.д.)

Наконец, Player это моя фабрика для создания новых игроков и имеет простую функциональность, такую как извлечение имени или получение присвоенной ему метки. (X или O)

Проблема, с которой я сталкиваюсь в настоящее время, заключается в создании проигрывателя с const p1 = Player('P1Name', 'X') внутри game модуля, в частности soloPlay() функции внутри него. Если я попытаюсь получить к нему доступ в указанной функции, у меня не возникнет проблем, но остальной код не сможет получить к нему доступ.

Если бы я должен был создать const p1 = Player('P1Name', 'X') за пределами моей фабрики и модулей, весь код мог бы получить к нему доступ. Но проблема в том, что мне нужно иметь возможность создавать новый проигрыватель в soloPlay() функции внутри game модуля.

Как я могу выполнить вызов soloPlay() и при этом иметь доступ к объектам P1 и P2 вместе с их функциями вне кода?

Спасибо за вашу помощь, и я прошу прощения, если мой код загроможден или беден, я все еще учусь.

Соответствующий код, если вы не хотите просматривать весь мой проект:

soloPlay() внутри игрового модуля.

   // Our second menu for solo play, to set the P1 name, and start the game once done.
  const soloPlay = () => {
    const enterBtn = document.querySelector('.enter-btn');
    enterBtn.addEventListener('click', function () {
      const p1 = Player(document.querySelector('.p1').textContent, 'X');
      const p2 = Player('AI', 'O');
      const soloMenu = document.querySelector('.solo-menu');
      soloMenu.style.display = 'none';
      const gameMenu = document.querySelector('.menu-bg');
      gameMenu.style.display = 'none';
      game.setup(); // Sets our grid listeners
      game.newRound(); // Starts a new round.
    });
  }
  

Фабрика плееров

 /* Our player factory in charge of creating new players, and assigning them functions to obtain their names and marks */

const Player = (name, mark) => {
  const hasTurn = true;
  const getName = () => name;
  const getMark = () => mark;

  return { getName, getMark, hasTurn };
}
  

Источник:https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const

Объявляя переменную const, определяет ее с помощью области видимости блока, что означает, что ничто за пределами функции, которая ее создала, не сможет ее увидеть … в случае ваших игроков вы не меняете фабрику плееров, вы создаете ее экземпляр при объявлении, const p1 = Player.... поэтому p1 создается в soloPlay и недоступен для любой другой части кода … если вы объявляете p1 и p2 как глобальные (вне любой другой области или внутри области, которую вы выбираете, что имеет смысл для кода), а не объявляете их так, как const должна работать ваша игра.

 //This goes outside 'const gameBoard'
var p1;
var p2;
  

И не объявлять здесь p1 и p2 как const :

 const soloPlay = () => {
    const enterBtn = document.querySelector('.enter-btn');
    enterBtn.addEventListener('click', function () {
      p1 = Player((document.querySelector('#p1').value), 'X');
      console.log('Jugador 1: ' p1.getName());
      p2 = Player('AI', 'O');
      console.log('Jugador 2: ' p2.getName());
      const soloMenu = document.querySelector('.solo-menu');
      soloMenu.style.display = 'none';
      const gameMenu = document.querySelector('.menu-bg');
      gameMenu.style.display = 'none';
      game.setup(); // Sets our grid listeners
      game.newRound(); // Starts a new round.
    });
  }