Tic-Tac-Toe

Objective(s)

• You will be able to create a Tic-Tac-Toe 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 Tic-Tac-Toe 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:
  2. Write a function to draw the board
  3. Write the functions to draw the two different shapes
  4. Write the functions to translate our mouse-click coordinates to row and column numbers
  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 moves (Xs and Os)
  • Example: var board = [["", "", ""], ["", "", ""], ["", "", ""]]
• turn – the current player’s turn (0 or 1)

Functions:

• drawBoard(ctx)
  • Takes a context variable ctx as a parameter.
  • Use the ctx variable to draw the lines for the board. You should draw the lines 1/3 spaced apart. The easiest way to do this is to use cWidth and cHeight and manipulate them with math. Example: cWidth/3
  • Test the drawBoard() function

drawX(ctx, x, y) - Takes 3 parameters, a context variable for drawing, x-coordinate, and y-coordinate. - Use the ctx variable to draw an X at the coordinate (x, y) - Test the drawX(ctx, x, y) function

drawO(ctx, x, y) - Takes 3 parameters, a context variable for drawing, x-coordinate, and y-coordinate. - Use the ctx variable to draw an O at the coordinate (x, y) - Test the drawO(ctx, x, y) function

getRow(y) - Takes a single y-coordinate as a parameter - We will use getRow() to determine which row is clicked by analyzing the y-coordinate - Use if-statements to check which row of the canvas the y-coordinate is found. The top third of the canvas is Row 0, the middle third is Row 1, and the bottom third is Row 2 o If y is less than cHeight/3, then return 0 o If y is between 1/3 and 2/3 of cHeight, then return 1 o If y is greater than 2/3 of cHeight, then return 2

getCol(x) - Takes a single x-coordinate as a parameter - We will use getCol() to determine which column is clicked by analyzing the x-coordinate - Use if-statements to check which column of the canvas the x-coordinate is found. The left third of the canvas is Col 0, the middle third is Col 1, and the right third is Col 2 o If x is less than cWidth/3, then return 0 o If y is between 1/3 and 2/3 of cWidth, then return 1 o If y is greater than 2/3 of cWidth, then return 2

checkValidMove(row, col) - Checks if the board element at [row][col] has a move already in it - Return true if board[row][col] is equal to empty string “”, and false otherwise

checkWin() - Checks to see if there is a winner (3 lined up Xs or Os) o Checks the 3 rows o Checks the 3 columns o Checks the 2 diagonals - Returns “X” if X wins, “O” if O wins, and “” if there is still no winner

checkFull() - Checks to see if every element in board[][] has been filled - Return false if any of the elements in board[][] are equal to “” - Return true if every element in board[][] is not equal to “”