Tic Tac Toe Game

[mlarrabee]

Hey, I am new here but figured I'd post my javascript tic tac toe game. The code is pasted below and you can see a working copy at site www.chippewaValleyWebDesign.com (http://chippewaValleyWebDesign.com). I apologize in advance for the "dirty" code, but it seems like I have been so busy as of late I have been working on a "make it work and clean it later policy". You should be able to drop the below code directly on a page and it should work just fine, but I would suggest at least putting the <script> in the header if not in its own file.

If you do plug this into another website please link back to my site. If you do not modify the code below it already has a link back to me.


<script>

var grid = new Array();
grid[0] = new Array("n","n","n");
grid[1] = new Array("n","n","n");
grid[2] = new Array("n","n","n");

var moves = 0;

var gone = false;

function resetGame() {
moves = 0;
gone = false;
document.getElementById("infoPane").innerHTML = "";
for(var i = 0; i < 3; i++) {
for(var j = 0; j < 3; j++) {
document.getElementById(i + "cell" + j).innerHTML = "&nbsp;";
grid[i][j] = "n";
}
}
}

function move(yAx, xAx) {
if(grid[yAx][xAx] == "n") {
moves++;
gone =false;
document.getElementById(yAx + "cell" + xAx).innerHTML = "X";
grid[yAx][xAx] = "X";
if (!checkWon(0)) {
if (goForWin()) {
checkBlock();
checkWon(1);
}
}
}

}


function goForWin() {
var gameNotOver = true;
var notDone = true;

for(var i = 0; grid.length > i && notDone; i++) {
var keep = true;
var tallyA = 0;
var tallyD = 0;
for(var k = 0; grid.length > k && keep; k++) {

if(grid[i][k] == "O") {
tallyA++;
if(tallyA == 2) {

for(var j = 0; j < 3; j++) {
if(grid[i][j] == "n") {
document.getElementById(i + "cell" + j).innerHTML = "O";
grid[i][j] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
if(grid[k][i] == "O" && gameNotOver) {
tallyD++;
if (tallyD == 2) {

for (var j = 0; j < 3; j++) {
if (grid[j][i] == "n") {
document.getElementById(j + "cell" + i).innerHTML = "O";
grid[j][i] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
}
}
var newTally = 0;
for(var i = 0; i < 3 && gameNotOver; i++) {
if(grid[i][i] == "O") {
newTally++;
if(newTally == 2) {
for (var k = 0; k < 3; k++) {
if (grid[k][k] == "n") {
document.getElementById(k + "cell" + k).innerHTML = "O";
grid[k][k] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
}
if (grid[0][2] == "O" && grid[1][1] == "O" && grid[2][0] == "n") {
document.getElementById(2 + "cell" + 0).innerHTML = "O";
grid[2][0] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
else if (grid[0][2] == "O" && grid[2][0] == "O" && grid[1][1] == "n") {
document.getElementById(1 + "cell" + 1).innerHTML = "O";
grid[1][1] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
} else if(grid[2][0] == "O" && grid[1][1] == "O" && grid[0][2] == "n") {
document.getElementById(0 + "cell" + 2).innerHTML = "O";
grid[0][2] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
return gameNotOver;
}

function victoryChant(mySwitch) {
var winString = "You Won!";
if(mySwitch == 1) {
winString = "I Won! [insert evil laugh here]";
}
document.getElementById("infoPane").innerHTML = winString;
}

function checkWon(mySwitch) {

var won = false;
var xORoLooking = "X";
var xORoNotLooking = "O";

if(mySwitch == 1) {
won = true;
xORoLooking = "O";
xORoNotLooking = "X";

}

var keep = true;
for (var i = 0; grid.length > i && keep; i++) {

var rowOne = 0;
for (var k = 0; (grid.length > k && keep); k++) {
//across
//alert("test grid: " + i + " " + k + " row count: " + rowOne + " grid value: " + grid[i][k]);
if (grid[i][k] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[i][k] == xORoLooking) {
rowOne++;
if (rowOne == 3) {
keep = false;

victoryChant(mySwitch);
moves = 9;
if(mySwitch == 1) {
won = false;
} else {
won = true;
}

}
}
}
}
}

//DOWN
keep = true;
for (var i = 0; grid.length > i && !gone; i++) {

var rowOne = 0;
for (var k = 0; (grid.length > k && keep); k++) {
//across
if (grid[k][i] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[k][i] == xORoLooking) {
rowOne++;
if (rowOne == 3) {
keep = false;
victoryChant(mySwitch);
moves = 9;
if(mySwitch == 1) {
won = false;
} else {
won = true;
}
}
}
}
}
}
var rowOne = 0;
for(var i = 0; grid.length > i; i++) {
if(grid[i][i] == xORoLooking) {
rowOne++;
if(rowOne == 3) {
moves = 9;
victoryChant(mySwitch);
if(mySwitch == 1) {
won = false;
} else {
won = true;
}
}
}
}
if(grid[2][0] == xORoLooking && grid[1][1] == xORoLooking && grid[0][2] == xORoLooking) {
moves = 9;
victoryChant(mySwitch);
if(mySwitch == 1) {
won = false;
} else {
won = true;
}
}

return won;

}

function checkBlock() {
if (moves < 9) {
moves++;
//var rowOne = 0;
var rowTwo = 0;
var rowThree = 0;
var keep = true;
//check across - i - k

testAcross();

//test down
testDown();

var xTally = 0;
for(var i = 0; i < 3 && xTally < 2; i++) {
if(grid[i][i] == "X") {
xTally++;
if(xTally == 2) {
for(var j = 0; j < 3 && !gone; j++) {
if(grid[j][j] == "n") {
grid[j][j] = "O";
document.getElementById(j + "cell" + j).innerHTML = "O";
gone = true;
}
}
}
}
}
if (!gone) {
xTally = 0;
if (grid[0][2] == "X") {
xTally++;
}
if(grid[1][1] == "X") {
xTally++;
}
if(grid[2][0] == "X") {
xTally++;
}

if(xTally == 2) {
if(grid[0][2] == "n") {
grid[0][2] = "O";
document.getElementById("0cell2").innerHTML = "O";
gone = true;
}else if(grid[1][1] == "n") {
grid[1][1] = "O";
document.getElementById("1cell1").innerHTML = "O";
gone = true;
} else if(grid[2][0] == "n") {
grid[2][0] = "O";
document.getElementById("2cell0").innerHTML = "O";
gone = true;
}
}


}
if (!gone) {

randomMove();
}
}
}

function randomMove() {
while (!gone) {
var tryNumOne = Math.floor(Math.random() * 3);
var tryNumTwo = Math.floor(Math.random() * 3);
if (grid[tryNumOne][tryNumTwo] == "n") {
grid[tryNumOne][tryNumTwo] = "O";
document.getElementById(tryNumOne + "cell" + tryNumTwo).innerHTML = "O";
gone = true;
}
}
}

function testDown() {

for (var i = 0; grid.length > i && !gone; i++) {
var keep = true;
var rowOne = 0;
for (var k = 0; (grid.length > k && keep); k++) {
//across
if (grid[k][i] == "O") {
rowOne--;
}
else {
if (grid[k][i] == "X") {
rowOne++;
if (rowOne == 2) {
keep = false;
plantBlockDown(k, i);
}
}
}
}
}

}

function testAcross() {

for (var i = 0; grid.length > i && !gone; i++) {
var keep = true;
var rowOne = 0;
for (var k = 0; (grid.length > k && keep); k++) {
//across
if (grid[i][k] == "O") {
rowOne--;
}
else {
if (grid[i][k] == "X") {
rowOne++;
if (rowOne == 2) {
keep = false;
plantBlockAcross(i, k);
}
}
}
}
}

}

function plantBlockDown(xAx, yAx) {
for(var i = 0; grid[yAx].length > i; i++) {
if(grid[i][yAx] == "n") {
grid[i][yAx] = "O";
document.getElementById(i + "cell" + yAx).innerHTML = "O";
gone = true;
}
}
}

function plantBlockAcross(yAx, xAx) {
for(var i = 0; grid[yAx].length > i; i++) {
if(grid[yAx][i] == "n") {
grid[yAx][i] = "O";
document.getElementById(yAx + "cell" + i).innerHTML = "O";
gone = true;
}
}
}

</script>

<table border="3">
<tr>
<th colspan="3"><a href="http://www.chippewaValleyWebDesign.com">Courtesy of <br/>Eau Claire Web Design</a></th>
</tr>
<tr>
<td id="0cell0" onClick="move(0, 0);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="0cell1" onClick="move(0, 1);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="0cell2" onClick="move(0, 2);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
</tr>
<tr>
<td id="1cell0" onClick="move(1, 0);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="1cell1" onClick="move(1, 1);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="1cell2" onClick="move(1, 2);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
</tr>
<tr>
<td id="2cell0" onClick="move(2, 0);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="2cell1" onClick="move(2, 1);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
<td id="2cell2" onClick="move(2, 2);" width="50px" height="50px" style="font-size:50px">&nbsp;</td>
</tr>
</table>
<input type="button" value="Reset Game" onClick="resetGame()"/>
<h1><span id="infoPane"></span></h1>