K I need to make a tictactoe game and the code i have started is i beleive correct but the X and O.gifs do not seem to be appearing. Also I am having difficulty creating both the checkWin() function and boardFilled() fucntion. Any feedback would be greatly appreciated.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Tic Tac Toe</title> <script type="text/javascript"> // introduction of new arrays which apply to all script var row1= new Array(); var row2= new Array(); var row3= new Array(); row1[0] = 'B'; row1[1] = 'B'; row1[2] = 'B'; row2[0] = 'B'; row2[1] = 'B'; row2[2] = 'B'; row3[0] = 'B'; row3[1] = 'B'; row3[2] = 'B'; var player=1; // player is either 1(X) or 2(O) // the function putX displays an X in the specified row, column function putX(row,column) { var tdid="r"+row+"c"+column; document.getElementById(tdid).src="X.gif"; } // the function putO displays a O in the specified row, column function putO(row,column) { var tdid="r"+row+"c"+column; document.getElementById(tdid).src="O.gif"; } // the function switchPlayer switches the turn to the next player // the function then displays on the page who's turn it is function switchPlayer() { if(player==1) // if the current player is 1, then make the player 2 { document.getElementById("currentPlayer").innerHTML="Current Player: 2(O)"; player=2; } else // if the current player is 2, then make the player 1 again { document.getElementById("currentPlayer").innerHTML="Current Player: 1(X)"; player=1; } } function play(row,column) { if (player==1) { // calling the squarePlayed function if (squarePlayed(row,column)==false) { // The use of the putX function allowing an X to appear putX(row,column); if(row == 1) { row1[column-1] = 'X'; } if(row == 2) { row2[column-1] = 'X'; } if(row == 3) { row3[column-1] = 'X'; } } } // Switching from player 1 to player 2 switchPlayer(); } else { if (squarePlayed(row,column)==false) { // The use of the putO function allowing an O to appear putO(row,column); if(row == 1) { row1[column-1] = 'O'; } if(row == 2) { row2[column-1] = 'O'; } if(row == 3) { row3[column-1] = 'O'; } } // Switching from player 2 to player 1 switchPlayer(); } if(boardFilled()=true) { alert("Draw"); } } } function squarePlayed(row,column) { if(row == 1) { if(row1[column-1] == 'X' | row1[column-1] == 'O') return true; } else if(row ==2) { if(row2[column-1] == 'X' | row2[column-1] == 'O') return true; } else { if(row3[column-1] == 'X' | row3[column-1] == 'O') return true; } return false; } function boardfilled() { } </script> <style type="text/css"> td { width:75px; text-align:center; } </style><!-- WARNING: do not change the XHTML code, or the provided functions may not work --> </head> <body> <table border="1" cellpadding="10" cellspacing="0"> <tbody> <tr> <td onclick="play(1,1);"><img src="blank.gif" alt="" id="r1c1" /></td> <td onclick="play(1,2);"><img src="blank.gif" alt="" id="r1c2" /></td> <td onclick="play(1,3);"><img src="blank.gif" alt="" id="r1c3" /></td> </tr> <tr> <td onclick="play(2,1);"><img src="blank.gif" alt="" id="r2c1" /></td> <td onclick="play(2,2);"><img src="blank.gif" alt="" id="r2c2" /></td> <td onclick="play(2,3);"><img src="blank.gif" alt="" id="r2c3" /></td> </tr> <tr> <td onclick="play(3,1);"><img src="blank.gif" alt="" id="r3c1" /></td> <td onclick="play(3,2);"><img src="blank.gif" alt="" id="r3c2" /></td> <td onclick="play(3,3);"><img src="blank.gif" alt="" id="r3c3" /></td> </tr> </tbody> </table> <h1 id="currentPlayer">Current player: 1(X)</h1> <h1> </h1> </body> </html>
Reply With Quote
Bookmarks