CSC170: Introductory Computer Programming

Homework Assignment 3

Due: Tuesday, July 13 Midnight

You will write a JavaScript program to play tic-tac-toe in this assignment. Your will learn:

The board is an 3x3 grid of buttons. There are two sides of the game, o and x. The game starts with an empty board like the following.

When a human player presses one of the buttons, an o (or x) is marked on the button he/she pressed. Your program will play against the human player by marking an x (or o) on one of the empty buttons.

If one side wins, your program should stop and tell which side wins.

If it's a tie, your program should stop and show there's a tie.

Requirements

  1. Your program should show the board correctly and allow a user interact with it. E.g., when the user presses a button, the button should be marked with o or x. 2 pts
  2. Your program should be able to tell if there is a win or tie. 1 pt
  3. Your program should be able to play with a human player. 1 pt
  4. When playing with a human player, your program should stop when the game ends and tell which side wins or it's a tie. 1 pt

Hints

Don't expect to get everything work all at once. This is not a trivial task as you did in the in-class labs. There is some logic you have to think through. Even if you are convinced that you have done everything right, there might be glitches you are not aware of. Play with your program thoroughly before you submit.

You will probably proceed in steps. (In the instructions, when I say "placing a piece x on a button" or "marking a button with x", I mean the same thing, the former being figurative and the latter being concrete.)
  1. Generate the board and write event handlers to change the values (the text) of the buttons. The following code fragment may come helpful.

    <script>
    function t11_play() {
    	document.board.t11.value = "x";
    }
    ...
    </script>
    ...
    <table><------ a table of 9 buttons 
    ...
    <td><input type="button" name="t11" onclick="t11_play()" value=""></td>
    ...<------ more buttons here 
    </table>
    
    

  2. Now you should have your 9 buttons, each of which will start with no text on it and will show an x when pressed. It doesn't play tic-tac-toe, though. To play the game properly, the text on each button should change according to which side, either the x side or the o side, is placing a piece on this button. You need to keep track of which side is pressing a certain button. You can use a variable, say which_side, to indicate which side is playing at this moment. The variable which_side will have two values, e.g., 0 and 1. When it's 0, let's say the o is playing and when it's 1, it's x side playing. Now we can incorporate this into our event handler.

    <script>
    var which_side = 0;
    
    function t11_play() {
    
    	if(which_side == 0)
    		document.board.t11.value = "o";
    	else
    		document.board.t11.value = "x";
    
    
    	if(which_side == 0)
    		which_side = 1;
    	else
    		which_side = 0;
    }
    ...
    </script>
    

    Note the second if/else statement: we flipped which_side. We did this because after a piece is placed, it's the other side's turn to play. Of course we can put the two if/elses together and write more succinct code as following.

    <script>
    var which_side = 0;
    
    function t11_play() {
    
    	if(which_side == 0){
    		document.board.t11.value = "o";
    		which_side = 1;
    	}else{
    		document.board.t11.value = "x";
    		which_side = 0;
    	}
    }
    ...
    </script>
    

  3. Now you should play this game all by yourself. I.e., you click each button and each button should show o and x in turn. You'll get 2 points if you come this far. To make it a real game, even played by yourself, your program need to tell wins and ties. You can port what you did in Lab 10 here.
  4. You still need to teach computer to play. You probably need to write another function, say play(), like the event handler I showed. At the end of the event handler, you call this function. You have to make sure only to put a piece on empty buttons.
  5. You may find that you need a function to clear the board, i.e., to clear every button. This is fairly straightforward: you just assign a space to value. If the names you give to your buttons are t11, t12...t33, you can write something like this:

    <script>
    
    function clear_board() {
    
    	document.board.t11.value = " ";
    	document.board.t12.value = " ";
    	...
    	document.board.t33.value = " ";
    
    }
    ...
    </script>
    

Bonus Points

You can earn extra points if you

Hand-in Procedure

Do not FTP your home page and relevant other HTML and image files to your course account on mail.rochester.edu until you have received your grade .
Note that directories on mail.rochester.edu are scanned regularly. Any person who makes active homework files accessible to others is violating the homework requirements and forfeits their grade.

Instead,

Plagiarism

There are a handful of JavaScript tic-tac-toe implementations on the net. You can certainly take a look at how other people do it. But do not copy their code. If plagiarism is found, you will not only lose the points for this assignment, you may also face additional penalties from the University.