<html> <head> <title>JavaScript Example: TicTacToe</title> <style> .bcell { width: 100px; height: 100px;} </style> <script language="Javascript" type="text/javascript"> var board = Array(9); function setmesg(str) { // find the mesg object in the page var loc = document.getElementById('mesg') loc.innerHTML=str; // change innerHTML property to str } // setmesg function setresult(str) { // find the result object in the page var loc = document.getElementById('result') loc.innerHTML=str; // change innerHTML property to str } // setresult function setup() { setmesg(""); setresult(""); for(i=0; i < 9; i++) board[i] = 0; } // setup function setletter(loc,let) { var pos=document.getElementById(loc); // first put the letter in the cell pos.innerHTML=let; // then change the CSS properties pos.style.textAlign="center"; pos.style.fontSize="80px"; pos.style.color="red"; } // setletter function clicked(loc) { // get the second character, the number var cell = loc.charAt(1); if(board[cell] != 0) { setmesg("Cell is occupied"); return; } setletter(loc,'X') board[cell] = 1; // mark it as a X space setmesg(""); // remove any previous messagesnextmove();} // clickedfunction nextmove() { for(i=0; i<9; i++) { if(board[i] == 0) { // empty space board[i] = 2; // make it O setletter("b"+i,'O') break; // all done } } } // nextmove</script> </head> <body onLoad="setup();"> <form name="controls" method="post" action="#"> <table> <tr> <td> <button type="button" name="reset")>Reset</button> </td> <td> <span id="mesg"></span> </td> <td> <span id="result"></span> </td> </tr> </table> </form> <table id="board" border align="center"> <tr> <td class="bcell" id="b0" onClick="clicked('b0');"> </td> <td class="bcell" id="b1" onClick="clicked('b1');"> </td> <td class="bcell" id="b2 onClick="clicked('b2');""> </td> </tr> <tr> <td class="bcell" id="b3" onClick="clicked('b3');"> </td> <td class="bcell" id="b4" onClick="clicked('b4');"> </td> <td class="bcell" id="b5" onClick="clicked('b5');"> </td> </tr> <tr> <td class="bcell" id="b6" onClick="clicked('b6');"> </td> <td class="bcell" id="b7" onClick="clicked('b7');"> </td> <td class="bcell" id="b8" onClick="clicked('b8');"> </td> </tr> </table> </body> </html>