Question

我正在尝试用Javascript制作一个Tic-Tac-Toe。

我使用一种方法将当前输入与获胜组合进行比较。 1）如何确定玩家1和玩家2的输入？ 2）我可以比较3，但我无法弄清楚每个玩家的第4次点击。

请告知。

var check = [[0,0,0],[0,0,0]]; //check[0] for player 1 , check[1] for player 2 , but i can't figure out how to increase the counter for each player on each click.

function playercol(ideal) //main
            {   

                var idname = "box"+idval;
                var currentcount = (playercount%2);

                if( currentcount == 0 )
                {
                    document.getElementById(idname).innerHTML="O";
                }
                else
                {
                    document.getElementById(idname).innerHTML="X";
                }

                document.getElementById("player").innerHTML="Player "+((playercount%2)+1);
                checkwin(check,0);//to check //0 is the current player index


                playercount++;
            }

我的小提琴 http://jsfiddle.net/1br5LLrj/3/

Answer 1

刚刚从头开始约20分钟为你做了一个tic tac toe。

JS Bin Here

现在只需交替玩家......根据自己的需要进行修改。

所有获胜条件都会提醒谁是胜利者：

$(document).ready( function(){
function checkwin() {
if (
$('#a1').html() == "X" && $('#b1').html() == "X" && $('#c1').html() == "X" || $('#a2').html() == "X" && $('#b2').html() == "X" && $('#c2').html() == "X" || $('#a3').html() == "X" && $('#b3').html() == "X" && $('#c3').html() == "X" || $('#a1').html() == "X" && $('#a2').html() == "X" && $('#a3').html() == "X" || $('#b1').html() == "X" && $('#b2').html() == "X" && $('#b3').html() == "X" ||
$('#c1').html() == "X" && $('#c2').html() == "X" && $('#c3').html() == "X" ||
$('#a1').html() == "X" && $('#b2').html() == "X" && $('#c3').html() == "X" ||
$('#a3').html() == "X" && $('#b2').html() == "X" && $('#c1').html() == "X"
)
  {
    alert("winner is: X");
  }
if (
$('#a1').html() == "O" && $('#b1').html() == "O" && $('#c1').html() == "O" || $('#a2').html() == "O" && $('#b2').html() == "O" && $('#c2').html() == "O" || $('#a3').html() == "O" && $('#b3').html() == "O" && $('#c3').html() == "O" || $('#a1').html() == "O" && $('#a2').html() == "O" && $('#a3').html() == "O" || $('#b1').html() == "O" && $('#b2').html() == "O" && $('#b3').html() == "O" ||
$('#c1').html() == "O" && $('#c2').html() == "O" && $('#c3').html() == "O" ||
$('#a1').html() == "O" && $('#b2').html() == "O" && $('#c3').html() == "O" ||
$('#a3').html() == "O" && $('#b2').html() == "O" && $('#c1').html() == "O"
)
  {
    alert("winner is: O");
  }
}  

var player = 1;
$('td').click(function(){
if(player == 1){
$(this).html("X").removeClass('o').addClass('x');
checkwin();
player++;
}
  else if (player == 2){
    $(this).html("O").removeClass('x').addClass('o');
checkwin();
player--;
  }
});
});

别忘了使用Jquery Library！

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 2

我尝试尽可能少地修改您的代码http://jsfiddle.net/rrj24ze9/1

关键部分是胜利检查：

您不需要记住玩家点击的内容并将其与获胜的组合进行比较。相反，遍历获胜组合并检查其中一个组合是否仅包含玩家所使用的字段。

var winning = [
    [1, 2, 3], [4, 5, 6], [7, 8, 9],
    [1, 4, 7], [2, 5, 8], [3, 6, 9],
    [1, 5, 9], [3, 5, 7]
];

function checkwin(player) {
    for (var i = 0; i < winning.length; i++) {
        var combo = true;
        for (var j = 0; j < 3; j++) {
            if (document.getElementById('box' + winning[i][j]).innerHTML != markers[player]) {
                combo = false;
            }
        }
        if (combo) return true;
    }
    return false;
}

有很多改进的可能性，例如不使用innerHTML（从视图中分离数据），甚至阻止对同一字段进行两次点击，但同样，我试图尽可能保持代码的完整性

用Javascript卡住Tic Tac Toe

2 个答案: