add Feature function.js (feature-function.js)

[yko-git]

function.jsの編集 (feature-function.js)

[version-1]

const itemsItem = document.querySelectorAll(".items-item");
const board = document.querySelector(".l-board");
const jsCell = document.querySelectorAll(".js-cell");
const state = document.querySelector(".js-state");
const jsReset = document.querySelector(".btn-restart");
const winPatterns = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

const cells = ['', '', '', '', '', '', '', '', '']

const countFunc = (() => {
  let count = 0;

  return {
    inner: () => {
      return count++;
    },
  };
})();

// イベントの登録
jsCell.forEach(function (cell, index) {
  cell.addEventListener("click", () => {
    if (cells[index]) {
       return
    }
    
    const count = countFunc.inner();
    
    const circleTurn = count % 2 !== 0
    const inputValue = circleTurn ? '◯' : 'x'
    
    ele.innerHTML = inputValue
    cells[index] = inputValue
    
    toggleTurn(itemsItem);

    const judged = judge(cells);
    
    if (judged) {
       message(inputValue)
    }
    
     // 揃わずに全てのセルが埋まったら メッセージをdrawに
     if (countFunc.inner() === 9) {
       state.innerHTML = "draw";
     }
  });
});

// 判定
const judge = (judgeCell) => {
  for (let i = 0; i < winPatterns.length; i++) {
    if (
      judgeCell[winPatterns[i][0]] === "○" &&
      judgeCell[winPatterns[i][1]] === "○" &&
      judgeCell[winPatterns[i][2]] === "○"
    ) {
      return true;
    }
    
    if (
      judgeCell[winPatterns[i][0]] === "×" &&
      judgeCell[winPatterns[i][1]] === "×" &&
      judgeCell[winPatterns[i][2]] === "×"
    ) {
      return true;
    }
  }
  
  return false
};

// セルをクリックするごとにitemsのactiveを切り替える
const toggleTurn = (items) => {
  for (let item of items) {
    item.classList.toggle("is-active");
  }
};

// どちらかが揃ったら メッセージをwinに
const message = (mark) => {
  state.innerHTML = `${mark} win`;
};

[yko-git]

@version-1 相談させていただけますでしょうか。
ele.innerHTML = inputValue
はどういった意図で設定しているのかわからず教えていただけますでしょうか。
eleはjsCellのforEachの引数celをイメージしているのですが、
cell.innerHTML = inputValue;
だと動きませんでした。

[version-1]

すみません。 ご指摘のように

cell.innerHTML = inputValue

が正しいです。

ここを直しても全ては動かず他にも誤りがありますね。。。

ちょうど良いデバックの教材かと思いますので、どこが良くないのか見つけて修正できると良いと思います。ポイントとしては、「Jiro がここを触っていたからここかな？」という探し方よりはdebugger を使って、「この行ではこの値がこうなっているからここが間違っている」というように原因を特定できると良いです。

[version-1]

コメントの場所が違いますね。

[version-1]

ゲームが終わっているかは dom に情報を残すのではなく、変数で定義してあげると良いかと思います。