代码之家 › 专栏 › 技术社区 › user6311492

TictaToe JavaScript

dom-events dom arrays javascript

-1

user6311492 · 技术社区 · 7 年前

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。当我选中row-column和diagonal时,它返回false。我有图像X和O。我还有一个CSS文件,只用于按钮。我认为这个网格阵列需要由3部分组成 grid[][][] 但我仍在学习,还有什么更好的方法可以从项目中使用堆栈溢出,而且我自己也可以。因此,即使您没有答案来指导我如何进行调试,也很好。但诚恳地说,问题在于成功的组合。

1 回复 | 直到 5 年前

Pavlo 7 年前

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:我意识到你为什么做空检查并将其添加回我的解决方案中