HTML: Tic-Tac-Toe

Overview

In this HTML lesson, we demonstrate how to write a tic-tac-toe game using the techniques of our previous lessons. The main HTML file that we have is a set of nine iframe elements that we position with line breaks. Inside the iframes, we place a document for each square that allows us to select an "X" or "O" for the square. These selections are made via an image map. Squares are selected sequentially until the game is over and someone wins.

Tic-Tac-Toe

The Board

The main HTML file is a set of 9 iframe or inline frame elements. These elements are 120 pixels by 120 pixels. Inline elements naturally line up horizontally. So, we need to insert line breaks into the series to add in an endline. These line breaks after the 3rd and 6th iframes form our iframes into a 3 by 3 board. Each of these 9 iframes uses the document "Square.html" as a source. The images for the squares are only 100 pixels by 100 pixels, but the additional 20 pixels are needed for the 10 pixel margin on each side.

TicTacToe.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe><br />
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe><br />
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe>
      <iframe src="Square.html" width="120px" height="120px"></iframe>
  </body>
</html>
 

Output

 

The Choice Square

This HTML document represents the initial state of the squares of the board. The document has a single square image. The square has a lightly-colored divider with an "X" on the left and an "O" on the right. The image is 100 pixels by 100 pixels. On this image is an image map, where the left half is one rectangle and the right half is one rectangle. These halves are linked to the X.html and O.html documents, respectively.

Square.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="Choose.png" alt="Choose" usemap="#choose"/>
	<map name="choose">
	  <area shape="rect" coords="0,0,50,100" alt="X" href="X.html">
	  <area shape="rect" coords="50,0,100,100" alt="O" href="O.html">
    </map>
  </body>
</html>
 

Output

 

The X Image

This HTML document is just the "X" image. It is a 100 pixel by 100 pixel image.

X.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="X.png" alt="X" />
  </body>
</html>
 

Output

 

The O Image

This HTML document is just the "O" image. It is a 100 pixel by 100 pixel image.

O.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="O.png" alt="O" />
  </body>
</html>
 

Output