井字棋游戏Tile点击无响应问题排查技术请求

开发的Tic-Tac-Toe（井字棋）游戏点击Tile时无任何响应、无内容显示，以下是完整代码及问题排查结果：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
<title>Tic-Tac-Toe</title>
</head>
<body>
    <main class="background">
        <section class="title">
            <h1>Tic Tac Toe</h1>
        </section>
        <section class="display">
            Player <span class="display-player X">X</span>'s turn
        </section>
        <section class="container">
            <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>
        <section class="display announcer hide"></section>
        <section class="controls">
            <button id="reset">Reset Game</button>
        </section>
    </main>
</body>
</html>

CSS代码 #

* {
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.background {
    background-color: pink;
    height: 100vh;
    padding-top: 1px;
}
.title {
    color: orange;
    text-align: center;
    font-size: 40px;
    margin-top: 1%;
}
.display {
    color: orange;
    font-size: 25px;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}
.hide {
    display: none;
}
.container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    max-width: 900px;
}
.tile {
    border: 5px solid orange;
    min-width: 100px;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    cursor: pointer;
}
.X {
    color: aquamarine;
}
.O {
    color: brown;
}
.controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#reset {
    background-color: orange;
    color: white;
    padding: 8px;
    border-radius: 8px;
    border: none;
    font-size: 20px;
    margin-left: 1em;
    cursor: pointer;
}

JavaScript代码 #

window.addEventListener('DOMContentLoaded', () => {
     const tiles = Array.from(document.querySelectorAll('.tile'));
     const playerDisplay = document.querySelector('.display-player');
     const resetButton = document.querySelector('#reset');
     const announcer = document.querySelector('.announcer');

     let board = ['', '', '', '', '', '', '', '', '',];
     let currentPlayer = X;
     let isGameActive = true;

     const X_WON = 'X_WON';
     const O_WON = 'O_WON';
     const TIE = 'TIE';

     const winningConditions = [
        [0, 1, 2]
        [3, 4, 5]
        [6, 7, 8]
        [0, 3, 6]
        [1, 4, 7]
        [2, 5, 8]
        [0, 4, 8]
        [2, 4, 6]
     ]

     function handleResultValidation() {
        let roundWon = false;
        for (let i = 0; i <= 7; i++) {
            const winCondition = winningConditions[i];
            const a = board[winCondition[0]];
            const b = board[winCondition[1]];
            const c = board[winCondition[2]];
            if (a === '' || b === '' || c === '') {
                continue;
            }
            if (a === b && b === c) {
                roundWon = true;
                break;
            }
        }

        if (roundWon) {
            announce(currentPlayer === 'X' ? X_WON : O_WON);
            isGameActive = false;
            return;
        }

        if (!board.includes(''))
        announce(TIE);
     }

     const announce = (type) => {
        switch(type){
            case O_WON:
                announcer.innerHTML = `Player <span class="O">O</span> Won`;
                break;
            case X_WON:
                announcer.innerHTML = `Player <span class="X">X</span> Won`;
                break;
            case TIE:
                announcer.innerText = 'Tie'
        }
        announcer.classList.remove('hide');
     };

     const isValidAction = (tile) => {
        if (tile.innerText === 'X' || tile.innerText === 'O'){
            return false;
        }
        return true;
     }

     const updateBoard = (index => {
        board[index] = currentPlayer;
     })

     const changePlayer = () => {
        playerDisplay.classList.remove(`player${currentPlayer}`);
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        playerDisplay.innerText = currentPlayer;
        playerDisplay.classList.add(`player${currentPlayer}`);
     }

     const userAction = (tile, index) => {
        if(isValidAction(tile) && isGameActive) {
            tile.innerText = currentPlayer;
            tile.classlist.add(`player${currentPlayer}`);
            updateBoard(index);
            handleResultValidation();
            changePlayer();
        }
     }

     const resetBoard = () => {
        board = ['', '', '', '', '', '', '', '', '',];
        isGameActive = true;
        announcer.classList.add('hide');

        if (currentPlayer === 'O') {
            changePlayer();
        }

        tiles.forEach(tile => {
            tile.innerText = '';
            tile.classList.remove('X')
            tile.classList.remove('O')
        });
     }

     tiles.forEach( (tile, index) => {
        tile.addEventListener('click', () => userAction(tile, index));
     });

    resetButton.addEventListener('click', resetBoard);
});

关键错误排查与修复 #

• let currentPlayer = X; 改为 let currentPlayer = 'X';：未给字符串值添加引号，导致变量未定义
• winningConditions 数组的每个子数组间缺少逗号分隔：数组语法错误，会导致代码无法正常解析，修正后应为：

  const winningConditions = [
     [0, 1, 2],
     [3, 4, 5],
     [6, 7, 8],
     [0, 3, 6],
     [1, 4, 7],
     [2, 5, 8],
     [0, 4, 8],
     [2, 4, 6]
  ]
  

• updateBoard 箭头函数语法错误：原写法参数括号位置错误，修正为 const updateBoard = (index) => { board[index] = currentPlayer; }
• userAction 中 tile.classlist.add 拼写错误：应为 tile.classList.add，DOM元素类操作属性为驼峰命名的classList
• handleResultValidation 中 if (!board.includes('')) 语句缺少大括号：修正为 if (!board.includes('')) { announce(TIE); }，确保代码块正确执行
• board 数组多一个空元素：原数组有10个空字符串，改为9个空字符串的数组，对应3x3棋盘格子

内容的提问来源于stack exchange，提问作者therealslim