Question

javascript
let grid = [
    [null, null, null],
    [null, null, null],
    [null, null, null]
];


// Assuming Player 1 starts.
let turn = "Player_1";

function checkRows() {
    for (let i = 0; i < grid.length; i++) {
        if (grid[i][0] === grid[i+1][1] && grid[i][0] === grid[i+1][2] && grid[i][0] !== null) {
            alert(grid[i][0] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
        }
            console.log(grid[i][0] === grid[i+1][1] && grid[i][0] === grid[i+1][2] && grid[i][0] !== null);
    }
}

function checkColumns() {
    for (let i = 0; i < grid.length; i++) {
        if (grid[0][i] === grid[2][i] && grid[0][i] === grid[2][i] && grid[0][i] !== null) {
            alert(grid[0][i] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
        }
        console.log(grid[0][i] === grid[2][i] && grid[0][i] === grid[2][i] && grid[0][i] !== null)
    }
}

function checkDiagonals() {
    if (grid[0][0] === grid[1][1] && grid[0][0] === grid[2][2] && grid[0][0] !== null) {
        alert(grid[1][1] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
    }
        console.log(grid[0][0] === grid[1][1] && grid[0][0] === grid[2][2] && grid[0][0] !== null)
}

function checkWinningPositions() {
    this.checkRows();
    this.checkColumns();
    this.checkDiagonals();
}

function updateButton(id, marking) {
    let button = document.getElementById(id);
    button.style.backgroundImage = 'url("' + marking + '.png")';
    button.style.backgroundRepeat = 'no-repeat'; // The X image is not in appropriate size.
    button.disabled = true;
    grid[Math.floor(parseInt(id)/3)][parseInt(id)%3] = marking;
        console.log(marking);
        console.log(id);

}

function getButtonPressed(id) {
    // Assuming Player 1 is marking with X.
    if (turn === 'Player_1') {
        this.updateButton(id, 'X');
        this.checkWinningPositions();
        turn = 'Player_1';
    }
    else {
        this.updateButton(id, 'O');
        this.checkWinningPositions();
        turn = 'Player_2';
    }
}

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="styles.css" rel="stylesheet">
        <title>Tick-Tack-Toe</title>
    </head>
    <body>
        <h1 align="left">Tick Tack Toe</h1>


        <p>Player 1: X &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Player 2: O</p>
        <!-- the tic tack toe matrix -->
        <div class = "matrix">
            <button id="0" class="button" onclick="getButtonPressed(0);"></button>
            <button id="1" class="button" onclick="getButtonPressed(1);"></button>
            <button id="2" class="button" onclick="getButtonPressed(2);"></button>
            <button id="3" class="button" onclick="getButtonPressed(3);"></button>
            <button id="4" class="button" onclick="getButtonPressed(4);"></button>
            <button id="5" class="button" onclick="getButtonPressed(5);"></button>
            <button id="6" class="button" onclick="getButtonPressed(6);"></button>
            <button id="7" class="button" onclick="getButtonPressed(7);"></button>
            <button id="8" class="button" onclick="getButtonPressed(8);"></button>
        </div>

        <script src="app.js"></script>   
    </body>
</html>

这段代码有bug和我第一次修复bug，如果你不能帮我，你可以指导我做什么。首先我注意到它以X开头，当我检查行列时只有X，而对角线则返回false。我有图像X和O.我也有按钮的css文件。我相信这个网格数组需要有3个部分grid [] [] []但是我还在学习，从项目中我可以使用stackoverflow和justmyself更好的方法。即使你没有答案指导我如何接近debbuging，它也很好。但真诚的问题在于赢得组合的问题

Answer 1

function checkRows() {
    for (let i = 0; i < grid.length; i++) {
        if (grid[i][0] === grid[i+1][1] && grid[i][0] === grid[i+1][2] && grid[i][0] !== null) {
            alert(grid[i][0] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
        }
            console.log(grid[i][0] === grid[i+1][1] && grid[i][0] === grid[i+1][2] && grid[i][0] !== null);
    }
}

第三行

grid[i+1][1]

当i = 2时，i+1 = 3

grid[3]为undefined，并且调用grid[3][1]会出错，因为只有3行而不是4

以下是修复checkRows()

的方法

function checkRows() {
  for (let i = 0; i < grid.length; i++) {
    if (grid[i][0] !== null && grid[i][0] === grid[i][1] && grid[i][0] === grid[i][2]) {
      alert(grid[0][i] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
    }
    console.log("No alert no winner");
 }

}

修复列

function checkColumns() {
  for (let i = 0; i < grid.length; i++) {
   if (grid[0][i] !== null && grid[0][i] === grid[1][i] && grid[0][i] === grid[2][i]) {
     alert(grid[i][0] === 'X' ? 'Player 1 wins!' : 'Player 2 wins!');
   }
   console.log("If there is no alert, then it means we don't have a winner");
}

玩家转身没有变化的原因是因为你得到了一个错误，那么它就会停在this.checkWinningPosition()并且永远不会改变回合

编辑6000：我意识到你为什么要进行空检查并将其添加回我的解决方案

Tictactoe JavasScript

1 个答案: