CODEWITHSUNDEEP
javascript
Alvi
Alvi

Reputation: 21

How to tell if a player wins or loses in tic tac toe

<!DOCTYPE html>
<html>
<head>
<link href="tictactoe.css" type="text/css" rel="stylesheet" >
<meta charset= "utf-8">
<title>Tic Tac Toe</title>
</head>
<body>

<h1>Tic Tac Toe</h1>
<form>
Current Player <p id="currentplayer">X</p>
<table id= "game" border="1">
<tr>
<td type = "button" onclick = "set('box1');" id = "box1" ></button></td>
<td type = "button" onclick = "set('box2');" id = "box2" ></button></td>
<td type = "button" onclick = "set('box3');" id = "box3" ></button></td> 
</tr>
<tr>
<td type = "button" onclick = "set('box4');" id = "box4" ></button></td>
<td type = "button" onclick = "set('box5');" id = "box5" ></button></td>
<td type = "button" onclick = "set('box6');" id = "box6" ></button></td> 
</tr>
<tr>
<td type = "button" onclick = "set('box7');" id = "box7" ></button></td>
<td type = "button" onclick = "set('box8');" id = "box8" ></button></td>
<td type = "button" onclick = "set('box9');" id = "box9" ></button></td> 
</tr>
</table>

<button id = "restart">New Game </button>
</form>

<script src= "tictactoe.js" type = "text/Javascript"></script>
</body>
</html>

This is my HTML code.

h1 {
font-family: "Courier New";
}
body {
text-align: center;
background-color: #FFB6C1;
}

table {
height: 300px;
width: 300px;
margin: auto;

}

button {
height: 100px;
width: 100px;
}
#box1 {
height: 100px;
width: 100px;
}

#box2 {
height: 100px;
width: 100px;
}
#box3 {
height: 100px;
width: 100px;
}
#box4 {
height: 100px;
width: 100px;
}
#box5 {
height: 100px;
width: 100px;
}
#box6 {
height: 100px;
width: 100px;
}
#box7 {
height: 100px;
width: 100px;
}
#box8 {
height: 100px;
width: 100px;
}
#box9 {
height: 100px;
width: 100px;
}

And this is my CSS for the tic tac toe game. 

function changeplayer()
{
var player = document.getElementById("currentplayer").innerHTML;
if(player == "X")
{
    document.getElementById("currentplayer").innerHTML = "O";
}
else{
    document.getElementById("currentplayer").innerHTML = "X";
}

}

function set(idvalue)
{
var buttonclicked = document.getElementById(idvalue);
if(buttonclicked.innerHTML == "" || buttonclicked.innerHTML == null)
{
    var player = document.getElementById("currentplayer").innerHTML; 
    buttonclicked.innerHTML = player;
}
changeplayer();

}

This is my JS for the tic tac toe game. The thing is I don't know how to inform the player if they won or not. So far on the board the two people can take turns and that's all. How can I add a code into the Javascript to show that "X" or "O" has won? Also, I want to know if my code seems correct so far. All suggestions will be greatly appreciated!

Upvotes: 1

Views: 278

Answers (1)

SLi
SLi

Reputation: 85

To know which player won you need to know if somebody has three "X" or "O" in a row. You can do that by adding some more logic into your code or grabbing CSS values/states from the UI.

Would recommend to put some more logic into the code. You do that by e.g. adding a multidimensional array to your javascript code. There you are building up the 3x3 UI with an array of 3 rows having each 3 entries.

var gameBoard = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

But instead of the numbers from 1 to 9 you store which player has put his/her "box" onto that location. You could do that in your set() function as you know inside there, which player has selected which box. After each call to the set() function, you iterate through that array and find out if somebody has three "boxes in a row or column"

Beside that, if you look at your CSS, you are working with CSS IDs instead of a class. A class could be defined one time and be used for any of your "boxes" instead of writing the same definitions 9 times.

Before you bother about code quality and more, I recommend that you get it working "somehow" and then try to improve it step by step.

Have fun trying it and dont hestitate to ask again.

Upvotes: 2

Related Questions