javascript - Tic Tac Toe - 返回标记的平方数

Question

我正在尝试使用 JavaScript 构建一个 Tic Tac Toe 游戏；我有我的表格 (HTML):

  <table>
    <tr>
        <td id="s1" class ="square" onclick = "nextMove(this);"></td>
        <td id="s2" class ="square" onclick = "nextMove(this);"></td>
        <td id="s3" class ="square" onclick = "nextMove(this);"></td>
    </tr>   
    <tr>
        <td id="s4" class ="square" onclick = "nextMove(this);"></td>
        <td id="s5" class ="square" onclick = "nextMove(this);"></td>
        <td id="s6" class ="square" onclick = "nextMove(this);"></td>
    </tr>   
    <tr>
        <td id="s7" class ="square" onclick = "nextMove(this);"></td>
        <td id="s8" class ="square" onclick = "nextMove(this);"></td>
        <td id="s9" class ="square" onclick = "nextMove(this);"></td>
    </tr>   

  </table>

和 JavaScript:

var tie = 0;
var move = 1;
function startGame(){
    for(var i =1; i < 10 ; i++){ //clears all squares
        clearBox(i)
    }
    tie=0;
    document.turn = "X";

    if(Math.random() < 0.5){
        document.turn = "O";
    }
    document.winner = null;
    setMessage(document.turn + " gets to start");
}

function setMessage(msg){
        document.getElementById("message").innerText = msg;

}

function setMoves(num){
        if(num == 1)    
            document.getElementById("one").innerText = "player " + document.turn + " selected square " ;
        else if (num == 2)
            document.getElementById("two").innerText = "player " + document.turn + " selected square " ;
        else if (num == 3)
            document.getElementById("tree").innerText = "player " + document.turn + " selected square " ;
        else if (num == 4)
            document.getElementById("four").innerText = "player " + document.turn + " selected square " ;
        else if (num == 5)
            document.getElementById("five").innerText = "player " + document.turn + " selected square " ;
        else if (num == 6)
            document.getElementById("six").innerText = "player " + document.turn + " selected square " ;
        else if (num == 7)
            document.getElementById("seven").innerText = "player " + document.turn + " selected square " ;
        else if (num == 8)
            document.getElementById("eight").innerText = "player " + document.turn + " selected square " ;
        else if (num == 9)
            document.getElementById("nine").innerText = "player " + document.turn + " selected square " ;


}

function nextMove(square){

    if(document.winner != null){
        setMessage(document.winner + " already won the game, please start over");
    }else if(square.innerText == ""){
        square.innerText = document.turn;
        switchTurn();
    }else{
        setMessage("That square is already used!");
    }

    setMoves(tie);

}


function switchTurn(){

    tie++;
    if(checkForWinner(document.turn)){
        setMessage(document.turn + " Won!!!");
        document.winner = document.turn;
    }else if(document.turn == "X"){
        document.turn = "O";
        setMessage("its " + document.turn + " turn");
    }else{
        document.turn = "X";
        setMessage("its " + document.turn + " turn");
    }

    setMoves(tie);

    if(checkTie())
        setMessage("its a tieeeeeeeeeeeeeeeeeeeeeeeeeee"); ///////////////////////////////////////////////////////////////////////////////////


}

function clearBox(number){
    document.getElementById("s" + number).innerText = "";
}

function tieeeOne(number){
    return document.getElementById("s" + number).innerText != "";
}

function checkTie(){
    var flg = false;
    for(i=0; i<10; i++)
        if (tieeeOne())
        {
            flg=true;
        }
    return flg;
}

function checkForWinner(move){
    var result = false;
    if(checkRow(1,2,3,move) || checkRow(4,5,6,move) || checkRow(7,8,9,move) //rows
        ||  checkRow(1,4,7,move) || checkRow(2,5,8,move) || checkRow(3,6,9,move) //cols
        ||  checkRow(1,5,9,move) || checkRow(3,5,7,move)){ //diagonal
        result = true;
    }
    return result;
}

function checkForTie(a, b, c, d, e, f, g, h, i)
{
    var tie = false;
    if(getBox(a) == move && getBox(b) == move && getBox(c) == move
    && getBox(d) == move && getBox(e) == move && getBox(f) == move
    && getBox(g) == move && getBox(h) == move && getBox(i) == move){
        tie = true;
    }
    return tie;
}

function checkRow(a, b, c, move){
    var result = false;
    if(getBox(a) == move && getBox(b) == move && getBox(c) == move)
        result = true;
    return result;

}


function getBox(number){
    return document.getElementById("s" + number).innerText;
}

我想构建一个函数，它将返回最后标记的方 block 的编号(1-9)，这可能吗？我想创建一个日志，并且需要知道哪个方 block 已被标记？

Answer 1

您可以创建一个全局变量lastMove并在nextMove()中设置它。只需分配lastMove = square.id;然后确保您在新的游戏逻辑中清除了这一点。