<script>
//************************************************** ************************************
// Tic Tac Toe Game Written By iam_clint (
www.thescripts.com) , you may use this on any site you wish.
//************************************************** *************************************
//Global Variable Desclarations
var turn = 0;
var comp = 0;
var computer;
var active = false;
window.onload = resetGame; //Starts the game on winow load.
function setXO(row, col) {
//this function sets the X or O in place
if (active) {
var tbl = document.getElementById("ttt");
var cRow = tbl.getElementsByTagName("tr")[row];
var cCol = cRow.getElementsByTagName("td")[col];
if (cCol.getAttribute("xo")=="0") { //makes sure the place you clicked wasn't already marked
if (turn==2 && document.getElementById("computer").checked && comp==0) { alert("Not your turn!"); return false; } //checks to make sure its your turn.
cCol.setAttribute("xo", turn); //sets your player number to that spot
document.getElementById("write").play(); //plays audio file because you clicked and the spot was available;
if (turn==1) { turn = 2; cCol.innerHTML = "<img src='x.gif'>"; } else { turn = 1; cCol.innerHTML = "<img src='o.gif'>"; comp = 0; } //set the players image in place.
updateTurn(); //updates who turn it is
}
}
}
function updateTurn() {
//updates whos turn it is.
if (active) {
checkWinner();
checkDraw();
document.getElementById("turn").innerHTML = "Player "+turn+"'s turn"; //says on screen whos turn it is
if (document.getElementById("computer").checked && turn==2) {
computer = window.setTimeout("computerMove()", random(500, 3000)); //if playing computer it makes a time out randomly to make its move so its not instant.
}
}
}
function computerMove() {
//places computers mark in a random spot on the board that isn't used.
var tbl = document.getElementById("ttt");
var row = random(0,2)
var col = random(0,2)
var place = tbl.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].getAttribute("xo");
while (place!=0) {
row = random(0,2)
col = random(0,2)
place = tbl.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].getAttribute("xo");
}
comp = 1;
setXO(row, col);
}
function checkDraw() {
//check to see whether or not all places are filled up and no winner was found. (cats game)
var draw = true;
var tbl = document.getElementById("ttt");
var rows = tbl.getElementsByTagName("tr");
for (i=0; i<rows.length; i++) {
var cols = rows[i].getElementsByTagName("td");
for (c=0; c<cols.length; c++) {
if (cols[c].getAttribute("xo")==0) { draw = false; }
}
}
if (draw) { alert("Cats Game!"); resetGame(); return false; }
}
function checkWinner() {
//Check for a winner
var tbl = document.getElementById("ttt");
var check = new Array(23); //there are 24 possible ways to win on tic tac toe theres striaght accross, striaght down, and diagonal. they are as follow
var ps = new Array(2);
//remember this is based off 0 start not 1.
//so in this array (check) i am getting sets of 3 in an order. set 1 would be check[0] check[1] and check[2] so it says first row ("tr")[0] first cell ("td")[0] and saves it value
//next it checks row 1 ("tr")[1] and cell 1 ("td")[1] then it does row 2 cell 2, so now check[0] check[1] and check[2] are the the values of whoever marked tohse areas. this just continues with every possibility.
check[0] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].getAttribute("xo"); //row 0 col 0 -- this start diagonal from top left to bottom right
check[1] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].getAttribute("xo"); //row 1 col 1
check[2] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].getAttribute("xo"); //row 2 col 2
check[3] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[2].getAttribute("xo"); //row 0 col 2 -- this starts diagonal from top right to bottom left
check[4] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].getAttribute("xo"); //row 1 col 1
check[5] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[0].getAttribute("xo"); //row 2 col 0
check[6] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].getAttribute("xo"); //row 0 col 0 -- this starts straight up and down check for col 0
check[7] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[0].getAttribute("xo"); //row 1 col 0
check[8] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[0].getAttribute("xo"); //row 2 col 0
check[9] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[1].getAttribute("xo"); //row 0 col 1 -- this starts straight up and down check for col 1
check[10] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].getAttribute("xo"); //row 1 col 1
check[11] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[1].getAttribute("xo"); //row 2 col 1
check[12] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[2].getAttribute("xo"); //row 0 col 2 -- this starts straight up and down check for col 2
check[13] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].getAttribute("xo"); //row 1 col 2
check[14] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].getAttribute("xo"); //row 2 col 2
check[15] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].getAttribute("xo"); //row 0 col 0 -- this starts left and right check for row 0
check[16] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[1].getAttribute("xo"); //row 0 col 1
check[17] = tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[2].getAttribute("xo"); //row 0 col 2
check[18] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[0].getAttribute("xo"); //row 1 col 0 -- this starts left and right check for row 1
check[19] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].getAttribute("xo"); //row 1 col 1
check[20] = tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].getAttribute("xo"); //row 1 col 2
check[21] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[0].getAttribute("xo"); //row 2 col 0 -- this starts left and right check for row 2
check[22] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[1].getAttribute("xo"); //row 2 col 1
check[23] = tbl.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].getAttribute("xo"); //row 2 col 2
var b = 0
//Instead of checking each one with a bunch of if statements this is how i check for a winner
for (i=0; i<=check.length; i++) {
if (b==3) { //if we have first 3 of the array ps set we check for a win.
if (ps[0]!=0 && ps[1]!=0 && ps[2]!=0) { //make sure that all 3 aren't blank
if (ps[0]==ps[1] && ps[1]==ps[2]) { return win(ps[2]); } //in this loop it sets an array of 3 items ps[] now remember it does 3 at a time because theres 3 rows and 3 cols in tic tac toe. so it puts our first 3 possibilities togethor thats check[0] check[1] and check[2] then it compairs to see if theres a winner in those places so it says if ps[0]==ps[1] && ps[1]==ps[2] because if 0 = 1 and 1 = 2 that means all 3 marks were made by the same player.
}
b = 0 //resets the variable to 0 so it can get the next 3 possibilities.
}
ps[b] = check[i]; //sets the possibilities in to the array.
b++; //just adds 1 to the variable b
}
}
function win(player) {
document.getElementById("turn").innerHTML = "<font size='20' color='red'>Player "+player+" Wins!</font>"; //simply makes big red text that says player whoever wins!
document.getElementById("win").play(); //plays audio file
var tbl = document.getElementById("ttt");
var rows = tbl.getElementsByTagName("tr");
for (i=0; i<rows.length; i++) { //this loop sets all the slots to fireworks,gif
var cols = rows[i].getElementsByTagName("td");
for (c=0; c<cols.length; c++) {
cols[c].innerHTML = "<img src='fireworks.gif'>";
}
}
active = false; //tells everything that the game isn't active
return false;
}
function random(min, max) {
//Just a function for making random numbers more easily.
random_num = Math.round((Math.random()*max)+min)
return random_num
}
function resetGame() {
//resets the game
active = true; //tells everything the game is on
document.getElementById("buttons").play(); //plays audio file because you clicked a button.
turn = 1; //sets whos turn it is, 1 = player 1 and 2 = players 2
comp = 0; //sets comp to 0
var tbl = document.getElementById("ttt");
var rows = tbl.getElementsByTagName("tr");
for (i=0; i<rows.length; i++) { //sets all attributes back to 0 (no one has marked here) and sets a blank image in place so there sno X's or O's
var cols = rows[i].getElementsByTagName("td");
for (c=0; c<cols.length; c++) {
cols[c].innerHTML = "<img src='blank.gif'>";
cols[c].setAttribute("xo", "0");
}
}
updateTurn();
}
</script>
<EMBED NAME="write" id="write" SRC="write.wav" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>
<EMBED NAME="buttons" id="buttons" SRC="buttons.wav" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>
<EMBED NAME="start" id="start" SRC="start.wav" LOOP=FALSE AUTOSTART=true HIDDEN=TRUE MASTERSOUND>
<EMBED NAME="win" id="win" SRC="win.wav" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>
<body bgcolor="#000000">
<center><font color="white">Player 1: <img src="x.gif"> <font color="white">Player 2: <img src="o.gif">
<br>
<table style="border-top: 1px solid orange; border-left: 1px solid orange; border-bottom: 1px solid orange; border-right: 1px solid orange;"><tr><td style="color: white;" align="center"><b>Game Options<tr><td><input type="checkbox" id="computer" name="computer" onclick="resetGame();"><span style="color: white;">Play Against Computer</span><tr><td align="center"><img src="reset.jpg" onclick="resetGame();" style="cursor: pointer;"></table>
<table border=0 align="center" width="400" height="400" style="background: url('board.jpg');">
<tbody id="ttt" name="ttt">
<tr><td width="100" height="100" onclick="setXO(0, 0);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(0, 1);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(0, 2);"><img src="blank.gif"></td></tr>
<tr><td width="100" height="100" onclick="setXO(1, 0);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(1, 1);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(1, 2);"><img src="blank.gif"></td></tr>
<tr><td width="100" height="100" onclick="setXO(2, 0);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(2, 1);"><img src="blank.gif"></td><td width="100" height="100" onclick="setXO(2, 2);"><img src="blank.gif"></td></tr>
</tbody>
</table>
<span id="turn"></span>
Heres an example of tic tac toe I made with a computer player. Attached file has all the images and audio files for this.
--- NO code tags because they cause the post to not be visible on this particular post ---
