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