I am really new, but I thought I'd go a head post something fun and a stupid.
It is a Tic Tac Toe game built in java script. It plays back and does a fairly good job. I have a demo on my site at www.ChippewaValleyWebDesign.com
Feel free to copy and improve or modify the code. I just ask you either leave the current link in there to my site or add some where on the page you paste the code to. I know it is a shameless SEO thing, but it's not like I can force you to do it.
Anyhow enjoy. Paste the code below in a text doc and save it off as a html file and open in the browser and should work like a charm.
<html>
<head>
<script>
//the setup
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 = " ";
grid[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;
//across
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[k] == "O") {
tallyA++;
if(tallyA == 2) {
for(var j = 0; j < 3; j++) {
if(grid[j] == "n") {
document.getElementById(i + "cell" + j).innerHTML = "O";
grid[j] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
if(grid[k] == "O" && gameNotOver) {
tallyD++;
if (tallyD == 2) {
for (var j = 0; j < 3; j++) {
if (grid[j] == "n") {
document.getElementById(j + "cell" + i).innerHTML = "O";
grid[j] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
}
}
var newTally = 0;
for(var i = 0; i < 3 && gameNotOver; i++) {
if(grid == "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";
}
//ACROSS
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
if (grid[k] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[k] == xORoLooking) {
rowOne++;
if (rowOne == 3) {
keep = false;
//plantBlockAcross(i, k);
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] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[k] == 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 == 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 == "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] == "O") {
rowOne--;
}
else {
if (grid[k] == "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[k] == "O") {
rowOne--;
}
else {
if (grid[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[yAx] == "n") {
grid[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] == "n") {
grid[yAx] = "O";
document.getElementById(yAx + "cell" + i).innerHTML = "O";
gone = true;
}
}
}
</script>
</head>
<body>
<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"> </td>
<td id="0cell1" onClick="move(0, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="0cell2" onClick="move(0, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
<tr>
<td id="1cell0" onClick="move(1, 0);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="1cell1" onClick="move(1, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="1cell2" onClick="move(1, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
<tr>
<td id="2cell0" onClick="move(2, 0);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="2cell1" onClick="move(2, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="2cell2" onClick="move(2, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
</table>
<input type="button" value="Reset Game" onClick="resetGame()"/>
<h1><span id="infoPane"></span></h1>
</body>
</html>
It is a Tic Tac Toe game built in java script. It plays back and does a fairly good job. I have a demo on my site at www.ChippewaValleyWebDesign.com
Feel free to copy and improve or modify the code. I just ask you either leave the current link in there to my site or add some where on the page you paste the code to. I know it is a shameless SEO thing, but it's not like I can force you to do it.
Anyhow enjoy. Paste the code below in a text doc and save it off as a html file and open in the browser and should work like a charm.
<html>
<head>
<script>
//the setup
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 = " ";
grid[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;
//across
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[k] == "O") {
tallyA++;
if(tallyA == 2) {
for(var j = 0; j < 3; j++) {
if(grid[j] == "n") {
document.getElementById(i + "cell" + j).innerHTML = "O";
grid[j] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
if(grid[k] == "O" && gameNotOver) {
tallyD++;
if (tallyD == 2) {
for (var j = 0; j < 3; j++) {
if (grid[j] == "n") {
document.getElementById(j + "cell" + i).innerHTML = "O";
grid[j] = "O";
moves =9;
gameNotOver = false;
victoryChant(1);
}
}
}
}
}
}
var newTally = 0;
for(var i = 0; i < 3 && gameNotOver; i++) {
if(grid == "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";
}
//ACROSS
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
if (grid[k] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[k] == xORoLooking) {
rowOne++;
if (rowOne == 3) {
keep = false;
//plantBlockAcross(i, k);
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] == xORoNotLooking) {
rowOne--;
}
else {
if (grid[k] == 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 == 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 == "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] == "O") {
rowOne--;
}
else {
if (grid[k] == "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[k] == "O") {
rowOne--;
}
else {
if (grid[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[yAx] == "n") {
grid[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] == "n") {
grid[yAx] = "O";
document.getElementById(yAx + "cell" + i).innerHTML = "O";
gone = true;
}
}
}
</script>
</head>
<body>
<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"> </td>
<td id="0cell1" onClick="move(0, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="0cell2" onClick="move(0, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
<tr>
<td id="1cell0" onClick="move(1, 0);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="1cell1" onClick="move(1, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="1cell2" onClick="move(1, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
<tr>
<td id="2cell0" onClick="move(2, 0);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="2cell1" onClick="move(2, 1);" width="50px" height="50px" style="font-size:50px"> </td>
<td id="2cell2" onClick="move(2, 2);" width="50px" height="50px" style="font-size:50px"> </td>
</tr>
</table>
<input type="button" value="Reset Game" onClick="resetGame()"/>
<h1><span id="infoPane"></span></h1>
</body>
</html>