Concepts in Computing
CS4 - Winter 2007
Instructor: Fabio Pellacini

HW 5, due Monday, Feb 19


In this homework you will write a JavaScript program to play Tic-Tac-Toe. We have prepared a framework page you can use to start writing your program, which you can download from here or packed as a zip file from here. You should upload your final page, together with the given images, to your private directory. Also, include the timestamp in your final page.

This is your first JavaScript program. We strongly suggest you start very early! For this homework, you are not allowed to look at any Tic-Tac-Toe implementation on the Web, since in many cases, that would mostly solve the homework. So please do this homework without consulting external sources.

Framework Description

  1. Game representation. Check out the framwork page. The Tic-Tac-Toe game user interface is a table with images, that, when clicked, call JavaScript to process game events. The game state is stored in the tiles array. Tiles are numbered from 0 to 8 like the following table.
    The tiles[index] variable encode the state of a cell as
    • 0 -> empty
    • 1 -> o
    • 2 -> x
    • 3 -> o winning triplet
    • 4 -> x winning triplet
  2. Skeleton code. We have already written the scheleton code for the whole assignment as well as connected HTML events to Javascript function for you.
  3. Helper functions. The framework code contains helper functions which we wrote for you. In particular, the function setTiles will properly set the images to the correct ones based on the values in tiles. Also note that we have created a debug form to print out messages. This is useful to output things while you are trying to understand what the code does.


  1. Game start [10 points]
    Implement the function startGame that will set all the tiles to empty. You can test this function by pressing the start button.
  2. Click [20 points]
    Implement the function clickTile that is called if a user clicks on the index tile. Your function should set the variable tiles[index] to the appropriate value (1 or 2), depending on whose player the current move is. Furthmore, your function should not do anything is the current tile has been already clicked.
  3. Winning [40 points]
    Implement the function checkWin that will check if there is a winning combination, either horizontal, vertical or diagonal. If so, the function should set the tiles in the winning triplet to the winning values (3 or 4).
  4. Computer Game [30 points]
    Implement the function computerMove that will perform one move by the computer. Use your imagination to decide what this function should do. In general, game playing is a hard problem and is solved by algorithms in artificial intelligence. In our case, we will be fine to have a not-so-smart computer player! The only two requirements for full credit are that (a) you should not play tiles already played and (b) play first the center, than the corners, than whatever is left.
  5. Extra Credit [*]
    This is extra creadit! You are not to do this unless you want to (i.e. you will get full crdit even if not completed). While the class does not normally have extra credit, we could resist this one :-)
    Make the computer player smart. In particular, (a) check if the human player has a winning mvoe and block it, (b) check if the computer player has a winning move and play it.