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
• red - the number to represent red (1)
• blue - the number to represent blue (2)
• board – a 2-dimensional array of strings that store all the moves (0s, 1s, and 2s)
  • Example: var board = []
  • We will fill board with lists of 0s
• turn – the current player’s turn (1 or 2)

Main function

• main() - the main function that sets up the board and runs the game
  1. Populate board with empty 0s
     1. Write a nested for loop that pushes an empty list/array into board
     2. After you push the empty list, push 0s into that list's row
  2. Draw the board graphically using drawBoard()

Drawing Functions:

• drawBoard(ctx)
  • Takes a context variable ctx as a parameter.
  • Use the ctx variable to draw all the white circles for the yellow board.
  • You'll want to use a nested for loop to go through all the [r][c] combinations
  • You could then call the drawChip() function below to draw a white circle inside the nested for loop
  • 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