Connect Four

Objective(s)

• You will be able to create a Connect Four game using HTML & JavaScript
• You will be able to draw on the HTML canvas
• You will be able to use loops and if-statements to check for valid moves and wins

Directions

• The Connect Four game must be broken up into manageable pieces. The variables and functions specified below will help guide your development. We will develop the game in the following order:
  1. Write a function to draw the board
  2. Write a function to draw a chip (circle)
  3. Write the functions to translate our mouse-click coordinates to row and column numbers
  4. Write the function to place a chip in a column (i.e. the chip has to drawn at the lowest possible place)
  5. Write the Boolean check functions to check if a move is valid, to check if the board is full, and to check if anybody has won
  6. Integrate our functions to the canvas’s mouse-click event handler

Variables:

• Initialize the following variables to starting default values at the top of your JavaScript file

• cHeight – the height of the canvas
• cWidth – the width of the canvas
• board – a 2-dimensional array of strings that store all the locations of chips ("", "red", "black")
  • Example: var board = []
  • We will fill board with lists of empty strings ("")
• turn – the current player’s turn ("red" or "black")

Main function

• main() - the main function that sets up the board and runs the game
  1. Populate board with empty strings ("")
     1. Write a nested for loop that pushes an empty list/array into board
     2. After you push the empty list, push an empty string into that row
  2. Draw the board graphically using drawBoard()
• clicked()
  • The clicked function is defined in the main() function that you have already defined
  • After the clicked function definition, add the event listening line so that mouse clicks are detected: canvas.addEventListener('click', clicked);

Drawing Functions:

• drawBoard(ctx)
  1. Takes a context variable ctx as a parameter
  2. Use the ctx variable to draw all the white circles for the yellow board
  3. You'll want to use a nested for loop to go through all the [r][c] combinations
  4. You could then call the drawChip() function below to draw a white circle inside the nested for loop
  5. Test the drawBoard() function to make sure that it works
• drawChip(ctx, color, r, c)
  1. Use the color parameter to set the fill color
  2. Draw the chip at a particular row, column location (note: you'll need to convert the row, column to x, y-coordinates using a couple math equations

Row and Column Functions:

• getRow(y)
  • Takes a y-coordinate and returns the corresponding row number
  • Do NOT use any if-statements. This should be a very simple math equation
  • Look at drawChip() to see how you convert from row to y-coordinate. It looks similar, but instead, solve for the row variable to convert from y-coordinate to row
  • Be sure to use Math.floor() to round down to an integer
• getCol(x)
  • Takes an x-coordinate and returns the corresponding column number
  • Do NOT use any if-statements. This should be a very simple math equation
  • Look at drawChip() to see how you convert from column to x-coordinate. It looks similar, but instead, solve for the column variable to convert from x-coordinate to row
  • Be sure to use Math.floor() to round down to an integer

Drop Chip Function

• dropChip(ctx, c, color)
  1. Takes a context, a column c, and a color string
  2. Use a loop to find the lowest available opening in that column. The best loop would iterate from the bottom row (numRows-1) through 0.
  3. Check if board[r][c] matches the empty string:
     1. Place the color in the board and
     2. Draw the chip at that location using a call to drawChip()
• IMPORTANT: Test your Connect Four program to see if dropChip() works when you click anywhere in a column. You will need to add the mouse click event to your main() function and call dropChip() inside your the mouse-click function

Check Functions

• checkValidDrop(c)
  1. Takes a column number and returns true if a chip can be dropped in that column, and false otherwise
  2. This can be simply be done in one line of code (THINK about what the board looks like)
• checkFullBoard()
  1. Use a for loop to iterate through the top row to check if there are any empty spots.
  2. Return false if the board is not full, and return true if the board is full
• checkRows()
  1. Use nested for loops to go through the row and columns to check if there are 4 horizontally matching chips
  2. The for loop for rows will need to go through every row
  3. The nested for loop for columns does NOT need to go through every column. Be sure to bound the column variable of the for loop so that your internal if-statement does not check out of bounds.
  4. If you see 4 in a row, then return the string at board[r][c]
  5. If there are none to be found, then return empty string "" to signify no horizontals
• checkColumns()
  1. Use nested for loops to go through the row and columns to check if there are 4 vertically matching chips
  2. Our outer for loop in checkColumn() will iterate through every column, while the inner for loop will iterate through the rows
  3. The for loop for columns will need to go through every column
  4. The nested for loop for rows does NOT need to go through every row. Be sure to bound the row variable of the for loop so that your internal if-statement does not check out of bounds.
  5. If you see 4 in a column, then return the string at board[r][c]
  6. If there are none to be found, then return empty string "" to signify no verticals
• checkDiagonals()
  1. There are two different sets of diagonals to check for
  2. You will need nested for loops for each set of diagonals that you are checking
• checkWin()
  1. Check if there are horizontal row winners, and return the winner's string
  2. Check if there are vertical column winners, and return the winner's string
  3. Check if there are diagonal winners, and return the winner's string
  4. Check if the board is full and there is a tie. Return "full"
  5. There must be no winner or tie, so return empty string ""