I need help with a question my teacher wants us to do by tomorrow. I would love for you to try to help me out with this.
The following functions must be implemented:
- A function that initializes all variables
- Variables that keep track of which player is currently playing, and which player is next
- Variables that keep count of X's and O's played
var currentPlayer = prompt("Who is The Current Player X=1 O=2");
var grid=new Array(3);
grid[0]=new Array(3);
grid[1]=new Array(3);
grid[2]=new Array(3);
for (var i=0; i<=2; i++) {
for (var j=0; j<=2; j++) {
grid[i][j]=0;
}
}
// Checks If Grid Is Already Clicked
function clickCell(x,y) {
if (grid[x][y]>0) {
alert("Dont Try To Cheat Bud!!!!!");
}
// Clicking Of Boxes
else {
if (currentPlayer==1) {
document.getElementById("cell_"+x+"_"+y).style.color="#3F88C5";
document.getElementById("cell_"+x+"_"+y).innerHTML="X";
grid[x][y]=1;
currentPlayer=2;
} else {
document.getElementById("cell_"+x+"_"+y).style.color="#E2C290";
document.getElementById("cell_"+x+"_"+y).innerHTML="O";
grid[x][y]=2;
currentPlayer=1;
}
}
}
// Reset Game
function reset() {
for (var i=0; i<=2; i++) {
for (var j=0; j<=2; j++) {
grid[i][j]=0;
document.getElementById("cell_"+i+"_"+j).innerHTML=" ";
}
}
currentPlayer=1;
}
h1 {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 53px;
}
div {
text-align: center;
margin: 0px auto;
text-align: center;
margin: auto;
}
body {
background-color: #02c39a;
}
.cell {
width:80px;
height:80px;
border: 5px solid #000000;
background: #FFFFFF;
font-size: 46pt;
font-family: arial;
font-weight: bold;
text-align: center;
margin: auto;
}
fieldset {
text-align: center;
margin: auto;
}
.cell:hover {
background: #C2DBFC;
text-align: center;
}
<html>
<head>
<meta charset="utf-8" />
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" type="text/css" href="tictoe.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="tictoe.js"></script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<fieldset>
<p>Please Reload The Page To Choose Player Who Goes First Again</p>
<div>
<Table>
<tr>
<td id="cell_0_0" class="cell" onClick="JavaScript: clickCell(0,0);"> </td>
<td id="cell_0_1" class="cell" onClick="JavaScript: clickCell(0,1);"> </td>
<td id="cell_0_2" class="cell" onClick="JavaScript: clickCell(0,2);"> </td>
</tr>
<tr>
<td id="cell_1_0" class="cell" onClick="JavaScript: clickCell(1,0);"> </td>
<td id="cell_1_1" class="cell" onClick="JavaScript: clickCell(1,1);"> </td>
<td id="cell_1_2" class="cell" onClick="JavaScript: clickCell(1,2);"> </td>
</tr>
<tr>
<td id="cell_2_0" class="cell" onClick="JavaScript: clickCell(2,0);"> </td>
<td id="cell_2_1" class="cell" onClick="JavaScript: clickCell(2,1);"> </td>
<td id="cell_2_2" class="cell" onClick="JavaScript: clickCell(2,2);"> </td>
</tr>
</table>
</div>
<input type=button onClick="Javascript: reset();" value="Reset">
<br/><br/>
</body>
</html>