javascript - 我创建了一个非常简单的 Tic Tac Toe 游戏，我在使用 jquery 进行索引和获胜检查时遇到了问题

Question

我已经看过这里了，但不完全理解。我已经被这个问题困扰了整整一个月，并尝试过向其他地方询问，但没有成功。

我写的代码至少可以说很糟糕，但这是我理解的代码。如果有人能以像我这样的傻瓜能够理解的方式帮助我，我将不胜感激。

function clearButton (){
    $('td').text('')        // Clears button
}

var turn = 1;                       // sets turn

$('td').on('click', function(){
    var tableRow = $(this).closest('tr').index()        // index of row
    var tableColumn = $(this).closest('td').index()     // index of column

    if (turn === 1){
        $(this).text('O')
    }else if (turn === -1){                         // turns
        $(this).text('X')
    }else{
        console.log('oops');
    }

    $('td').on('dblclick', function(){
        $(this).text('')                            // double click to clear td
    })

    $('button').on('click', clearButton)                // call to clear button 

    console.log(tableRow, tableColumn)                 // logs row and column

    for (var i = 0; i < table.length; i++) {
        console.log(table[i]);                              // work on this
    }

    turn = turn * -1                                   // changes turn
})

table {
    margin-left: auto;
    margin-right: auto;
 }

td {
   width: 100px;
   height: 100px;
   border: 1px solid black;
   background-color: rgb(238, 227, 130);
   text-align: center;
   font-size: 70px;
}

h1 {
    margin-top: 0px;
    text-align: center;
}
 
body {
    background-color: rgb(204, 204, 204);
}

.jumbotron {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    padding-bottom: 10px;
    padding-top: 10px;
 }

.jumbotron button {
    margin-top: 20px;
    margin-bottom: 0px;
}    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron">
    <h1>Tic Tac Toe</h1>
        <button class='btn btn-primary' type="submit">CLEAR</button>
</div>

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

是否有另一个平台可以让我提出这样的问题，而不会激怒一群成熟的开发人员？除了在这里提出问题之外，我实际上没有任何资源，我知道这些问题已经得到解答，只是我还不太理解它们。

Answer 1

我在您的代码中添加了一些内容，希望能帮助您进入下一步。第一个是我创建了一个包含 9 个元素的数组，称为 table。然后，当玩家点击某个方 block 时，该表格就会填充“X”或“O”:

const table = Array(9);
table[tableRow * 3 + tableColumn] = turn < 0 ? "X" : "0";

接下来我创建了一个名为 checkForWinner() 的函数。该函数现在所做的就是console.log table 的结果。希望你能从那里得到它:

function clearButton (){
    $('td').text('')        // Clears button
}

var turn = 1;                       // sets turn

const table = Array(9);

$('td').on('click', function(){
    var tableRow = $(this).closest('tr').index()        // index of row
    var tableColumn = $(this).closest('td').index()     // index of column

    if (turn === 1){
        $(this).text('O')
    }else if (turn === -1){                         // turns
        $(this).text('X')
    }else{
        console.log('oops');
    }

    $('td').on('dblclick', function(){
        $(this).text('')                            // double click to clear td
    })

    $('button').on('click', clearButton)                // call to clear button 

    table[tableRow * 3 + tableColumn] = turn < 0 ? "X" : "0";
    checkForWinner();
    
    turn = turn * -1                                   // changes turn
})

function checkForWinner(){
   console.log(JSON.stringify(table));
}

td{
   border:solid 1px #000;
   height:30px;
   width:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron">
    <h1>Tic Tac Toe</h1>
        <button class='btn btn-primary' type="submit">CLEAR</button>
</div>

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>