noo noo - 5 months ago 36
HTML Question

Tie for tic tac toe?

Same tic tac toe game from earlier for my school, I forgot to figure in if the game is a draw... not sure how to to tell players it is a tie. Need help coding how to tell player if game is a tie. here is my code:

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

Answer

Add checkfortie function as;

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

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

and update you switchTurn function to;

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

Hope it helps..!!!