JavaScript Tic Tac Toe

Sorry, I'm new to Javascript

Page 1 of 1

4 Replies - 4559 Views - Last Post: 16 December 2009 - 01:55 PM

#1 Krisx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 14-December 09

JavaScript Tic Tac Toe

Post icon  Posted 15 December 2009 - 11:56 PM

<html>
	<head>
		<title> Tic Tac Toe </title>
		
		<style>
		body
		{
			background-color: #336699;
		}
		.board
		{
			text-align: center;
			width: 400px;
			height: 400px;
			font-color: #FFFFFF;
			font-size: 50px;
			border: 5px;
		}
		</style>
		
		<script type="text/javascript">
		var Place[]; var turn = "X"; var current; var outcome;
		
		function DoThis(i){
			current = document.getElementById("Place" + i).innerHTML;
			if(current == "X"){

			}
			
			else if(current == "O"){
			
			} else {

			document.getElementById("Place" + i).innerHTML = turn;
			
				if(turn == "X"){
				turn = "O";
				}
				else if(turn == "O"){
				turn = "X";
				}
			}
		}
		
		</script>
		
	</head>
	
		<body>
		<center>

			<div class="boardContainer">
				<table class="board" rules="all">
					<tr>
						<td onclick="DoThis(1);" id="Place1"></td>
						<td onclick="DoThis(2);" id="Place2"></td>
						<td onclick="DoThis(3);" id="Place3"></td>
					</tr>
					<tr>
						<td onclick="DoThis(4);" id="Place4"></td>

						<td onclick="DoThis(5);" id="Place5"></td>
						<td onclick="DoThis(6);" id="Place6"></td>
					</tr>
					<tr>
						<td onclick="DoThis(7);" id="Place7"></td>
						<td onclick="DoThis(8);" id="Place8"></td>
						<td onclick="DoThis(9);" id="Place9"></td>
					</tr>
				</table>

			</div>
		</center>
		</body>
		
		
</html>



First off. The empty board looks awkward. The lines on the left are longer on then the ones on the right. I'm not sure why or how to fix that. Other then my style fail clicking on the squares does nothing. Bare with me, this is my first Javascript project. :D

PS. This isn't the completed project. I still need some code to tell who won.

This post has been edited by Krisx: 15 December 2009 - 11:57 PM


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Tic Tac Toe

#2 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: JavaScript Tic Tac Toe

Posted 16 December 2009 - 02:44 AM

I commented out some of your style and html.
The html is now mostly span tags.
The css is a little different and there is an image for the lines instead of the table.
I did the css and image for fun.

I have an idea for the javascipt, but want to see what you have in mind
Download and unzip this attachment to use the html and image together
Attached File  tictactoe.zip (2.46K)
Number of downloads: 221

<html>
	<head>
		<title> Tic Tac Toe </title>
	   
		<style>
		body
		{
			background-color: #336699;
		}
		/*.board
		{
			text-align: center;
			width: 400px;
			height: 400px;
			font-color: #FFFFFF;
			font-size: 50px;
			border: 5px;
		}*/


I changed this css:
		#tictac {	display: block; 
					background-image: url( 'tictactoe.png' );
					margin: auto;
					width: 300px;
					height: 300px; }
		
		#symbol {	display: block;
					padding: 5px;
					width: 90px;
					height: 90px;
					float: left;
					font-size: 3em;
					color: black;
					}
		
		.symbol_row { display: block;
						width: 300px;
						height: 100px;
						padding-left: 15px;
						}
		</style>


		<script type="text/javascript">
		/*var Place[]; var turn = "X"; var current; var outcome;
	   
		function DoThis(i){
			current = document.getElementById("Place" + i).innerHTML;
			if(current == "X"){

			}
		   
			else if(current == "O"){
		   
			} else {

			document.getElementById("Place" + i).innerHTML = turn;
		   
				if(turn == "X"){
				turn = "O";
				}
				else if(turn == "O"){
				turn = "X";
				}
			}
		}
	   */
		</script>
	   
	</head>
   
		<body>
		<!--<center>

			<div class="boardContainer">
				<table class="board" rules="all">
					<tr>
						<td onclick="DoThis(1);" id="Place1"></td>
						<td onclick="DoThis(2);" id="Place2"></td>
						<td onclick="DoThis(3);" id="Place3"></td>
					</tr>
					<tr>
						<td onclick="DoThis(4);" id="Place4"></td>

						<td onclick="DoThis(5);" id="Place5"></td>
						<td onclick="DoThis(6);" id="Place6"></td>
					</tr>
					<tr>
						<td onclick="DoThis(7);" id="Place7"></td>
						<td onclick="DoThis(8);" id="Place8"></td>
						<td onclick="DoThis(9);" id="Place9"></td>
					</tr>
				</table>

			</div>
		</center> -->


I added this as an alternative to the table structure:
		<div id = "tictac">
			<span class = "symbol_row">
				<span id = "symbol"><span id = "s1">X</span></span>
				<span id = "symbol"><span id = "s2">X</span></span>
				<span id = "symbol"><span id = "s3">X</span></span>
			</span>
			<span class = "symbol_row">
				<span id = "symbol"><span id = "s4">X</span></span>
				<span id = "symbol"><span id = "s5">X</span></span>
				<span id = "symbol"><span id = "s6">X</span></span>
			</span>
			<span class = "symbol_row">
				<span id = "symbol"><span id = "s7">X</span></span>
				<span id = "symbol"><span id = "s8">X</span></span>
				<span id = "symbol"><span id = "s9">X</span></span>
			</span>
		</div>


		</body>
	   
	   
</html>


This post has been edited by hiddenghost: 16 December 2009 - 01:57 PM

Was This Post Helpful? 0
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: JavaScript Tic Tac Toe

Posted 16 December 2009 - 03:51 AM

You probably want to look up "javascript event listeners".

Event listeners are more work, but are worth a little more effort to control styles.

Study the Document Object Model a little to get the events right.
Was This Post Helpful? 1
  • +
  • -

#4 Krisx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 14-December 09

Re: JavaScript Tic Tac Toe

Posted 16 December 2009 - 12:42 PM

I really appreciate this. But on my screen the "X" are not centered. But you've got me going in the right direction. :D
Was This Post Helpful? 0
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: JavaScript Tic Tac Toe

Posted 16 December 2009 - 01:55 PM

View PostKrisx, on 16 Dec, 2009 - 11:42 AM, said:

I really appreciate this. But on my screen the "X" are not centered. But you've got me going in the right direction. :D


Your welcome. :D
My view didn't have centered X's either.
If you want to change the position of the "X" then alter the values in the css for #symbol and .symbol_row.
<style type = "text/css">
  #tictac {	display: block;
					background-image: url( 'tictactoe.png' );
					margin: auto;
					width: 300px;
					height: 300px; }
	   
		#symbol {	display: block;
					padding: 5px; /* alter the this line and the next 4 lines of code to see the x change */
					width: 90px;
					height: 90px;
					float: left;
					font-size: 3em;
					color: black;
					}
	   
		.symbol_row { display: block;
						width: 300px; /* alter this line and the next two and see a row of "X" change */
						height: 100px;
						padding-left: 15px; /* this padding controls the position of the rows of X  the most */
						}
		</style>


Save the old code and altered code in different files with different names so you don't lose previous progress if you want to go back.
Use names like tictactoe_version_1.html and tictactoe_version_2.html

This post has been edited by hiddenghost: 16 December 2009 - 01:58 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1