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

• 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

• drawShape(ctx, shape, r, c)
  • Takes 4 parameters:
    • ctx - a context variable for drawing
    • shape - a variable which is just a string "X" or "O"
    • r - row number
    • c - column number
  • Check if the shape variable is an "X", and then you'll have a bunch of if statements to check what the row and column numbers are. For each of the 9 row-column combinations (e.g. r==0 && c==0), you call drawX() to draw an X at the corresponding (x,y) location. For example, if r==0 && c==0, then drawX(ctx, cWidth/6, cHeight/6)
  • Check if the shape variable is "O", and then do the same if statements that you have for drawing the X. The only difference is that you call drawO() instead of drawX()

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 x is between 1/3 and 2/3 of cWidth, then return 1
    • If x 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 ("")