HTML+CSS+JavaScript でシンプルな三目並べゲームを作成する

<link rel="スタイルシート" href="style.css" rel="外部nofollow" >
<link rel="preconnect" href="https://fonts.gstatic.com" rel="外部nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="外部nofollow" rel="スタイルシート">
<script src="index.js"></script>

<メインクラス="背景">
        <セクションクラス="タイトル">
            <h1>三目並べ</h1>
        </セクション>
        <セクションクラス="display">
            プレイヤー <span class="display-player playerX">X</span> のターン</section>
        <セクションクラス="コンテナ">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </セクション>
        <section class="display announcementr hide"></section>
        <セクションクラス="コントロール">
            <button id="reset">再起動</button>
        </セクション>
    </メイン>

* {
    パディング: 0;
    マージン: 0;
    フォントファミリー: 'Itim'、筆記体;
}

。容器 {
    マージン: 0 自動;
    表示: グリッド;
    グリッドテンプレート列: 33% 33% 33%;
    グリッドテンプレート行: 33% 33% 33%;
    最大幅: 300px;
}

.タイル{
    境界線: 1px 白の実線;
    最小幅: 100px;
    最小高さ: 100px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    フォントサイズ: 50px;
    カーソル: ポインタ;
}

.playerX {
    色: #09C372;
}

.playerO {
    色: #498AFB;
}

window.addEventListener('DOMContentLoaded', () => {

});

const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
アナウンサー = document.querySelector('.announcer');

board = ['', '', '', '', '', '', '', '', '', '', ''] とします。
現在のプレイヤーを 'X' にします。
isGameActive を true にします。

定数 PLAYERX_WON = 'PLAYERX_WON';
定数 PLAYERO_WON = 'PLAYERO_WON';
定数TIE = 'TIE';

/*
   ボード内のインデックス
   [0] [1] [2]
   [3] [4] [5]
   [6] [7] [8]
*/

const 勝利条件 = [
   [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 isValidAction = (タイル) => {
    if (tile.innerText === 'X' || tile.innerText === 'O'){
        false を返します。
    }

    true を返します。
};

const updateBoard = (インデックス) => {
   ボード[インデックス] = currentPlayer;
}

定数changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`);
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    プレーヤーディスプレイ内のテキストを現在のプレーヤーに表示します。
    playerDisplay.classList.add(`player${currentPlayer}`);
}

const アナウンス = (型) => {
    スイッチ(タイプ){
       PLAYERO_WONの場合:
            announcementr.innerHTML = 'プレイヤー <span class="playerO">O</span> が勝利しました';
            壊す;
       PLAYERX_WONの場合:
            announcementr.innerHTML = 'プレイヤー <span class="playerX">X</span> が勝利しました';
            壊す;
       ケース TIE:
            announcementr.innerText = '同点';
        }
    アナウンサー.classList.remove('hide');
};

関数handleResultValidation() {
  roundWon を false にします。
  (i = 0; i <= 7; i++ とします) {
    定数 winCondition = 勝利条件[i];
    定数a = ボード[winCondition[0]];
    定数 b = ボード[winCondition[1]];
    定数 c = ボード[winCondition[2]];
    もし (a === "" || b === "" || c === "") {
      続く;
    }
    (a === b && b === c) の場合 {
      ラウンド勝利 = true;
      壊す;
    }
  }

  if (ラウンド勝利) {
    アナウンス(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
    isGameActive = false;
    戻る;
  }

  if (!board.includes("")) announcement(TIE);
}

const userAction = (タイル、インデックス) => {
  if (isValidAction(tile) && isGameActive) {
    tile.innerText = 現在のプレーヤー;
    tile.classList.add(`player${currentPlayer}`);
    ボードを更新します(インデックス);
    結果検証を処理します。
    プレイヤーを変更します。
  }
};

tiles.forEach( (タイル, インデックス) => {
    tile.addEventListener('click', () => userAction(tile, index));
});

const リセットボード = () => {
    ボード = ['', '', '', '', '', '', '', '', '', '', ''];
    ゲームがアクティブかどうか
    アナウンサー.classList.add('非表示');

    (現在のプレイヤー === 'O') の場合 {
        プレイヤーを変更します。
    }

    タイル.forEach(タイル => {
        タイル.innerText = '';
        tile.classList.remove('playerX');
        tile.classList.remove('playerO');
    });
}

resetButton.addEventListener('click', resetBoard);