Treehouse Techdegree Project #4 - Tic Tac Toe game
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download

Tic Tac Toe Game


  • When the page loads, the startup screen should appear.

  • Add programming, so that when the player clicks the start button the start screen disappears, the board appears, and the game begins. Use the tictactoe-02-inprogress.png mockup, and the board.txt

  • Play alternates between X and O.

  • The current player is indicated at the top of the page

  • When the current player mouses over an empty square on the board, it's symbol the X or O should appear on the square.

  • Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square.

  • The game ends when one player has three of their symbols in a row either horizontally, vertically or diagonally. If all of the squares are filled and no players have three in a row the game is a tie.

  • Add programming so that when the game ends, the board disappears and the game end screen appears.

  • Add programming so that when a player pushes the "New Game" button, the board appears again, empty and a new game begins.

  • Use the module pattern to wrap all of your JavaScript code into a single global variable or an immediately invoked function.

Extra Credit

  • [] Let a player add their name before the game starts

  • [] Add programming to support playing against the computer. Only one player plays, the other is controlled by your programming.

View Project

Live Demo of this project for peer review.