Javascript Tic-Tac-Toe! It's broken!

Discussion in 'JavaScript' started by scriptmakingman, Feb 15, 2010.

0
  1. #1
    Hi everyone,

    I have this Javascript Tic-Tac-Toe script I have for my web development class. I seem to have a problem with the script.

    There seems to be a problem with the "1 player" and after the first game it gets all screwed up. And also, with the "1 player" it doesn't record the score properly!

    HELP ME!

    Thanks,
    Dale

    <html lang="en" dir="ltr" xml:lang="en" xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<title>CIS 242 - tic-tac-toe</title>
<meta content="author" name="class example" />
<meta content=
"class example, explanation of the examples included, QUARTER, Edmonds Community College"
name="keywords" />
<meta content="description" name="description" />
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<meta content="none" name="robots" />
<script type="text/javascript">
//<![CDATA[
<!--
//<[CDATA[

// global variables

var x = new Image();
x.src = "X.png";

var o = new Image();
o.src = "O.png";

var arrTaken = new Array();

var intPlayer = 2;

for (var i = 0; i < 9; i++){
 arrTaken[i] = "blank";
}

var intTurn = 0;

var blnWin = false;

/*---------------------------------------
function   takeTurn(cellName)
purpose:   take a turn on the tic-tac-toe board
author:   CIS 242 Winter 2010
date:    1/26/10
parameters: cellName as string; as the name assigned to each image in our grid
---------------------------------------*/
function takeTurn(cellName){
 
  var strImgSrc = document.images[cellName].src;
  //var intBlankPos = strImgSrc.indexOf("blank.png", 0);
 
  var intArrIndex = parseInt(cellName);
  
  if (arrTaken[intArrIndex] != "blank"){
   alert("Please select a different square");
  
   return false;
  } // end if (arrTaken[intArrIndex] != "blank")
 
  intTurn += 1;
 
   if (intTurn % 2 == 0){
     document.images[cellName].src = o.src;
     document.forms[0].txtTurn.value = "X's Turn";
     arrTaken[intArrIndex] = "O";
   } // end if (intTurn % 2 == 0)
   
  else {
     document.images[cellName].src = x.src;
     document.forms[0].txtTurn.value = "O's Turn";
     arrTaken[intArrIndex] = "X";
    
    if ((intPlayer == 1) && (blnWin == false)) {
      setTimeout("computerTurn()", 500);
      //computerTurn()
    }// end if (intPlayer == 1)
    
   } // end else
 
 
   
  if (intTurn >= 5){
    //alert("getting into if turns are greater > 5");
    blnWin = chkWin();
  }
 
  if (intTurn == 9){
    alert("This is a tie game");
   resetGame();
  }
 
 if (blnWin){
  alert("There is a winner!");
  resetGame();
 }
 
}

/*--------------------------------------------------
    if the one player rdo button option is clicked then
  computer takes a turn
  
  call a function "computerTurn"
   This function should select a random number from 0 to 9
   If that square is taken
    call computerTurn again (Recrusive Function)
   Else return the random number to the calling location and assign it to cellName
   
 end if
--------------------------------------------------*/
function computerTurn(){

 var oRandom = Math.floor((Math.random()* 9));
  
 blnWin = chkWin();
 
 if (blnWin == false){
  if(arrTaken[oRandom] != "blank"){
   computerTurn();
  } // end if(arrTaken[oRandom] != "blank")
  else{
   intTurn += 1;
    document.images[oRandom].src = "o.png";
    arrTaken[oRandom] = "O";
  } // end else
 }
 
 return true;
 
} // end function

/*--------------------------------------
function chkWin()
purpose:   check to see there is a win
author:   CIS 242 Winter 2010
date:    1/26/10
parameters:
---------------------------------------*/
function chkWin(){

 // check for "X" wins
 if ((arrTaken[0] == "X") && (arrTaken[1] == "X") && (arrTaken[2] ==  "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[3] == "X") && (arrTaken[4] == "X") && (arrTaken[5] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[6] == "X") && (arrTaken[7] == "X") && (arrTaken[8] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[0] == "X") && (arrTaken[3] == "X") && (arrTaken[6] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[1] == "X") && (arrTaken[4] == "X") && (arrTaken[7] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[2] == "X") && (arrTaken[5]  == "X") && (arrTaken[8] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[0]  == "X") && (arrTaken[4]  == "X") && (arrTaken[8] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 else if ((arrTaken[2]  == "X") && (arrTaken[4] == "X") && (arrTaken[6] == "X")){
 document.forms[0].xWins.value = parseInt(document.forms[0].xWins.value) + 1;
  return true;
 }
 
 // check for O wins
 
 else if ((arrTaken[0] == "O") && (arrTaken[1] == "O") && (arrTaken[2] ==  "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[3] == "O") && (arrTaken[4] == "O") && (arrTaken[5] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[6] == "O") && (arrTaken[7] == "O") && (arrTaken[8] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[0] == "O") && (arrTaken[3] == "O") && (arrTaken[6] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[1] == "O") && (arrTaken[4] == "O") && (arrTaken[7] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[2] == "O") && (arrTaken[5]  == "O") && (arrTaken[8] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[0]  == "O") && (arrTaken[4]  == "O") && (arrTaken[8] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else if ((arrTaken[2]  == "O") && (arrTaken[4] == "O") && (arrTaken[6] == "O")){
 document.forms[0].oWins.value = parseInt(document.forms[0].oWins.value) + 1;
  return true;
 }
 else {
  return false;
 }
 
}
/* -----------------------------------------
Function:    Reset Game
Author:      Justin Leif
Purpose:     Restart game
Date:        1/30/10 / 2/9/10
Parameters:  none
-------------------------------------------*/

function resetGame() {

     
    if (confirm("Do you want to restart or play another game?")){

     intTurn = 0;
   
   for (var i = 0; i < 9; i++) {
     arrTaken[i] = "blank";
    document.images[i].src = "blank.png";
    document.forms[0].txtTurn.value = "X's Turn";
   }
   
    }
  
    return true;
}

/*---------------------------------------------
function numOfPlayers(intPlayers)
purpose:   keep track of the numbers of players
author:    Marti Baker
date:     2/9/10
parameters:  intPlayers as an integer indicating the number of players playing tic-tac-toe
---------------------------------------------*/
function numPlayers(intPlayers){

 intPlayer = intPlayers;

 return true;
}


//]]>
//-->
//]]>
</script>
</head>
<body>
<form action="" name="frmOptions" id="frmOptions">
<h1 align="center">Tic-Tac-Toe</h1>
<table border="1" cellpadding="2" align="center" bordercolor=
"#000000">
<tr>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="0" border="0" onclick=
"return takeTurn('0')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="1" onclick="return takeTurn('1')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="2" onclick="return takeTurn('2')" /></td>
</tr>
<tr>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="3" onclick="return takeTurn('3')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="4" onclick="return takeTurn('4')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="5" onclick="return takeTurn('5')" /></td>
</tr>
<tr>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="6" onclick="return takeTurn('6')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="7" onclick="return takeTurn('7')" /></td>
<td><img src="blank.png" width="100" height="100" alt="blank"
name="8" onclick="return takeTurn('8')" /></td>
</tr>
</table>
<table border="0" cellpadding="2" align="center" bordercolor=
"#000000" width="400">
<tr>
<td><input type="radio" name="rdoPlayer" value="true" onclick=
"numPlayers(1)" />1 player<br />
<input type="radio" name="rdoPlayer" value="false" checked=
"checked" onclick="numPlayers(2)" />2 player</td>
<td valign="middle"><input type="button" name="btnRestart" id=
"btnRestart" value="Restart Game" onclick=
"return resetGame()" /><br /></td>
<td><input type="text" name="txtTurn" readonly="readonly" id=
"txtTurn" value="X's Turn" size="5" /></td>
<td>Previous Wins:<br />
X wins:<input type="text" readonly="readonly" name="xWins" id=
"xWins" value="0" size="1" /><br />
O wins:<input type="text" readonly="readonly" name="oWins" id=
"oWins" value="0" size="1" /></td>
</tr>
</table>
</form>
</body>
</html>
    Code (markup):
     
    scriptmakingman, Feb 15, 2010 IP
  2. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2
    in the resetGame function you may need to set blnWin to false... But I think that you may have some other issues aswell... It could all be coded much more efficiently.
     
    camjohnson95, Feb 16, 2010 IP