Solved

Tic Tac Toe game in HTML

Posted on 2010-09-21
5
401 Views
Last Modified: 2013-11-11
Hello experts,

I am doing an HTML and Javascript assignment about Tic Tac Toe gane. I am still in the beginning.

In the attached code, when user clicks on cell1, it should either alert some message or change button lable to X or O.

Actually that's not happening ! Can you check what is wrong?  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        
        #C1
        {
            height: 80px;
            width: 80px;
        }
        #C2
        {
            height: 80px;
            width: 80px;
        }
        #C3
        {
            height: 80px;
            width: 80px;
        }
        #C4
        {
            height: 80px;
            width: 80px;
        }
        #C5
        {
            height: 80px;
            width: 80px;
        }
        #C6
        {
            height: 80px;
            width: 80px;
        }
        #C7
        {
            height: 80px;
            width: 80px;
        }
        #C8
        {
            height: 80px;
            width: 80px;
        }

        #C9
        {
            height: 80px;
            width: 80px;
        }
        
        #P1Text
        {
            border-style: none;
            border-color: inherit;
            border-width: 0;
            height: 40px;
            width: 180px;
            font-weight:bold;
            font-size:large;
            color: Red;
            text-align: center;
        }        
        #P2Text
        {
            border-style: none;
            border-color: inherit;
            border-width: 0;
            height: 40px;
            width: 180px;
            font-weight:bold;
            font-size:large;
            color: Black;
            text-align: center;
        }
                 
    </style>
    
<script language="javascript" type="text/javascript">
// <!CDATA[

var p1Turn = true ;

function cClick(cellNo) {
    
     if (document.getElementById("C1").value == "X") {
    alert("Sorry, this cell is occupied by Player 1, please try another selection");
    }
    
else if (document.getElementById("C1").value == "O") {
    alert("Sorry, this cell is occupied by Player 2, please try another selection");
    }
    
else if (p1Turn = true) {
    document.getElementById("C1").value == "X"
    }
    
else if (p1Turn = false) {
    document.getElementById("C1").value == "O"
    }
    
else alert("No Match!");


}


// ]]>
</script>
</head>
<body>

    <p style="text-align: center">
        <input  id="C1" align="middle" type="button" value="     " onclick="cClick(1)" />
        <input  id="C2" align="middle" type="button" value="     " onclick="cClick(2)" />
        <input  id="C3" align="middle" type="button" value="     " onclick="cClick(3)" />
    </p>
    
    <p style="text-align: center">
        <input  id="C4" align="middle" type="button" value="     " onclick="cClick(4)" />
        <input  id="C5" align="middle" type="button" value="     " onclick="cClick(5)" />
        <input  id="C6" align="middle" type="button" value="     " onclick="cClick(6)" />
    </p>
    
    <p style="text-align: center">
        <input  id="C7" align="middle" type="button" value="     " onclick="cClick(7)" />
        <input  id="C8" align="middle" type="button" value="     " onclick="cClick(8)" />
        <input  id="C9" align="middle" type="button" value="     " onclick="cClick(9)" />
    </p>

<p style="text-align: center">
    
    &nbsp;</p>
<p style="text-align: center">
    
    <input id="P1Text" name="P1Text" type="text" readonly="readonly" value="PLAYER 1" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="P2Text" name="P2Text" type="text" readonly="readonly" value="PLAYER 2" />
    </p>

</body>
</html>

Open in new window

0
Comment
Question by:Muhajreen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 29

Expert Comment

by:QPR
ID: 33731493
as in my other post, change...

else if (p1Turn = true) {
    document.getElementById("C1").value == "X"
 to ="X"

:)
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 33731582
try this also, i have simplified the code a little bit though

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
   
   #C1
   {
  height: 80px;
  width: 80px;
   }
   #C2
   {
  height: 80px;
  width: 80px;
   }
   #C3
   {
  height: 80px;
  width: 80px;
   }
   #C4
   {
  height: 80px;
  width: 80px;
   }
   #C5
   {
  height: 80px;
  width: 80px;
   }
   #C6
   {
  height: 80px;
  width: 80px;
   }
   #C7
   {
  height: 80px;
  width: 80px;
   }
   #C8
   {
  height: 80px;
  width: 80px;
   }

   #C9
   {
  height: 80px;
  width: 80px;
   }
   
   #P1Text
   {
  border-style: none;
  border-color: inherit;
  border-width: 0;
  height: 40px;
  width: 180px;
  font-weight:bold;
  font-size:large;
  color: Red;
  text-align: center;
   }   
   #P2Text
   {
  border-style: none;
  border-color: inherit;
  border-width: 0;
  height: 40px;
  width: 180px;
  font-weight:bold;
  font-size:large;
  color: Black;
  text-align: center;
   }
  
    </style>
    
<script language="javascript" type="text/javascript">
// <!CDATA[

var p1Turn = true ;

function cClick(cellNo) 
{
    var value = document.getElementById(cellNo).value;
	if( value.length > 0 )
	{
		alert("sorry this cell is already occupied");
		return false;
	}
	else
	{
		if (p1Turn) 
		{
			value = "X";
			p1Turn = false;
		}
		else
		{
			value = "O";
			p1Turn = true;
		}
    }
	document.getElementById(cellNo).value = value;
}


// ]]>
</script>
</head>
<body>

    <p style="text-align: center">
   <input  id="C1" align="middle" type="button" value="" onclick="cClick('C1')" />
   <input  id="C2" align="middle" type="button" value="" onclick="cClick('C2')" />
   <input  id="C3" align="middle" type="button" value="" onclick="cClick('C3')" />
    </p>
    
    <p style="text-align: center">
   <input  id="C4" align="middle" type="button" value="" onclick="cClick('C4')" />
   <input  id="C5" align="middle" type="button" value="" onclick="cClick('C5')" />
   <input  id="C6" align="middle" type="button" value="" onclick="cClick('C6')" />
    </p>
    
    <p style="text-align: center">
   <input  id="C7" align="middle" type="button" value="" onclick="cClick('C7')" />
   <input  id="C8" align="middle" type="button" value="" onclick="cClick('C8')" />
   <input  id="C9" align="middle" type="button" value="" onclick="cClick('C9')" />
    </p>

<p style="text-align: center">
    
    &nbsp;</p>
<p style="text-align: center">
    
    <input id="P1Text" name="P1Text" type="text" readonly="readonly" value="PLAYER 1" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="P2Text" name="P2Text" type="text" readonly="readonly" value="PLAYER 2" />
    </p>

</body>
</html>

Open in new window

0
 
LVL 14

Assisted Solution

by:sam2912
sam2912 earned 250 total points
ID: 33731599
I have previously made a tic tac toe game, maybe you would like to check it out.
http://www.samliew.com/Resources/Downloads/Programs/TicTacToe/index.html
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33731661
Sam,

A real nice game (like). I dint take a look at the code though but
Just one thing.. I found this happen when I played now :)
Actually X won right...

I think he could reuse this with credits instead of re inventing.

Best,
kadaba

tictacto.png
0
 

Author Comment

by:Muhajreen
ID: 33731716
I am sorry for my mistake in doubling the post here http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26490502.html#a33731709 

I was going to delete this post, but as I have received more good solutions here, I will accept them.

Thanks for your co-operation.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question