<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<tr>
<td><div id="1.1" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="1.2" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="1.3" class="grid" onclick="clicked(this.id)"></div></td>
</tr>
<tr>
<td><div id="2.1" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="2.2" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="2.3" class="grid" onclick="clicked(this.id)"></div></td>
</tr>
<tr>
<td><div id="3.1" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="3.2" class="grid" onclick="clicked(this.id)"></div></td>
<td><div id="3.3" class="grid" onclick="clicked(this.id)"></div></td>
</tr>
</table>
<div style="float:right; overflow:hidden; padding-right:200px">
Player 1 Name: <input type="text" id="txtPlayer1Name"/> Color : <div style="color:red;overflow:hidden">Red</div>
<br/>
<br/>
Player 2 Name: <input type="text" id="txtPlayer2Name"/> Color: <div style="color:Green;overflow:hidden">Green</div>
</div>
<div id="divResult" style="display:none">Winner:
<div id="divwinner"></div>
</div>
<button onclick="Reset()" value="Play Again">Play Again</button>
</body>
</html>
// Code goes here
var player1Score = [];
var player2Score = [];
var clickCount = 0;
function clicked(id){
if(clickCount%2==0 && player1Score.indexOf(id)<0 && player2Score.indexOf(id)<0 && clickCount<=9){
document.getElementById(id).style.backgroundColor = "red";
player1Score.push(id);
clickCount++;
if(checkWinnerPlayer1())
clickCount = 10;
}
if(clickCount%2!=0 && player1Score.indexOf(id)<0 && player2Score.indexOf(id)<0 && clickCount<=9){
document.getElementById(id).style.backgroundColor = "green";
player2Score.push(id);
clickCount++;
if(checkWinnerPlayer2())
clickCount = 10;
}
}
function Reset()
{
player1Score = [];
player2Score = [];
clickCount = 0;
location.reload();
}
function checkWinnerPlayer1(){
var player1rows = [];
var player1cols = [];
for(i=0;i<player1Score.length; i++){
var rowsColumns1 = [];
rowsColumns1 = player1Score[i].toString().split('.');
player1rows.push(rowsColumns1[0]);
player1cols.push(rowsColumns1[1]);
}
var player1Winner = checkForRowColumn(player1rows);
if(!player1Winner)
player1Winner = checkForRowColumn(player1cols);
if(!player1Winner)
player1Winner = checkForDiagonal(player1Score);
if(player1Winner){
var play1 = document.getElementById("txtPlayer1Name").value;
alert(play1+ ' wins click play again to resume');
document.getElementById("divResult").style.display = "block";
document.getElementById("divwinner").innerHTML = play1;
return true;
}
return false;
}
function checkWinnerPlayer2(){
var player2rows = [];
var player2cols = [];
for(i=0;i<player2Score.length; i++){
var rowsColumns2 = [];
rowsColumns2 = player2Score[i].toString().split('.');
player2rows.push(rowsColumns2[0]);
player2cols.push(rowsColumns2[1]);
}
var player2Winner = checkForRowColumn(player2rows);
if(!player2Winner)
player2Winner = checkForRowColumn(player2cols);
if(!player2Winner)
player2Winner = checkForDiagonal(player2Score);
if(player2Winner){
var play2 = document.getElementById("txtPlayer2Name").value;
alert(play2 +'wins click play again to resume');
document.getElementById("divResult").style.display = "block";
document.getElementById("divwinner").innerHTML = play2;
return true;
}
return false;
}
function checkForRowColumn(array){
if(array.length>2){
var one = 0;
var two = 0;
var three = 0;
for(i=0;i<array.length;i++){
if(array[i]=='1')
one++;
if(array[i]=='2')
two++;
if(array[i]=='3')
three++;
}
if(one==3 || two==3 || three==3)
return true;
return false;
}
return false;
}
function checkForDiagonal(playerScore){
if(playerScore.length >2){
if(playerScore.indexOf('1.1')>-1 && playerScore.indexOf('2.2')>-1 && playerScore.indexOf('3.3')>-1)
return true;
if(playerScore.indexOf('1.3')>-1 && playerScore.indexOf('2.2')>-1 && playerScore.indexOf('3.1')>-1)
return true;
return false;
}
}
/* Styles go here */
.grid{
width: 30px;
height: 30px;
border: solid 1px black;
cursor:pointer;
}