Tic Tac Toe - 返回标记的方形数字

时间:2015-09-09 17:24:51

标签: javascript html function

我试图使用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;
}

我想构建一个函数,它将返回最后一个标记正方形(1-9)的数字,这可能吗?我想创建一个日志,我需要知道哪个方块已被标记?

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

一种简单的方法是创建一个将在nextMove()函数中设置的全局变量。你会创建一个变量

if segue.identifier == "DBSubLegislationSegue" && rowSelected == 0 {
    //do things
}
else if segue.identifier == "DBSubLegislationSegue" && rowSelected == 1 {
    // do other things
}
//and so on

然后,您可以使用var lastMove; 元素的ID来设置变量。

<td>