110-18.1 COMP 110, Spring 2009 Final program (Javascript program 5) Due at 4:30pm, Tuesday, April 28th Late programs will not be accepted Connect 4 For this assignment you will create the game Connect 4 that will allow two players to play the game. 1. Build the game board. Basically it will be a table with 7 rows and 7 columns (see example below). The game board consists of the first 6 rows of the table; the bottom row contains the buttons that allow players to specify a move. In addition there should be a read-only text area with brief instructions, a text box that indicates whose turn it is, and a start button that resets the board. The winner can be specified by an alert or with a message in a textbox. 2. Playing. For simplicity, let red always go first. Play alternates red-black-red-black, etc. A player selects a column by clicking the button at the bottom of that column. The "checker" goes in the lowest row in that column that is not already occupied. If the column is full, issue an appropriate error message and instruct the player to try another column. 3. End of the game. The game ends either when the board is full (no moves possible) or when one player has four in a row, either horizontally, vertically, or on a diagonal. To get a maximum grade of C for this assignment, you should do parts 1 and 2. This will allow two people to play, but they will have to figure out for themselves if there's a winner. To get a maximum grade of B, do parts 1 and 2 and check for horizontal or vertical winners. To get an A, you'll have to also check for diagonal winners. Hints: Checking for row or column winners is pretty easy since the rows are all the same length and the columns are all the same length. The diagonals are trickier since they vary in length. You don't have to check the length 1, 2, or 3 diagonals because they cannot possibly contain a winner. The length 4, 5, and 6 diagonals might contain a winner, so they need to be checked after every move. There are six such diagonals in each direction. Once a winner has been declared, the game ends and the buttons should be disabled until the start button is pressed. Assume that the board is a 2-dimensional table with element [0][0] (the first index is the row; the second is the column) in the lower left corner and [5][6] in the upper right corner. Note that for each row, the row number is fixed and the column number varies from 0 to 6. In each column, the column number is fixed and the row varies form 0 to 5. For each of the six northeast pointing diagonal, the row number minus the column 110-18.2 number is constant and varies form 2 to -3; for each of the six northwest pointing diagonals, the sum of the row and column is constant and varies from 3 to 8. I found it useful to write out the grid, putting the row and column numbers in each square. Then write out the indices of the squares that make up each diagonal. For example, the following are two of the six northeast pointing diagonals that need to be checked. (2,0) (3,1) (4,2) (5,3) (0,0) (1,1) (2,2) (3,3) (4,4) (5,5) And here are two of the six northwest pointing diagonals. (0,3) (1,2) (2,1) (3,0) (0,6) (1,5) (2,4) (3,3,) (4,2) (5,1) Once you have seen all the diagonals, look for regularities that can simplify the code. The eval function can be very useful. For example, if each entry on your game board is a textbox, and each has as its name the letter 't' followed by the row number, followed by the column number (e.g. t00, t01, … t56). Then if you wanted to change the color of table entry in row r, column c to red, you could construct the appropriate instruction as a string, then execute it with eval. For example var s="document.myform.t" + r + c + ".style.backgroundColor = \"red\""; eval(s); Extra stuff (for a small amount of extra credit) Don't try this until you have the game working. Add sound and animation to the game. Instead of a checker simply appearing in the appropriate board square, make it fall from the top, just like in the real game, and have it make a sound when it hits. When the reset button is pressed, make the checkers all fall out the bottom. I'm convinced that this is one of the big selling features of the real game. 110-18.3