Tic-Tac-Toe——无限循环——我如何提示第二步

就我个人而言，我会设置一个独立的函数和一个全局变量来处理转弯过程。我们可以将这个变量称为yourTurn。

为了修改变量以确定该轮到谁，让我们创建一个名为changeTurns的函数，每当用户clicks在任何divs的容器上时，该函数就会被激活。请记住，您可以使用任何您想要的处理程序，这只是为了演示。

如果yourTurn的值是true或false，我们可以使用三元运算符执行操作。基本的if/else也同样有效。

让我们设置一个基本示例：

HTML:

<div id="move">Click Here to Simulate a Move</div> <!-- This is just a container for your TicTacToe game lets say -->
<div id="whosTurn">Your Turn!</div><!-- This is simply to show you the current state of turns -->

jQuery/Javascript:

$(function(){
    // Set up a base yourTurn variable without a value for now, just letting know javascript it exists.
    var yourTurn,
    // This is just for display purposes to show you who's turn it is.
        turnInfo = $('#whosTurn');
    // This function is the basic handler for changing turns. For now, we'll just do it whenever the user clicks on the box.
    $('#move').on('click', function(){
        changeTurns();
    });
    // This is the magic function which will always change turn on click. You would call this function whenever you've ensured that the user or computer have made a move.
    function changeTurns(){
        // This portion is only for visibility sake. The only real thing you need to modify the turn is the other line.
        yourTurn ? turnInfo.text('Your Turn!') : turnInfo.text('Computer Turn!')
        // This actually changes the yourTurn from true to false and vice-versa
        yourTurn = !yourTurn;
    }
});

你可以在这里看到一个工作示例：http://jsfiddle.net/bqo1vj9d/1/

我认为这是最简单的方法，可以简单地判断是否：

（yourTurn=true）该你了
（yourTurn=false）轮到计算机了

我修改了你的脚本和html。。。如果你需要，请告诉我

HTML

 <div class="container">
    <div class="row">
        <div class="col-sm-4 box" id="top-left" data-box-number="1"></div>
        <div class="col-sm-4 box" id="top-middle" data-box-number="2"></div>
        <div class="col-sm-4 box" id="top-right" data-box-number="3"></div>
    </div>
    <div class="row">
        <div class="col-sm-4 box" id="middle-left" data-box-number="4"></div>
        <div class="col-sm-4 box" id="middle-middle" data-box-number="5"></div>
        <div class="col-sm-4 box" id="middle-right" data-box-number="6"></div>
    </div>
    <div class="row">
        <div class="col-sm-4 box" id="bottom-left" data-box-number="7"></div>
        <div class="col-sm-4 box" id="bottom-middle" data-box-number="8"></div>
        <div class="col-sm-4 box" id="bottom-right" data-box-number="9"></div>
    </div>
</div>

JS

var playerName = prompt("Welcome to my world.  Enter your name so we can start");
alert("Welcome to the Game" + playerName + "!  Pick whatever square you'd like!");
var moveCount = 0,
 userArray = [0, 0, 0, 0, 0],
 cpuArray = [0,0,0,0],
 topLeft = 0,
 topMiddle = 0,
 topRight = 0,
 middleLeft = 0,
 middleMiddle = 0,
 middleRight = 0,
 bottomLeft = 0,
 bottomMiddle = 0,
 bottomRight = 0;

//bind all the boxes together. You can use switch statement using boxnumber;
$(".box").bind("click", function () {
    var boxnumber = $(this).data("box-number");
    userMove($(this),boxnumber);
    computerMove(); // this will automaticatlly execute computers move after user's move
});

//user moves here
var userMove = function(dom,position){
    console.info("User moved.");
    $('<p>X</p>').appendTo(dom);
    // moveCount++; you can avoid this. 
    topLeft++;
    userArray[0] = position;
}    

//computer turn
var computerMove = function (){
    console.info("Computer moved.");
    alert("The computer cannot be defeated.  Click to see his turn.");
    if (topLeft === 1 || topRight === 1 || bottomRight === 1 || bottomLeft === 1) {
        $('<p>0</p>').appendTo("#middle-middle");
        //moveCount++;
        middleMiddle++;
        cpuArray[0] = 5;
    };
    if (topMiddle === 1 || middleLeft === 1 || middleRight === 1 || bottomMiddle === 1) {};
    if (middleMiddle === 1) { };
}