Tic-Tac-Toe
From WLCS
Contents
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:
- Write a function to draw the board
- Write the functions to draw the two different shapes
- Write the functions to translate our mouse-click coordinates to row and column numbers
- 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
- 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 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
- 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
- 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 ("")