Computer Science I - Programming Assignment 1
Due Wednesday, September 30th
Summary
For this assignment you will use your knowledge of HTML and JavaScript to design a simple tic-tac-toe game. Your finished product should look something like this:
When the user clicks on one of the blank tiles, the tile image should change to show an X or an O depending on whose turn it is. Also, the image at the bottom -- which indicates whose turn it is -- should change any time a player clicks a tile. If the first player (X) takes the upper left square, the result should look like this:
If the second player (O) takes the center square, the result should look like this:
Do not worry about who wins or loses the game, or if someone can click on tile that has already been taken.
Files
You are free to use any images you want for the tiles. I have created images for blank, X, and O tiles here: blank.jpg x.jpg o.jpg
Switching Images
The following function will help you switch between the O and X images. If you are using different images from the ones I have provided, make sure to modify this function accordingly.
function switchImage(image)
{
return image.match("x.jpg") == "x.jpg" ? "o.jpg" : "x.jpg";
}
To use this function, get the value of the src attribute from the image you wish to switch, and pass it as an argument to the function.
The function will return the file name for the opposite image, that is it will switch from X to O or from O to X.
You can then set the src attribute of your image to the value the function returns.
Instructions for Handing In the Program
Please hand in the following:
- a printed copy of your program in class on the due date
- an electronic copy of your program via filezilla in the handin folder in your home directory on the CS server.