Let's Make a Game, Part 1: HTML

1 post Page 1 of 1
Contributors
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Let's Make a Game, Part 1: HTML
comathi
Note: this tutorial presumes knowledge of HTML. If you need help, consider reading w3Shools' great HTML reference: http://w3schools.com/html/default.asp

In the spirit of Mad March, I've decided to make a new tutorial "mini-series" to show you how to make your very own game of Tic Tac Toe. It will combine elements of HTML5, CSS3 and JavaScript.

For this first part, we'll cover the content of the page.


So let's get started, shall we ;)


As with any HTML document, we need to start by declaring the Document Type Definition, or DTD. It tells the Browser what HTML version we'll be using. In the case of HTML5, the DTD is simply
Code: Select all
<!DOCTYPE HTML>
Under that, we'll put the basic HTML document structure, like so:
Code: Select all
<html lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>JavaScript Tic Tac Toe</title>
</head>
<body>

</body>
</html>
Two files will be linked to our HTML document: a style sheet and a script. In the head section, under the meta tag, add these two lines:
Code: Select all
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="game.js"></script>
These files don't exist yet, but we'll take care of that later.

To make the game look cool, the game "board" will be centered. Therefore, we need to add a new <div> element inside our body section:
Code: Select all
<!--Game board-->
<div id="board">

</div>
<!--</>-->
The first thing we want to put inside the game board is the title, this is done with an <h2> element, like so:
Code: Select all
<h2>Tic Tac Toe</h2>
Now is where the HTML5 fun starts! This HTML version brings a new element: the canvas. It can display graphics (shapes, images, text, etc.) and is controlled with JavaScript.

We'll need to add 9 of these inside the game board, give them all infividual names, and make them 200px by 200px:
Code: Select all
   <canvas id="c1" class="first" width="200px" height="200px"></canvas><!--
--><canvas id="c2" width="200px" height="200px"></canvas><!--
--><canvas id="c3" width="200px" height="200px"></canvas><!--
--><canvas id="c4" width="200px" height="200px"></canvas><!--
--><canvas id="c5" width="200px" height="200px"></cnavas><!--
--><canvas id="c6" width="200px" height="200px"></canvas><!--
--><canvas id="c7" width="200px" height="200px"></canvas><!--
--><canvas id="c8" width="200px" height="200px"></canvas><!--
--><canvas id="c9" width="200px" height="200px"></canvas>
Note: the <!----> comments are there to remove the whitespace created when starting a new line. This prevents the Browser detecting the whitespace and messing up the alignment of the canvases later.
Also, notice that height and width attributes have been added. Unlike the <img> tag, where these can be specified in a CSS style sheet, canvases require them to determine the size of their pixels, as well as find the right coordinates when drawing.

under our canvases, we'll want to put a "Start Over" button. This will be contained in a new <div> element, under the canvases, but withing the game board:
Code: Select all
<div id="options">
	<input type="submit" id="reset" value="Start Over" />
</div>
That's it for the HTML code. You can now save your document as a .html, such as "ttt.html".

Full code:
Code: Select all
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="game.js"></script>
<title>JavaScript Tic Tac Toe</title>
</head>
<body>
<!--Game board-->
<div id="board">
    <h2>Tic Tac Toe</h2>
	<canvas id="c1" class="first" width="200px" height="200px"></canvas><!--
	--><canvas id="c2" width="200px" height="200px"></canvas><!--
	--><canvas id="c3" width="200px" height="200px"></canvas><!--
	--><canvas id="c4" width="200px" height="200px"></canvas><!--
	--><canvas id="c5" width="200px" height="200px"></cnavas><!--
	--><canvas id="c6" width="200px" height="200px"></canvas><!--
	--><canvas id="c7" width="200px" height="200px"></canvas><!--
	--><canvas id="c8" width="200px" height="200px"></canvas><!--
	--><canvas id="c9" width="200px" height="200px"></canvas>

	<div id="options">
		<input type="submit" id="reset" value="Start Over" />
	</div>
</div>
<!--</>-->
</body>
</html>
You're now ready for Part 2: CSS Check it out!
1 post Page 1 of 1
Return to “Tutorials”