tic-tac-toe-win-sravani

by John Kiran

HTML

<p id="para">

</p>
<table id="tableElem">
    <thead>
        <tr>
            <th>start</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td  id="cell1" onclick="findIndex(this)">1</td>
            <td  id="cell2" onclick="findIndex(this)">2</td>
            <td  id="cell3" onclick="findIndex(this)">3</td>
        </tr>
        <tr>
            <td  id="cell4" onclick="findIndex(this)">4</td>
            <td  id="cell5" onclick="findIndex(this)">5</td>
            <td  id="cell6" onclick="findIndex(this)">6</td>
        </tr>
        <tr>
            <td  id="cell7" onclick="findIndex(this)">7</td>
            <td  id="cell8" onclick="findIndex(this)">8</td>
            <td  id="cell9" onclick="findIndex(this)">9</td>
        </tr>
    </tbody>
</table>





































<h1>Tic-tac-toe</h1>
<p>Use the table above as the game board. The state of the game is represented by an array of arrays:</p>
<pre><code>let state = [
  [ 'x', 'o', null ],
  [ 'x', 'x', 'o' ],
  [ 'o', 'x', null ]
];
</code></pre>
<ul>
<li>Write the <code>populate</code> function to populate the table according to the game state.</li>
<li>Write the <code>nextPlayer</code> function to determine which player should go next based on the state of the game, assuming that "x" always goes first. Return "x" or "o".</li>
<li>Write the <code>findWinner</code> function to determine whether there is a winner in the current game. Return "x" or "o" if there is a winner, and <code>null</code> if there is not.</li>
<li>Imagine a 4 x 4 board where a player wins by connecting three positions -- how would your solutions change?</li>
<li>How would your solutions change to adapt to arbitrary board sizes and arbitrary requirements for the number of positions that must connect? For example, consider an 8x8 board where four of a player's pieces must connect.</li>
</ul>

CSS

body {
  font-family: Helvetica;
}

td {
  padding: 1em 1.5em;
  text-align: center;
  border: 1px solid black;
}
td:hover{
  background:orange;
}

table {
  border:1px solid black;
  border-collapse: collapse;
  margin-left:400px;
  color:#665656;
}
p{
  margin-left:400px;
  
}

JavaScript

var state=true;
var winner=false;
var count=0;
var userInp;
var array=[];
parent=document.getElementById("tableElem");
var cell=document.getElementsByTagName("td");
console.log(cell);
var para=document.getElementById("para");
/* para.style="margin-left:400px";
cell.style="over:blue";
parent.style="margin-left:400px"; */
function populate (board) {
if(count<=8) {
   if(winner==false) {
	if(state) {
	  para.innerHTML="This is O turn:" ;
		cell[board].innerHTML="X";
		state=false;
    findWinner (cell[board].innerHTML);
    if(winner==true) {
    	para.innerHTML=" X WON";
      count=0;
        parent.readOnly=true;
    }
	} else{
	  
		cell[board].innerHTML="O";
    para.innerHTML="This is X turn:" ;
		state=true;
    userInp=cell[board].innerHTML;
    findWinner (userInp);
    if(winner==true) {
    	para.innerHTML=" O WON";
      count=0;
      parent.readOnly=true;
    }
	} 
   count++;
  }
  }
  else {
   para.innerHTML="TIE BETWEEN X & O";
   parent.readOnly=true;
  }
}
function nextPlayer (board) {
}

function findWinner (board) {
if((checkArray(1,2,3)||checkArray(1,4,7)||checkArray(7,8,9)||checkArray(3,6,9)||checkArray(1,5,9)||checkArray(3,5,7)||checkArray(2,5,8)||checkArray(4,5,6))==true) {

   winner=true;
  }
}

function findIndex(value) {

  //value="cell"+value.id;
  console.log("onclick the value is "+ value.id);
  populate(value.id);
}

function checkArray(index1,index2,index3) {
    if((cell[index1-1].innerHTML==cell[index2-1].innerHTML)&&(cell[index1-1].innerHTML==cell[index3-1].innerHTML)&&(cell[index2-1].innerHTML==cell[index3-1].innerHTML)==true) {
    return true;
    } else {
     return false;
    }
}