Question

我知道有一种方法可以让我重构这段代码，但我无法弄明白，我可以使用一些帮助。我创建了一个tic tac toe游戏并创建了声明胜利者的功能，它有效，但它太长了。

$(document).ready(function() {

    var turn = 0;
    // var winOptions = [['#1','#2','#3'], ['#4','#5','#6'], ['#7','#8','#9'], [1,5,9], [3,5,7], [1,4,7], [3,6,9], [2,4,8]];

    $('td').on("click", function() {
        if (turn % 2 === 0) {
            $(this).text("0");
        } else {
            $(this).text("X");
        }
        $(this).off("click");
        turn++;
        checkForWinner()
    });


    function checkForWinner() {
        if ($('#1').text()==='X' && $('#2').text()==='X' && $('#3').text()==='X')
            alert('you win!');
        else if ($('#4').text()==='X' && $('#5').text()==='X' && $('#6').text()==='X')
            alert('you win!');
        else if ($('#7').text()==='X' && $('#8').text()==='X' && $('#9').text()==='X')
            alert('you win!');
        else if ($('#1').text()==='X' && $('#5').text()==='X' && $('#9').text()==='X')
            alert('you win!');
        else if ($('#3').text()==='X' && $('#5').text()==='X' && $('#7').text()==='X')
            alert('you win!');
        else if ($('#1').text()==='X' && $('#4').text()==='X' && $('#7').text()==='X')
            alert('you win!');
        else if ($('#3').text()==='X' && $('#6').text()==='X' && $('#9').text()==='X')
            alert('you win!');
        else if ($('#2').text()==='X' && $('#4').text()==='X' && $('#8').text()==='X')
            alert('you win!');
        else if ($('#1').text()==='O' && $('#2').text()==='O' && $('#3').text()==='O')
            alert('you win!');
        else if ($('#4').text()==='O' && $('#5').text()==='O' && $('#6').text()==='O')
            alert('you win!');
        else if ($('#7').text()==='O' && $('#8').text()==='O' && $('#9').text()==='O')
            alert('you win!');
        else if ($('#1').text()==='O' && $('#5').text()==='O' && $('#9').text()==='O')
            alert('you win!');
        else if ($('#3').text()==='O' && $('#5').text()==='O' && $('#7').text()==='O')
            alert('you win!');
        else if ($('#1').text()==='O' && $('#4').text()==='O' && $('#7').text()==='O')
            alert('you win!');
        else if ($('#3').text()==='O' && $('#6').text()==='O' && $('#9').text()==='O')
            alert('you win!');
        else if ($('#2').text()==='O' && $('#4').text()==='O' && $('#8').text()==='O')
            alert('you win!');
        }
});

我开始使用数组变量win选项来循环，但它仍然无法正常工作。

仅供参考，这些选择器是我的HTML中每个td标记的ID。

感谢您查看此内容。

Answer 1

可能需要根据Shilly的评论进行一些重构。但是，如果不彻底改变您的设计，您可以执行以下操作：

var winConditions = [
   ['#1','#2','#3'], ['#4','#5','#6'], ['#7','#8','#9'], // rows
   ['#1','#4','#7'], ['#2','#5','#8'], ['#3','#6','#9'], // columns
   ['#1','#5','#9'], ['#3','#5','#7']                    // diagonals
];

for (var i = 0, len = winConditions.length; i < len; i++) {
  var text = $(winConditions[i][0]).text();
  if (
    (text === 'X' || text === 'O') && 
    $(winConditions[i][1]).text() === text && $(winConditions[i][2]).text() === text
  ) {
    alert('you win!');
    break;
  }
}

使用for循环重构if if / else if语句--javascript

1 个答案: