I am writing a tic tac toe game using html, css, and JavaScript. I have my JavaScript in an external .js file being referenced into the .html file. Within the .js file, I have a function called playerMove, which allows the player to make his/her move and switches between player 'x' and 'o'. What I am trying to do is determine the winner.
Here is what I have: each square, when onclick(this), references playerMove(piece). After each move is made, I want to run an if statement to check for the winner, but am unsure if the parameters would include a reference to 'piece' or a,b, and c. Any suggestions would be greatly appreciated.
Javascript:
var turn = 0;
a = document.getElementById("topLeftSquare").innerHTML;
b = document.getElementById("topMiddleSquare").innerHTML;
c = document.getElementById("topRightSquare").innerHTML;
function playerMove(piece) {
var win;
if(piece.innerHTML != 'X' && piece.innerHTML != 'O'){
if(turn % 2 == 0){
document.getElementById('playerDisplay').innerHTML= "X Plays " + printEquation(1);
piece.innerHTML = 'X';
window.setInterval("X", 10000)
piece.style.color = "red";
if(piece.innerHTML == 'X')
window.alert("X WINS!");
}
else {
document.getElementById('playerDisplay').innerHTML= "O Plays " + printEquation(1);
piece.innerHTML = 'O';
piece.style.color = "brown";
}
turn+=1;
}
html:
<div id="board">
<div class="topLeftSquare" onclick="playerMove(this)">
</div>
<div class="topMiddleSquare" onclick="playerMove(this)">
</div>
<div class="topRightSquare" onclick="playerMove(this)">
</div>
<div class="middleLeftSquare" onclick="playerMove(this)">
</div>
<div class="middleSquare" onclick="playerMove(this)">
</div>
<div class="middleRightSquare" onclick="playerMove(this)">
</div>
<div class="bottomLeftSquare" onclick="playerMove(this)">
</div>
<div class="bottomMiddleSquare" onclick="playerMove(this)">
</div>
<div class="bottomRightSquare" onclick="playerMove(this)">
</div>
</div>
