Question

schoool的第二天，我们被分配了一个井字游戏。我用9个可点击的div构建它。单击一个，X就出现在该div中，然后计算机移动。我的问题是，我无法正确发出用户转弯结束和CPU转向开始的信号。我有一个计数总计数的计数器（moveCount）。我的第一个想法是设置一个while循环，所以while（moveCount = 0），用户可以选择一个div然后moveCount将增加到1，循环将结束，然后计算机可以播放。但它并没有那样工作。任何有助于我前进的帮助将不胜感激！

    let 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!");

let moveCount = 0;
let userArray = [];
let cpuArray = [];

let topLeft = 0;
let topMiddle = 0
let topRight = 0
let middleLeft = 0
let middleMiddle = 0
let middleRight = 0
let bottomLeft = 0
let bottomMiddle = 0
let bottomRight = 0

while(moveCount === 0){
    $("#top-left").bind("click", function () {
        $('<p>X</p>').appendTo(this)
        moveCount++
        topLeft++
    });

    $("#top-middle").bind("click", function () {
        moveCount++;
        topMiddle++
        $('<p>X</p>').appendTo(this)
    });

    $("#top-right").bind("click", function () {
        moveCount++;
        topRight++
        $('<p>X</p>').appendTo(this)
    });

    $("#middle-left").bind("click", function () {
        moveCount++;
        middleLeft++
        $('<p>X</p>').appendTo(this)
    });
    $("#middle-middle").bind("click", function () {
        moveCount++;
        middleMiddle++
        $('<p>X</p>').appendTo(this)
    });

    $("#middle-right").bind("click", function () {
        moveCount++;
        middleRight++
        $('<p>X</p>').appendTo(this)
    });
    $("#bottom-left").bind("click", function () {
        moveCount++;
        bottomLeft++
        $('<p>X</p>').appendTo(this)
    });

    $("#bottom-middle").bind("click", function () {
        moveCount++;
        bottomMiddle++
        $('<p>X</p>').appendTo(this)
    });

    $("#bottom-right").bind("click", function () {
        moveCount++;
        bottomRight++
        $('<p>X</p>').appendTo(this)
    });

};


//computer turn
if (moveCount === 1){
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++
};



if (topMiddle === 1 || middleLeft === 1 || middleRight === 1 || bottomMiddle === 1) { };
if (middleMiddle === 1) { };



};

Answer 1

就个人而言，我会设置一个独立的函数和一个处理转弯过程的全局变量。我们可以调用此变量setFurColor。

为了修改变量以确定它的转向，让我们创建一个名为yourTurn的函数，只要容器中的用户changeTurns为您的任何clicks而激活。请记住，你可以使用你想要的任何处理程序，这只是为了演示。

如果divs的值为yourTurn或true，我们可以使用三元运算符执行操作。一个基本的 if / else 也可以正常工作。

让我们建立一个基本的例子：

<强> HTML：

false

jQuery / Javascript：

<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 -->

您可以在此处查看一个有效的示例：http://jsfiddle.net/bqo1vj9d/1/

我认为这是最简单的判断是否：

（$(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; } }); = yourTurn）轮到你了（true = yourTurn）它的计算机轮到了

Answer 2

我将你的脚本和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) { };

}

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

2 个答案: