Introduction

Tic-Tac-Toe

The game of tic-tac-toe is a classic paper-based game that is played on a 3x3 grid between two players. The first player traditionally takes on the symbol X and places an X is one of the nine cells. The second player, using the symbol O, places her symbol in a second cell that is currently not occupied. This process repeats itself until either no cells are left (the game ends with no winner) or until one player has three symbols in a row (virtually, horizontally, or diagonally).

In this MP, we have set up only a very minimal HTML page for you to create your game. Through this MP, you will learn about how JavaScript interacts with HTML pages.

Download The MP

Similar to previous MPs, this MP starts with a base set of files that can be downloaded here.

Working Through the MP

Part 1: Connecting the HTML to JavaScript

Before jumping into JavaScript, we will be focusing on understanding how the HTML interact with the JavaScript. If you open up tictactoe.html in a web browser and click a cell, nothing happens. Lets fix this!

When you open the HTNL in a plain text editor, you will find HTML is made up of a series of tags that define elements within the HTML page. Specifically, each of the nine cells making up the tic-tac-toe board are <span> tags. You should be able to find a segment of HTML that appears as the following:

   <span id="cell_top_left"></span>
   <span id="cell_top_center"></span>
   <span id="cell_top_right"></span>

   <span id="cell_middle_left"></span>
   <span id="cell_middle_center"></span>
   <span id="cell_middle_right"></span>

   <span id="cell_bottom_left"></span>
   <span id="cell_bottom_center"></span>
   <span id="cell_bottom_right"></span>

In order for an action to be preformed when the button is clicked, we must add an attribute to the HTML tag. The onclick attribute defines the code that should run when the HTML element is clicked.

Add the onclick attribute to each span tag to call a JavaScript function called onCellClick that takes in one parameter: the value of the id attribute for each tag. This means that, for example, the cell_top_left span would look as follows:

   <span id="cell_top_left" onclick="onCellClick('cell_top_left');"></span>

In the above code, note that we use single-quotes to represent the 'cell_top_left' String in the code. Since the onclick attribute's value is already using "double quotes", we use single quotes in JavaScript to allow for a String inside of another String. In JavaScript, you can use either single or double-quotes to represent a String.

Repeat this for all nine cells, making sure that the argument passed into the onCellClick function in the value of the id attribute.

Part 2: Starting the onCellClick function

When a cell is clicked within the tic-tac-toe game, the expected behavior of a game is for an "X" or an "O" to appear on the screen when the cell was clicked. We have already hooked up the HTML to call onCellClick when the cell is clicked. Therefore, we just need to program the onCellClick function.

Inside of mp3.js, you will program the onCellClick function that will run when the cell is clicked. You should start the onCellClick function in the same way that we have all functions in JavaScript:

var onCellClick = function(id) {
  // We will write the code to run when the cell is clicked here!
};

JavaScript functions are already available for us to use to change the text inside of an element on a web page. To change this text, your code will need to do three things:

Putting this all together, the line of code to change the cell that contains the attribute id="cell_top_left" to an X would be:

  document.getElementById("cell_top_left").innerHTML = "X";

Test your code now!

If you have followed the description to this point, clicking any cell should make an X appear in the top-left cell. Make sure this works before continuing! The next part assumes this part is working.

Part 3: Placing X Correctly

Instead of simply having the X appear in the top left, we need to use the parameter passed into the onCellClick function to determine which cell should have the X.

One way of doing this is with several if statements:

   if (id == "cell_top_left") {
      document.getElementById("cell_top_left").innerHTML = "X";
   }
   
   if (s == "cell_top_center") {
      document.getElementById("cell_top_center").innerHTML = "X";
   }
   
   ...

However, it is possible to do this all with just one line of code! Using what you know, write the line of code that uses your funciton parameter id to change the cell that was clicked to contian an X.

Test your code now!

If you have followed the description to this point, clicking any cell should make an X appear in the cell you clicked. Make sure this works before continuing! The next part assumes this part is working.

Part 4: Beyond Xs

Take a look back at your HTML file. Near the very bottom of the file, you will notice there is a <span id="turn">X</span> tag:

   <p>
      Current Turn: <span id="turn">X</span>
   </p>

Instead of using X for every case inside of our JavaScript, we should use the value showing as the current turn on the web page. To do this, we can use the exact same document.getElementById(____).innerHTML code that we used previously -- accessing a different id.

The code to get the current turn as a variable inside of your ocde is as simple as:

  var turn = document.getElementById("turn").innerHTML;

Update your other line of JavaScript to change the value of the clicked cell to the variable stored in turn instead of an X.

Test your code now!

If you have followed the description to this point, clicking any cell should make an X appear in the cell you clicked. This is the same thing that the previous part did, but this time it's done by reading the current turn. Make sure this works before continuing! The next part assumes this part is working.

Part 5: Xs and Os

Now, the turn variable gets whatever text is inside of the <span id="turn"> tag. For now, this is always X since we have no code written to change the HTML inside of <span id="turn">.

The only thing left to do in order to finish off a minimal tic-tac-toe game is to alternate between Xs and Os. This means:

Test your code now!

At this point, you should be able to click cells and have alternating Xs and Os appear! If you follow the rules of tic-tac-toe, you and a friend can now play a game!

Having a game that is working through Part 5 is all that is minimally required for this MP. You will earn 20/20 if you submit your code at this point. However, if you want to make it a real game, lets keep going!

Extra Credit

Overview

Let us finish up the game! A series of extra credit problems are given below that will result in your program becoming more and more like a true tic-tac-toe game. Completing all of the extra credit will result in your game being a totally finished game!

A few notes before you get started:

Extra Credit #1

For +1, modify the program so that when a user clicks on a cell that is already occupied with an X or an O, nothing happens. That is both that the cell does not change and the turn does not advance to the next player.

Extra Credit #2

For +1, modify the program so that when a game is won by a player:

In order to change the color of the text of an element in JavaScript, you use a similar command to the command you have used to change the element’s content. Similar to the .innerHTML method, you change the color of the text inside of an element by:

  document.getElementById(id).style.color = "red";

Extra Credit #3

For +1, program the reset button so that when a user clicks "Reset Game" the game resets. This includes:

Extra Credit #4

For +2, modify the program so that the O are played by the computer. After an X is played by the user, an O should be automatically played following a few basic rules:

  1. If there is a cell that an O can be placed so that an O wins the game, your program must place an O in that cell.
  2. If O cannot win, if there is a cell where X could win on its next turn your program must place an O in that cell. If there are two locations where X could win, place an O in either one of those cells.
  3. Otherwise, place an O anywhere on the board.

By playing automatically, the user should click a cell to play an X and then an O should immediately appear on the board and it should be Xs turn again.

It is possible to make O play in such a way that it’s impossible for X to win (eg: every game either O wins or it’s a draw). While this is not required, it would be awesome if you were able to do it!

Submission and Grading

Your program must run to receive any credit at all. If an error occurs so that we are unable to run the program, we will not fix the error in your code. We will award points for your program completing the following:

Submit MP3 here