领带tic tac toe?

时间:2015-02-10 05:13:56

标签: javascript html tic-tac-toe

与我学校早些时候相同的tic tac toe游戏,如果游戏是平局,我忘了弄清楚...不知道如何告诉玩家这是一个平局。需要帮助编码如何告诉玩家游戏是否平局。这是我的代码:

<html>
<head>
    <style>

        .Square
        {
        width:60px;
        height: 60px;
        text-align:center;
        font-size: 30pt;
        font-weight: bold;
        font-family: Verdana;
        }
    </style>

<script>
            function startGame()
                {
                    for (var i = 1; i<= 9; i = i + 1)
                    {
                        clearBox(i);
                    }

                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").textContent = msg;
            }

            function nextMove(square)
            {
                if (document.winner != null)
                {
                    setMessage(document.winner + " Already Won the Game!");
                }
                else if (square.textContent == "")
                {
                    square.textContent = document.turn;
                    switchTurn();
                }
                else
                {
                    setMessage("That Square is Already Used.")
                }
            }

            function switchTurn()
            {
                if(checkForWinner(document.turn))
                {
                    setMessage("Congratulations " + document.turn + "! You Win!");
                    document.winner = document.turn;
                }
                    else if (document.turn == "X")
                        {
                            document.turn ="O";
                            setMessage("It's " + document.turn + "'s turn!");
                        }
                    else
                    {
                        document.turn ="X";
                        setMessage("It's " + document.turn + "'s turn!");
                    }
            }

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

            }

            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).textContent;
            }

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

</script>

</head>

<body onload= "startGame();" background="http://www.clipartbest.com/cliparts/dcr/eKa/dcreKaqoi.gif">
    <center><h1><font color ="black" size="30"> Tic-Tac-Toe!</font></h1></center>
    <center><div id=message> message will be here </div></center>
    <center><table border= "15" bgcolor= "#FFFFFF">
        <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></center>
    <center><button type="button" onclick=startGame()> Start New Game</button></center>
    <center><p> Created By Claire Fuesting</p></center>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

将checkfortie功能添加为;

       function CheckforTie()
        {
            for(var i=1;i<10;i++)
            {

              if(getBox(i)=="")
               return false;
            }
            return true;
        }

并将switchTurn函数更新为;

 function switchTurn()
        {
            if(checkForWinner(document.turn))
            {
                setMessage("Congratulations " + document.turn + "! You Win!");
                document.winner = document.turn;
            }
            else
            if(CheckforTie())
            {
                setMessage("Its a TIE..!! Play again...!!!");
            }
                else if (document.turn == "X")
                    {
                        document.turn ="O";
                        setMessage("It's " + document.turn + "'s turn!");
                    }
                else
                {
                    document.turn ="X";
                    setMessage("It's " + document.turn + "'s turn!");
                }
        }

希望它有所帮助...... !!!

答案 1 :(得分:1)

  1. 创建一个名为moves的变量,并为其赋值0.
  2. 当“移动”发生时移动++。
  3. 在每次移动结束时添加if(moves == 9){draw}