Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,238 members, 7,818,809 topics. Date: Monday, 06 May 2024 at 04:56 AM

Html/css/javascript Tic-tac-toe Project - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Html/css/javascript Tic-tac-toe Project (2826 Views)

A Simple Tic-tac-toe Game Using Javafx / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql / Tic Tac Toe Online Game With AI (2) (3) (4)

(1) (Reply) (Go Down)

Html/css/javascript Tic-tac-toe Project by sinequanon: 12:55am On Jan 23, 2016 
<html>
	<head>
		<title>tic-tac-toe</title>
		<style type="text/css">
		<!--

		td {height: 100px;
			width: 100px;
			cursor: pointer;
		}

		table {
			border-collapse: collapse;
		}

		table, th, td {
			border: 1px solid black;
		}

		.ttt-button-default {
			font-size: 32px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
		}
		--->
		</style>
	</head>
	<body>
		<table>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
		</table>
		<input type="button" value="CLEAR" class="ttt-button-default" style="width: 150px; height: 80px; font-size: 32px; font-weight: bold; text-align: center;"/><!--
		--><input type="button" value="MOVE" class="ttt-button-default" style="width: 150px; height: 80px;"/>
	</body>
</html>

1 Like

Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:56am On Jan 23, 2016
OK, this is the idea...

[size=18pt]copy the code in the OP into a text editor, like notepad. Save the file as tic-tac-toe.html. Double click it to run. So far, it won't do much except display a basic grid...[/size]

We are using HTML, CSS and JAVASCRIPT.
[size=18pt]
The code in the OP will be gradually updated, and will end up as a tic-tac-toe (noughts and crosses) game.[/size]

I will specify what the requirements are (e.g the computer must never lose).

We can discuss -- "design" -- the solution.

We can discuss best practice.

I will be adjudicator, and update the OP as the development unfolds.

Anyone following the progress, please ask questions and discuss.

Experts, please suggest improvements.
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 1:09am On Jan 23, 2016
[size=18pt]Next, I am going to specify the requirements of the game.

Meanwhile, experts can discuss the initial code in the OP and recommend improvements.[/size]
Re: Html/css/javascript Tic-tac-toe Project by ChinenyeN(m): 3:24am On Jan 23, 2016
First suggestion would be to move the input styling out of the input tags themselves and into the style section of the document. A single class can be created and assigned to both input tags, since they are styled in the exact same manner. In fact, we won't even need to create a class, for now. We could simply just target the input tags directly, using input as the selector.
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 1:33pm On Jan 23, 2016
ChinenyeN:
First suggestion would be to move the input styling out of the input tags themselves and into the style section of the document. A single class can be created and assigned to both input tags, since they are styled in the exact same manner. In fact, we won't even need to create a class, for now. We could simply just target the input tags directly, using input as the selector.

I did that with some of the tags (table, td, etc.) because they either MUST be all the same, or it is a general default style that would likely still apply if I were to add another element.

On the other hand, the input elements only HAPPEN to be styled the same way. This could change, or other input elements, like a checkbox, could be required later on. (I suppose another table may later be added, if we decide to keep score, in which case I would have to use a css class for td).

I don't think that we would be saving much on repetition or reuse by moving the styling out of the input tags, though. Anything else that needs to be considered?

What say you?

Is there a compelling reason to move them, or is it a question of personal standard/preference?
Re: Html/css/javascript Tic-tac-toe Project by ChinenyeN(m): 7:30pm On Jan 23, 2016
I would say that for the most part, it is a personal preference of mine. I always keep my CSS separate from my HTML. Beyond that, I also suggested it because I like to think ahead as best as I possibly can. I've got no way of knowing what any other contributor might like to add or subtract from the code. So, in anticipation of that, I figure that moving the CSS to a more central location would make future adjustments easier (if any will be needed).

1 Like

Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:32pm On Jan 24, 2016
ChinenyeN:
I would say that for the most part, it is a personal preference of mine. I always keep my CSS separate from my HTML. Beyond that, I also suggested it because I like to think ahead as best as I possibly can. I've got no way of knowing what any other contributor might like to add or subtract from the code. So, in anticipation of that, I figure that moving the CSS to a more central location would make future adjustments easier (if any will be needed).

Good point.

Since the width of a button tends to vary, I will keep the width and height inline with the input tag. I will create a class for the font styling (I'll use a class because I don't want it to affect any other kind of input element.)

[size=18pt]OP updated.[/size]

Added to style tag:

		.ttt-button-font {
			font-size: 32px;
			font-weight: bold;
			text-align: center
		}


Changed input tags, e.g from:

		<input type="button" value="CLEAR" class="ttt-button-font" style="width: 150px; height: 80px; font-size: 32px; font-weight: bold; text-align: center;"/>



to:

		<input type="button" value="CLEAR" class="ttt-button-font" style="width: 150px; height: 80px;"/>
Re: Html/css/javascript Tic-tac-toe Project by Nobody: 11:03pm On Jan 24, 2016
sinequanon:


		.ttt-button-font {
			font-size: 32px;
			font-weight: bold;
			text-align: center
		}


You didn't close the last styling... ; wink

1 Like

Re: Html/css/javascript Tic-tac-toe Project by Nobody: 11:16pm On Jan 24, 2016
Add 

cursor: pointer;


to the 

.ttt-button-font


class

1 Like

Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 11:30pm On Jan 24, 2016
DanielTheGeek:


You didn't close the last styling... ; wink

Bah! sad

I cut it out of the tag and unfolded it. cheesy That is a habit to lose!

The semi-colon is optional though, isn't it? Not that that is an excuse.

DanielTheGeek:
Add

cursor: pointer;

Good idea! I've done it to td as well.

[size=18pt]OP updated.

class ttt-button-font renamed to ttt-button-default

cursor: pointer; added to the class and to the td selector.[/size]

1 Like

Re: Html/css/javascript Tic-tac-toe Project by Nobody: 12:03am On Jan 25, 2016
I'm goin to dedicate 30mins of my time to this now..

Let's see how far we can go..@sinequannon
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:07am On Jan 25, 2016
DanielTheGeek:
I'm goin to dedicate 30mins of my time to this now..

Let's see how far we can go..@sinequannon

Hold fire!!!

I need to write a specification for the project.

I'll do that tomorrow.

I'm deliberately taking it slowly so that some beginners may get bold and start asking questions like, "what's all that junk in the angled brackets?"

Hopefully, our approach -- specification to delivery -- will give some idea of real life.

2 Likes

Re: Html/css/javascript Tic-tac-toe Project by Nobody: 12:13am On Jan 25, 2016
sinequanon:


Hold fire!!!

I need to write a specification for the project.

I'll do that tomorrow.

I'm deliberately taking it slowly so that some beginners may get bold and start asking questions like, "what's all that junk in the angled brackets?"

Hopefully, our approach -- specification to delivery -- will give some idea of real life.

Oh, slow and steady then..
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:39am On Jan 26, 2016
Yeeeup... here we go...

[size=18pt]Specification

1. The application is a program that plays the user at tic-tac-toe according to the standard rules, as specified here.

The following are additional specifications and requirements

2. A new game is ready to start when the web page loads, or any time the user clicks the "CLEAR" button.

3. The user can make the first move of the new game by clicking any square on the 3 x 3 grid.

4. The computer will make the first move if the user clicks the "MOVE" button.

5. The computer will move automatically after each move by the user.

6. The user will be 0's and the computer will be x's.

7. The computer must never lose.

8. All 0's and x's will be black, except if the computer wins, in which case it will highlight the winning set of x's in red.

9. If the computer is presented with a position from which it can force a win, it must indicate that it is about to win, and force a win.

10. If the computer is not in a position to force a win, it must be able to select ANY position that does not lose.

(9, 10 imply, for example, that the computer must not ALWAYS go in the middle if it moves first. It must SOMETIMES go in a corner or edge. It must be able to play ANY non-losing game, unless it can FORCE a win.)

11. If the game ends according to the rules, the only option available to the user will be to click "CLEAR" for a new game.[/size]
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:44am On Jan 26, 2016
The next task will be to review the rules and make any necessary amendments.

Then we will use the rules to determine all the data we are going to need.

For example, we will need to know the game status (x to move, 0 to move, or finished).

2 Likes

Re: Html/css/javascript Tic-tac-toe Project by Nobody: 8:55am On Jan 26, 2016
I think first we need to update the style

Now we can have a separate style sheet, for readability sake..
Create the 
ttt.css
file.

and put the following content in to redesign the whole game..

* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

header {
	width: 100%;
	height: 70px;
	background-color: #e74c3c;
	opacity: 0.9;
	z-index: 100;
}

#logo {
	position: absolute;
	margin: 20px;
	color: #fff;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 20px;
}

#container {
	width: 100%;
	height: 100%;
}

.gamecontainer {
	width: 305px;
	height: 500px;
	margin-left: 40%;
	text-align: center;
}

h2, h3 {
	color: #e74c3c;
}

td {
	height : 100px;
	width : 100px;
	cursor: pointer;
}

table {
	border-collapse : collapse;
}

table, th, td {
	border : 2px #e74c3c solid;
}

.ttt-button {
	margin-top: 8px;
	font-size : 32px;
	text-align : center;
	width : 150px;
	height : 80px;
	border: 2px #e74c3c solid;
	color: #e74c3c;
	background-color: #fff;
	border-radius: 10px;
	cursor: pointer;
}

.ttt-button:hover {
	color: #fff;
	background-color: #e74c3c;
	border: 0;
}

footer {
	background: #e74c3c;
	width: 100%;
	height: 180px;
	overflow: hidden;
	opacity: 0.90;
}

footer p, footer h3 {
	color: #FFF;
	text-align: center;
}

footer p a {
	color: #FFF;
	text-decoration: none;
}

footer.second {
	border-top: 1px solid #4D4E50;
	background-color: #e74c3c;
	max-height: 30px;
	text-align: center;
	opacity: 0.95;
}
Re: Html/css/javascript Tic-tac-toe Project by Nobody: 8:57am On Jan 26, 2016
So the HTML file should now look like this:


<!DOCTYPE html>
<html>
	<head>
		<title>Tic-Tac-Toe</title>
		<meta charset="utf-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Play Tic-Tac-Toe game with the computer or your friends">
		<link rel="stylesheet" type="text/css" href="ttt.css">
	</head>
	<body>
		<header>
		<div id="logo">Tic Tac Toe Game</div>
		</header>
		<div id="container">
		<div class="gamecontainer">
		<h2>Tic-Tac-Toe</h2>
		<table>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
		</table>
		<input type="button" value="CLEAR" class="ttt-button" />
		<input type="button" value="MOVE" class="ttt-button" />
		</div>
		<footer>
			<h3>The Rules</h3>
			<p>1. X always goes first.
<br>2. A piece may be placed on any empty space.
<br>3. Players alternate placing Xs and Os on the board until either (a) one player has three in a row, horizontally, vertically or diagonally; or (b) all nine squares are filled.
<br>4. If a player is able to draw three Xs or three Os in a row, that player wins.
<br>5. If all nine squares are filled and neither player has three in a row, the game is a draw.
			</p>			
		</footer>
			<footer class="second">
				<p>Tic Tac Toe || Designed by <a href="http://www.nairaland.com/">Nairalanders</a></p>
			</footer>
		</div>
	</body>
</html>


Suggestion: Why don't we use HTML5 canvas features for the game's layout instead of tables and rows?

1 Like

Re: Html/css/javascript Tic-tac-toe Project by Nmeri17: 9:53am On Jan 26, 2016
^^^ or even divs ma sef. I always hate seeing that bulky and clumsy table markup. Use div in your document and display table in your CSS.
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 1:18pm On Jan 26, 2016
DanielTheGeek:
I think first we need to update the style

Now we can have a separate style sheet, for readability sake..
Create the ttt.css file.

I prefer to defer this until the very end, after the whole thing is working.

I agree that a separate style sheet is more readable for an experienced programmer. But remember this has to be accessible to complete novices, so we have to consider the pace and order in which we do things. Everything initially in one file does have its advantages for that.

Also, the main challenge, here is functionality, I think that we should do minimal styling at the moment, and revisit it at the end, so that it doesn't distract from the functionality (minimize any questions on styling). It will also simplify the set up for any complete novice -- just copy and paste one file, and you are ready to go.

(If we were to replace the table with canvas or svg, we would have to do it now, but I think that is too advanced for this thread.)
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 1:20pm On Jan 26, 2016
Nmeri17:
^^^ or even divs ma sef. I always hate seeing that bulky and clumsy table markup. Use div in your document and display table in your CSS.

I want to come back to styling at the end. Meanwhile, could you expand on how you would use divs? Would you use absolute positioning?
Re: Html/css/javascript Tic-tac-toe Project by Nobody: 1:29pm On Jan 26, 2016
Nice One OP... This is quite enlightening..
Am following..

1 Like

Re: Html/css/javascript Tic-tac-toe Project by Nobody: 2:12pm On Jan 26, 2016
Nmeri17:
^^^ or even divs ma sef. I always hate seeing that bulky and clumsy table markup. Use div in your document and display table in your CSS.

I agree with you.. but DIV's weren't built for tables, It's more like a shortcut to making tables (same thing to Tables some people use it to layout an entire website which is also not the right thing to do). Just so the learners will comprehend what we are doing, since that is the aim.

@Sinequanon, There is nothing advanced in using the Canvas system... let's just roll with the Table tags tho.

So let's proceed with the functionality, i agree it should be done first.
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 2:40pm On Jan 26, 2016
DanielTheGeek:
@Sinequanon, There is nothing advanced in using the Canvas system... let's just roll with the Table tags tho.

As a matter of interest, how were you intending to manage where the user clicks on the canvas? Or were you intending to use many canvasses?

1 Like

Re: Html/css/javascript Tic-tac-toe Project by Everest25(m): 9:28pm On Jan 26, 2016
nice1@Op

1 Like

Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 1:10am On Jan 27, 2016
^
^^^^

Welcome!

[size=18pt]Discovery[/size]

Discovery is basically the task of converting a requirement into a data model and data processes.

The requirement is the system we have been asked to build. In our case it is simple. Our requirement is described in a specification, outlined earlier.

A data model is the starting point in programming. It describes what data we need, and how we will organize or structure it. It is always a good idea to start with comprehensive data analysis, rather than plunging straight in to a programming project.

In real life, a software company would interview a client about the requirement for the system it has been contracted to build. The interviewing would start at a very high level, with a boss or board member sponsor, who will specify the scope and terms of the requirement and engagement. There would often be a ToR (Terms of Reference) document, forming part of the contract.

Once the scope of the project has been established, the interviewing process would be extended and organized to include middle management, and finally, shop floor employees, to get an increasingly detailed picture of the business and its system requirement. The interviewers from the software company are usually business analysts, and they get paid handsome salaries, rivaling some of the top programmers. They must aim to dot every i and cross every t, because the software isn't going to guess.

During the interviews, the business analysts listen very closely to the words and business terminology (beeg specialist grammar cool ) used by the business. It is this terminology (vocabulary) that indicates what information needs to be processed, and forms the basis of a data model and the data processes. The business analysts will ask questions, and get the client to explain in increasing detail how the requirement is to be fulfilled. Understanding the client's jargon, and knowing the right questions to ask, is a valuable skill, especially as top brass and others in the business have to give up their limited time to be interviewed. That is why good business analysts are highly paid. If they do a bad job, it can lead to wasted man hours, poor design or major gaps in the delivered product, which can be extremely costly, or even catastrophic, leading to abandonment of the project.

Business analysts liaise with a data manager, who organizes the data. The data organization helps identify gaps and further questions for interview. It is an iterative process.

Anyway, we are going to pretend that our tic-tac-toe project is a beeeg application, and our specification (outlined earlier) is what our client has ordered.

[size=18pt]We are now ready for discovery: going through our requirement (the specification), and isolating words and terms that appear in it, and indicate what information (data) we will be working with.[/size]
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 12:15pm On Jan 27, 2016
Here are the special terms -- the vocabulary -- I have extracted from the specification.

These terms will have to be represented by appropriate variables that will hold the data that they represent.

Having listed the terms as the first part of my analysis. I have a question: what happens if the computer doesn't win?

Our client tells us, "well, because it never loses, the game ends in a draw". I need to add the word "draw" to my vocabulary.

"Then what happens?", I ask. The client replies: "the game ends, and the user is notified that it has ended in a draw."

I add "notified" to my vocabulary.

Already, I have a vague idea that the program will contain a variable, gameStatus, which may take the value DRAW, and a variable userMessage, which may contain the string, "Congratulations! You have drawn with the computer that never loses at tic-tac-toe". What other messages may it contain?

It is a good job I analyzed the data upfront. Let us keep refining it, until we are happy with it.

[size=18pt]Here is the list, so far:

plays
user
tic-tac-toe
rules
game
new game
start
move
first move
square
3 x 3 grid
0's, x's, set of x's
lose
highlight
winning
position
force a win
indicate
select
the middle
corner or edge
non-losing game
game ends
draw
notified[/size]
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 5:22pm On Jan 28, 2016
[size=18pt]Banned by the antispam bot in Programming for this post. Ban expires on 1:58pm[/size]

[size=18pt]I give up, folks. First time I have encountered a site where a bot can ban you.

Somebody else take over this thread, if they wish. I don't have the time to work around the disruption.

(You have to organize the data into groups, create data structures, etc...)[/size]
Re: Html/css/javascript Tic-tac-toe Project by Nobody: 8:26am On Jan 29, 2016
Please do continue Bro.. This is one of the most interesting tutorials in 2016..

Do not be frustrated by the ban.. Am learning a lot from this AI thingy..
Re: Html/css/javascript Tic-tac-toe Project by Everest25(m): 10:41am On Jan 30, 2016
please continue op
Re: Html/css/javascript Tic-tac-toe Project by Everest25(m): 8:00pm On Jan 30, 2016
we are still waiting
Re: Html/css/javascript Tic-tac-toe Project by sinequanon: 10:07pm On Jan 30, 2016
Sorry folks. If you just live with things, nothing changes.

I am sure there are reasons for these bots, but there are pros and cons to everything.

(1) (Reply)

I Need A Good Software Developer / Array Of Countries And Cities In Php / Interesting Things About The Darkweb

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 80
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.