Скрыть элемент в p5.js не работает так, как ожидалось

#javascript #p5.js

Вопрос:

Я создаю эту игру, в которой у игроков есть возможность выбрать своего персонажа. В sketch.js файл выглядит примерно так:

 if (gameState === 1) { //player chooses his/her character
      for (var i = 0; i < mazeWalls.length; i  ) {
        mazeWalls[i].visible = false;
      }
      /** Creating a character form.
       */
      charChosing = new CharacterForm();
    } else
      if (gameState === 2) { //player plays the game
        clear();
        charChosing.hide();
        playerObj.sprite.visible = true;
        form.hide();
        for (var i = 0; i < mazeWalls.length; i  ) {
          mazeWalls[i].visible = true;
          //player.collide(mazeWalls[i]);
        }
 

Здесь, когда состояние игры равно 1, игрок выбирает персонажа, нажав на одну из кнопок. При нажатии на кнопку состояние игры становится равным 2, и кнопки должны быть скрыты. Функция скрытия определена в определении класса.

Код для формы символов класса выглядит следующим образом:

 class CharacterForm {
    constructor() {
        this.button1 = createButton("c1");
        this.button1.position(250, 300);
        this.button2 = createButton("c2");
        this.button2.position(300, 300);
        this.button3 = createButton("c3");
        this.button3.position(350, 300);
        this.button4 = createButton("c4");
        this.button4.position(400, 300);
        this.button1.mousePressed(() => {
            gameState = 2;
            playerObj.character = "ch1";
            this.button1.hide();
            this.button2.hide();
            this.button3.hide();
            this.button4.hide();
        });
        this.button2.mousePressed(() => {
            gameState = 2;
            playerObj.character = "ch2";

            this.button1.hide();
            this.button2.hide();
            this.button3.hide();
            this.button4.hide();
        });
        this.button3.mousePressed(() => {
            gameState = 2;
            playerObj.character = "ch3";

            this.button1.hide();
            this.button2.hide();
            this.button3.hide();
            this.button4.hide();
        });
        this.button4.mousePressed(() => {
            gameState = 2;
            playerObj.character = "ch4";

            this.button1.hide();
            this.button2.hide();
            this.button3.hide();
            this.button4.hide();
        });
    }
    hide() {
        this.button1.hide();
        this.button2.hide();
        this.button3.hide();
        this.button4.hide();
    }
}
 

Дело в том, что кнопки все еще видны после вызова функции скрыть. Пожалуйста, помогите.

Ответ №1:

Создайте отдельное условие if вместе с кодом:

 if(gameState === "2") {
    playerObj.character = "ch3";

    this.button1.hide();
    this.button2.hide();
    this.button3.hide();
    this.button4.hide();
}