Tic Tac Toe

by Stephen Wassell

	Visited: 13396
	2.9/5.0 (172 votes total)
	Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding

Description:

Play a game of tic tac toe against the computer, try it out!

JavaScript Functions:
<script language="JavaScript"> <!-- //Next content is changed and not all in text work as written! //location.search holds the board in the format '?000000000' //each number is a square on the board: //0 = blank, 1 = nought (computer), 3 = cross (human) //the program uses the sum of these to work out where to go //it doesn't bother checking for human wins as it can't lose //at least, that's the idea... //there's probably better ways to handle some things, but I'm not //completely up to date with the current version of the language. function Get (Str, Off) { //equiv. to return Str[Off] //'- -' turns a string into a number return - -Str.substring (Off, Off+1) } function Set (Str, Off, Val) { //equiv. to Str[Off] = Val; return Str return Str.substring (0, Off) + Val + Str.substring (Off+1, 10) } function Sum (Str, a, b, c) { //adds the contents of a, b and c return (Get (Str, a) + Get (Str, b) + Get (Str, c)) } function MyMove (Dat) { //do computer's move var PosLines, Order = '2613', PosCorns var j, i, a, b, c if (Get (Dat, 5) == 1) { //if computer's in centre PosLines = '132798174396546528519537' PosCorns = '124326748968' } else { PosLines = '519537132798174396546528' PosCorns = '542526548586' } Result = ResWin for (j = 0; j < 4; j++) { for (i = 0; i < 24; i += 3) { a = Get (PosLines, i) b = Get (PosLines, i + 1) c = Get (PosLines, i + 2) if (Sum (Dat, a, b, c) == Get (Order, j)) { if (Get (Dat, a) == 0) return Set (Dat, a, 1) if (Get (Dat, b) == 0) return Set (Dat, b, 1) if (Get (Dat, c) == 0) return Set (Dat, c, 1) } } Result = ResNorm if (j == 1) { //only between 2nd and 3rd passes for (i = 0; i < 12; i += 3) { a = Get (PosCorns, i) b = Get (PosCorns, i + 1) c = Get (PosCorns, i + 2) if (Sum (Dat, a, b, c) == 6) if (Get (Dat, a) == 0) return Set (Dat, a, 1) } } } Result = ResDraw //no places to go return Dat } function DrawTable (Dat) { //plots the grid var i, Sqr, output_string=''; for (i = 1; i <= 9; i++) { Sqr = Get (Dat, i) if (Sqr == 0) { //it's a blank if (Result == ResWin) //no more links if it's been won output_string+= ('<IMG ALIGN=bottom SRC="/images/scripts/gameb.gif">') else { output_string+= ('<A HREF="') //a link for human moves output_string+= ( 'javascript:document.getElementById(\'fill_content\').innerHTML =DrawTable( MyMove(\''+(Set (Dat, i, '3'))+'\') );void(0);' ) output_string+= ('"><IMG ALIGN=bottom BORDER=0 SRC="/images/scripts/gameb.gif"></A>') } } else if (Sqr == 3) //it's an X output_string+= ('<IMG ALIGN=bottom SRC="/images/scripts/gamex.gif">') else //must be an O output_string+= ('<IMG ALIGN=bottom SRC="/images/scripts/gameo.gif">') if (i == 9) //finished output_string+= ('<P>') else if (i == 3 || i == 6) //long horizontal line output_string+= ('<BR><IMG ALIGN=bottom SRC="/images/scripts/gamedh.gif"><BR>') else //vertical line output_string+= ('<IMG ALIGN=bottom SRC="/images/scripts/gamedv.gif">') } if (Result == ResDraw) output_string+= ("It's" + ' a draw!<BR>Want <A HREF="javascript:Result = ResStart;document.getElementById(\'fill_content\').innerHTML = DrawTable (\'?000000000\');void(0);">another game</A>?') else if (Result == ResStart) output_string+= ("Your go first...") else if (Result == ResWin) output_string+= ('I won!<BR>Like to <A HREF="javascript:Result = ResStart;document.getElementById(\'fill_content\').innerHTML = DrawTable (\'?000000000\');void(0);">play again</A>?') return output_string; } var ResNorm = 0, ResWin = 1, ResDraw = 2, ResStart = 3 var Result = ResStart // --> </script> <script language="JavaScript" for="window" event="onload"> document.getElementById('fill_content').innerHTML = DrawTable ('?000000000'); </script>

HTML Script:
<div id="fill_content"></div>