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()

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

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
• 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

Check Functions

• checkValidDrop(c)
  • Takes a column number and returns true if a chip can be dropped in that column, and false otherwise
  • This can be simply be done in one line of code (THINK about what the board looks like)
• checkFullBoard()
  • Use a nested for loop to iterate through every row and column. If there is ever an empty slot (empty string), then return false (because the board is not full)
  • Otherwise, after the loop return true
• checkRows()
• checkColumns()
• checkDiagonals()
• checkWin()

Clicked Function

• The clicked function will go in the main() function that you have already defined
• Add the event listening line so that mouse clicks are detected:
  • canvas.addEventListener('click', clicked);
• clicked(evt)
  1. Determine the x and y coordinates
  2. MORE TO COME