Почему не работает метод класса?

Question

[DuBFx]

Не работает метод класса checkForMatch

class CardClass {
  constructor() {
    this.flippedCards = 0;
    this.hasFlippedCard = false;
    this.lockBoard = false;
    this.firstCard;
    this.secondCard;
    this.scoreContainer = document.getElementById("score");
    this.score = 0;
    this.boardSize = getRadioValue();
  }
  createBoard() {
    if (this.score !== 0) {
      this.score = 0;
    }
    if (timer.time !== 0) {
      timer.time = 0;
      timer.seconds = 0;
      timer.minutes = 0;
    }
    this.scoreContainer.innerHTML = `Score is ${this.score}`;
    this.boardSize = getRadioValue();

    const container = document.getElementById("memory_board");
    const slicedColorsArr = colorsArray.slice(
      0,
      this.boardSize * this.boardSize
    );
    const randomSlicedColorArr = shuffleCards(slicedColorsArr);

    for (let i = 0; i < this.boardSize; i++) {
      const row = document.createElement("div");

      row.classList.add("row");
      container.appendChild(row);

      for (let j = 0; j < this.boardSize; j++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        row.appendChild(cell);

        const card = document.createElement("div");
        card.classList.add("card");
        card.value = randomSlicedColorArr[this.boardSize * i + j];
        card.id = this.boardSize * i + j;
        const backFace = document.createElement("div");
        backFace.classList.add("back-face");

        const frontFace = document.createElement("div");
        frontFace.style.background = card.value;
        frontFace.classList.add("front-face");

        card.appendChild(backFace);
        card.appendChild(frontFace);
        cell.appendChild(card);
        card.addEventListener("click", this.flipCard);
        card.addEventListener("click", timer.startTime);
      }
    }
  }

  flipCard(e) {
    if (this.lockBoard) return;

    const card = e.currentTarget;
    card.classList.add("flip");

    if (!this.hasFlippedCard) {
      this.hasFlippedCard = true;
      this.firstCard = card;
      return;
    }
    this.secondCard = card;
    this.hasFlippedCard = false;

    this.checkForMatch();
  }

  checkForMatch() {
    if (
      this.firstCard.value === this.secondCard.value &&
      this.firstCard.id !== this.secondCard.id
    ) {
      this.score += 1;
      this.scoreContainer.innerHTML = `Score is ${this.score}`;
      this.removeFlipCards();
      this.flippedCards += 2;
      if (this.flippedCards === Math.pow(this.boardSize, 2)) {
        timer.stopTime();
        const radioButtons = document.getElementsByName("difficulty");
        radioButtons.forEach(radioButton => {
          radioButton.checked = false;
        });
        const user = JSON.parse(localStorage.getItem(table.keyUser));
        user.score = this.score;
        localStorage.setItem(table.keyUser, JSON.stringify(user));
        table.addRecordToTable();
        const toast = document.getElementById("toast");
        const desc = document.getElementById("desc");
        desc.innerHTML = `Congratulations!!! Your score is ${
          this.score
        }, time is ${timer.timer.innerText}`;
        toast.classList.add("show");
        setTimeout(() => {
          toast.className = toast.className.replace("show", "");
        }, 5000);
        table.seeRecordsTable();
      }
    } else {
      this.score -= 1;
      this.scoreContainer.innerHTML = `Score is ${this.score}`;
      this.unFlippedCards();
    }
  }

  unFlippedCards() {
    this.lockBoard = true;
    setTimeout(() => {
      this.firstCard.classList.remove("flip");
      this.secondCard.classList.remove("flip");
      this.lockBoard = false;
      this.resetBoard();
    }, 1500);
  }

  resetBoard() {
    [this.hasFlippedCard, this.lockBoard] = [false, false];
    [this.firstCard, this.secondCard] = [null, null];
  }

  removeFlipCards() {
    this.firstCard.classList.add("hidden");
    this.secondCard.classList.add("hidden");
  }
}

const colorsArray = [
    '#CD5C5C', '#CD5C5C', '#DC143C', '#DC143C',
    '#FF0000', '#FF0000', '#8B0000', '#8B0000',
    '#FFC0CB', '#FFC0CB', '#FF69B4', '#FF69B4',
    '#C71585', '#C71585', '#DB7093', '#DB7093',
    '#FFA07A', '#FFA07A', '#FF8C00', '#FF8C00',
    '#FFFF00', '#FFFF00', '#FFFACD', '#FFFACD',
    '#F0E68C', '#F0E68C', '#D8BFD8', '#D8BFD8',
    '#3CB371', '#3CB371', '#40E0D0', '#40E0D0',
    '#9370DB', '#9370DB', '#9932CC', '#9932CC',
    '#6A5ACD', '#6A5ACD', '#D2691E', '#D2691E',
    '#000000', '#000000', '#C0C0C0', '#C0C0C0',
    '#191970', '#191970', '#ADFF2F', '#ADFF2F',
    '#FFFF00', '#FFFF00', '#0000FF', '#0000FF' ,
    '#FF00FF', '#FF00FF', '#BC8F8F', '#BC8F8F',
    '#B8860B', '#B8860B', '#A52A2A', '#A52A2A',
    '#D2B48C', '#D2B48C', '#00FF7F', '#00FF7F'
];

let card = new CardClass();
card.createBoard();

Comments

[Ярослав Иванов]

Любители запихнуть процедурную ногу в объектно-ориентированный ботинок

[DuBFx]

Ярослав Иванов, подскажите пожалуйста, как в данном случае из процедурной ноги сделать объектно-ориентированную?

[Сергей Сунцев]

Эм, откуда вы этот класс достали?
getRadioValue - где определяется?
colorsArray - как вы это передаете в метод?

[Ярослав Иванов]

DuBFx, почитайте "совершенный код"

[DuBFx]

Сергей Сунцев, getRadioValue берется из другого файла additional.js

const getRadioValue = () => {
    const radioBtns = document.getElementsByName("difficulty");
    let result;
    radioBtns.forEach(radio => {
        if (radio.checked) {
            result = radio.value;
        }
    });
    return parseInt(result);
};

const shuffleCards = (cards) => {
    for (let i = cards.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = cards[i];
        cards[i] = cards[j];
        cards[j] = temp;
    }
    return cards;
};

Выше описан класс из файла cardClass.js
Массив colorsArray передается в файле index.js

const colorsArray = [
    '#CD5C5C', '#CD5C5C', '#DC143C', '#DC143C',
    '#FF0000', '#FF0000', '#8B0000', '#8B0000',
    '#FFC0CB', '#FFC0CB', '#FF69B4', '#FF69B4',
    '#C71585', '#C71585', '#DB7093', '#DB7093',
    '#FFA07A', '#FFA07A', '#FF8C00', '#FF8C00',
    '#FFFF00', '#FFFF00', '#FFFACD', '#FFFACD',
    '#F0E68C', '#F0E68C', '#D8BFD8', '#D8BFD8',
    '#3CB371', '#3CB371', '#40E0D0', '#40E0D0',
    '#9370DB', '#9370DB', '#9932CC', '#9932CC',
    '#6A5ACD', '#6A5ACD', '#D2691E', '#D2691E',
    '#000000', '#000000', '#C0C0C0', '#C0C0C0',
    '#191970', '#191970', '#ADFF2F', '#ADFF2F',
    '#FFFF00', '#FFFF00', '#0000FF', '#0000FF' ,
    '#FF00FF', '#FF00FF', '#BC8F8F', '#BC8F8F',
    '#B8860B', '#B8860B', '#A52A2A', '#A52A2A',
    '#D2B48C', '#D2B48C', '#00FF7F', '#00FF7F'
];

let card = new CardClass();
card.createBoard();