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:
  1. Write a function to draw the board
  2. Write the functions to draw the two different shapes
  3. Write the functions to translate our mouse-click coordinates to row and column numbers
  4. 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
  5. 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)

Drawing 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 to make sure that it works

• 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 to make sure that it works. The easiest way may be to link drawX() to mouse-clicks for testing

• 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 drawY(ctx, x, y) function to make sure that it works. The easiest way may be to link drawY() to mouse-clicks for testing

X Y Coordinate-Row Col Translation Functions:

• 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
    • If y is less than cHeight/3, then return 0
    • If y is between 1/3 and 2/3 of cHeight, then return 1
    • 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
    • If x is less than cWidth/3, then return 0
    • If y is between 1/3 and 2/3 of cWidth, then return 1
    • If y is greater than 2/3 of cWidth, then return 2

Check Functions:

• 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). Returns “X” if X wins, “O” if O wins, and “” if there is still no winner
    • Checks the 3 rows
    • Checks the 3 columns
    • Checks the 2 diagonals

• checkFull()
  • Checks to see if every element in board[][] has been filled
  • Return false if any of the elements in board[][] are equal to empty string ("")
  • Return true if every element in board[][] is not equal to empty string ("")