Due: Tuesday, Feb. 24th by 8:00pm
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.
Similar to previous MPs, this MP starts with a base set of files that can be downloaded here.
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.
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:
document
variable within JavaScript
document
variable's method getElementById
. The method getElementById
takes one parameter, the value of the attribute id
of an HTML tag. For us, these id
s are
"cell_top_left"
, "cell_middle_right"
, etc.
getElementById
is the JavaScript representation of the <span>
tag
in the HTML. Changing the property innerHTML
changes what is displayed on screen.
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";
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.
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.
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:
O
, not a zero (0
) or a lower case o (o
).<span id="turn">
tag is being updated.. Your HTML should change from showing
Current Turn: X to Current Turn: O after a cell is clicked.
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!
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:
id
attributes of the elements we have provided for you. (If you do, your program
will not be able to be graded and you will get no points.)
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.
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";
For +1, program the reset button so that when a user clicks "Reset Game" the game resets. This includes:
"black"
(if you completed Extra Credit #2)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:
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!
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: