I'm writing a TicTacToe game and I'm having trouble adding the Win Count to track how many games the X player wins and how many games the O player wins. Right now, I have the JS code with an if statement. If alert = Winner is X, then xWinCount++ but I'm not sure this is the correct way. Thanks for any and all help, I really appreciate it.
HTML Code:
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="http://ift.tt/1jAc5cP">
<link rel="stylesheet" href="http://ift.tt/1QgFFRj">
<link rel="stylesheet" href="css/altTicTacToe.css">
</head>
<body>
<div class="container">
<div class="col-md-12 header">
<h1 class="banner">Previous Games</h1>
<h1 class="banner">Rules</h1>
<h1 class="banner-right">List of Wins</h1>
</div>
<div class="row">
<div class="col-md-4 nine hidden-xs red"></div><!--previous game-->
<div class="col-md-4 hidden-xs green-bg"><!--rules + who's turn is it -->
<p>Classic Tic-Tac-Toe game.</br></br> Match three X's or three O's in a line vertically, horizontally or diagonally to win!</p></div>
<div class="col-md-4 hidden-xs blue"> <!-- List of wins -->
<div class="win-chart">
<p class="win-chart">X has won:</p><p id="xWinCount" class="xWinCount win-chart">0</p><p class="win-chart">time(s)</p></br>
<p class="win-chart">O has won:</p><p id="oWinCount" class="xWinCount win-chart">0</p><p class="win-chart">time(s)</p>
</div>
</div>
<div class="row">
<div class="col-md-4 nine hidden-xs red"></div>
<div class="col-md-4 nine" id="board">
<div class="col-md-4 innerNine empty borderBottom col-xs-4"></div>
<div class="col-md-4 innerNine empty borderBottom borderLeftAndRight col-xs-4"></div>
<div class="col-md-4 innerNine empty borderBottom col-xs-4"></div>
<div class="col-md-4 innerNine empty col-xs-4"></div>
<div class="col-md-4 innerNine empty borderLeftAndRight col-xs-4"></div>
<div class="col-md-4 innerNine empty col-xs-4"></div>
<div class="col-md-4 innerNine empty borderTop col-xs-4"></div>
<div class="col-md-4 innerNine empty borderTop borderLeftAndRight col-xs-4"></div>
<div class="col-md-4 innerNine empty borderTop col-xs-4"></div>
</div>
<div class="col-md-4 hidden-xs"></div> <!--blue not needed -->
</div>
<div class="row">
<div class="col-md-4 nine red"></div>
<div class="col-md-4">
<button id="newGame" class="btn btn-success btn-lg" type="button"><span class="glyphicon glyphicon-repeat"></span>Restart Game </button>
<a href=" " button id="newGame" class="btn btn-primary btn-lg" type="button"><span class="glyphicon glyphicon-repeat"></span>Reset Scores</button></a>
</div>
<div class="col-md-4"> </div> <!--blue not needed -->
</div>
</div>
<script src="http://ift.tt/1LdO4RA"></script>
<script src="http://ift.tt/1jAc4pg">
</script>
<script src="js/altTicTacToe.js"></script>
</body>
</html>
CSS Code:
.row {
margin-top: 5px;
}
.nine, .col-md-4 {
height: 300px;
text-align: center;
}
.innerNine {
height: 100px;
text-align: center;
}
.o {
font-size: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
padding-bottom: 10px;
}
.x {
font-size: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
padding-bottom: 10px;
}
.green {
color: green;
}
.allBorders {
border: 1px black solid;
}
.borderBottom {
border-bottom: 1px black solid;
}
.borderTop {
border-top: 1px black solid;
}
.borderLeftAndRight {
border-left: 1px black solid;
border-right: 1px black solid;
}
/*Added classes */
p{
font-size: 24px;
}
.header{
width: 100%;
}
.banner {
display: inline;
margin-right: 225px;
}
.banner-right{
display: inline;
}
.blue {
background-color: blue;
}
.red{
background-color: red;
}
.green-bg{
background-color: green;
}
.win-chart{
display: inline;
}
JS Code:
$(document).ready(function() {
var circleOrEx = "o"; // who gets first turn, right now circle goes first
var isGameInProgress = true; // when the document loads, the tictactoe board is an active game
var winningCombos = { // the game board is a series of nine square boxes, but since this is an array, the values for earch box is 0 to 8. these values outline the winning combinations starting from each possible square on the board. the board is writen out like this:
// 0 | 1 | 2
// ---------
// 3 | 4 | 5
// ---------
// 6 | 7 | 8
0: [ //0 is key (winning combinations starting from the top left square)
[1, 2], //if the user enters in three of the same values across the top three squares, they win
[3, 6], //if the user enters in three of the same values down the far left column, they win
[4, 8] //if the user enters in three of the same values diagonally from the top left to bottom right, they win
],
1: [ //(winning combinations starting from the top middle square)
[0, 2], //if the user enters in three of the same values across the top three squares, they win
[4, 7] //if the user enters in three of the same values down the middle column, they win
], //there are no diagonal winning combinations for values 1, 3, 5, 7
2: [ //(winning combinations starting from the top right square)
[0, 1], //if the user enters in three of the same values across the top three squares, they win
[5, 8], //if the user enters in three of the same values down the far right column, they win
[4, 6] //if the user enters in three of the same values diagonally from the top right to bottom left, they win
],
3: [ //(winning combinations starting at the middle square on the far left column )
[0, 6], //if the user enters in three of the same values down the far left column, they win
[4, 5] //if the user enters in three of the same values across the middle row, they win
],
4: [ //(winning combinations starting at the center square)
[1, 8], //BUG IN THE CODE, this should not be a winning combination
[2, 6], //if the user enters in three of the same values diagonally from the top right to bottom left, they win
[1, 7], //if the user enters in three of the same values down the middle column, they win
[3, 5] // if the user enters in three of the same values across the middle row, they win
],
5: [ //(winning combinations starting from the middle square in the far right column)
[2, 8], //if the user enters in three of the same values down the far right column, they win
[3, 4] // if the user enters in three of the same values across the middle row, they win
],
6: [ //(winning combinations starting from the bottom left square)
[0, 3], //if the user enters in three of the same values down the far left column, they win
[2, 4], //if the user enters in three of the same values diagonally from the top left to bottom right, they win
[7, 8] //if the user enters in three of the same values across the bottom three squares, they win
],
7: [ //(winning combinations starting from the bottom middle square)
[1, 4],//if the user enters in three of the same values down the middle column, they win
[6, 8] //if the user enters in three of the same values across the bottom three squares, they win
],
8: [ //(winning combinations starting from the bottom right square)
[0, 4], //if the user enters in three of the same values diagonally from the bottom right to the top left, they win
[2, 5], //if the user enters in three of the same values down the far right column, they win
[6, 7] //if the user enters in three of the same values across the bottom three squares, they win
]
};
// when the user clicks on the board, the function runs, and the game is in progress
$("#board").find("div").on("click", function() {
if (isGameInProgress && $(this).hasClass("empty")) { /// within the #board remove the empty class and add either an X or an O value to the square when it is is clicked
$(this).removeClass("empty").append("<span class='" + circleOrEx + "'>" + circleOrEx + "</span"); //allows user to input X or O value in the square
checkIfWon($(this).index(), circleOrEx); //function determines the turn cycle of the game
if (circleOrEx === "o") { // if O has played their turn, run code on line 68
circleOrEx = "x"; // now it is X's turn
} else {
circleOrEx = "o"; // X has played their turn, now it is circle's turn
}
}
});
// once you click the button with the 'newGame' id, run the function
$("#newGame").on("click", function() {
var boardSquares = $("#board").find("div"); //boardSquares now becomes every div element within #board, which is each of the nine blank squares that make up the tic tac toe game
var firstEmptyMemorySquare = $(".container").find(".nine").filter(function() { //returns a value for firstEmptyMemorySquare if the function passes these requirements place the #board within the class nine that is in the containter. (once the game clicking the refresh button, place the previous board in an empty section of the page)
return $.trim($(this).text()) === "" && $(this).children().length === 0;
}).not("#board").first();
if (firstEmptyMemorySquare.length == 1) { //placing a previously played game in an EmptyMemorySquare
firstEmptyMemorySquare.html($("#board").html());
} else {
$(".container").find(".nine").not("#board").empty();
$(".container").find(".nine").first().html($("#board").html());
}
//deletes anything in the empty class to games that are in progress, which allows user to enter X's or O's in the boardSquares
boardSquares.each(function() {
$(this).addClass("empty").empty();
})
isGameInProgress = true;
})
//checks if a player won. chosenSquare is the final value in a winning combination; the possible values for the chosenSquare parameter is [0] - [8]
function checkIfWon(chosenSquare) {
var mulitArr = winningCombos[chosenSquare];
var playerWon;
for (var i = 0; i < mulitArr.length; i++) { //the nested loop provides the length of the multidimensional array
playerWon = true;
for (var j = 0; j < mulitArr[i].length; j++) { //value of j starts at zero so the user must enter three values within a winning combination. If j initially starts at 1 user only needs to match two of the same values within a winning combination. If j => 2 the user only needs to match one value of a winning combination (which would be any square on the board)
if (!$("#board").find("div").eq(mulitArr[i][j]).find("span").hasClass(circleOrEx)) { //Explain this condition
playerWon = false;
}
}
if (playerWon) { //remaining lines affect the board when a player enters a winning combination
for (var j = 0; j < mulitArr[i].length; j++) {
$("#board").find("div").eq(mulitArr[i][j]).find("." + circleOrEx).addClass("green"); //makes the first two inputs of the winning comination the color green
}
$("#board").find("div").eq(chosenSquare).find("." + circleOrEx).addClass("green"); //makes the last input of the winning combination (chosenSquare) the color green
alert("Winner is " + circleOrEx.toUpperCase() + "!"); //alert "Winner is X" or "Winner is O"
var xWinCount = 0;
var xWinCount = 0;
if (playerWon = Ex){
document.getElementById('xWinCount');
var xWin = xWinCount.innerHTML;
xWinin++;
xWinCount.innerHTML = x-win;
}
else{
document.getElementById('oWinCount');
var oWin = oWinCount.innerHTML;
oWin++;
oWinCount.innerHTML = o-win;
}
isGameInProgress = false; //since a player has won, the game is no longer in progress
return false; //this exits the loop
}
}
}
})
