tic tac toe javascript answer checker

时间:2017-01-24 13:38:55

标签: javascript jquery html

我在javascript / jquery中制作一个简单的tic tac toe游戏,我不知道如何检查是否有人赢了。 这是游戏场:

<div id="gamefield">
            <table border="0">
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
            </table>
        </div>

这是将empty.jpg更改为cross.jpg或circle.jpg的代码:

$("#gamefieldtr td").click( function (event) {
if($(".game-button").html() == "Reset game" && $(this).children().attr("src") == "img/empty.jpg") {

    if(randomStart == 0){
        var val = $(this).children().attr('src', 'img/cross.jpg');
        randomStart = 1;
        $(this).children().unbind("click");
    }
    else {
        var val = $(this).children().attr('src', 'img/circle.jpg');
        randomStart = 0;
        $(this).children().unbind("click");
    }
}
if ($(".game-button").html() == "Start game") {
    alert("you can't start");
}
});

这是随机启动代码:

var randomStart = Math.floor(Math.random() * 2);

1 个答案:

答案 0 :(得分:1)

React tutorial实现了一个TicTacToe游戏,他们使用此功能来检查谁赢了:

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
来自starter source code

正方形是从左到右,从上到下的九个正方形的数组。对于已填充的正方形,它包含xo,并返回获胜者的字母。