Skip to content
A functional, two-person Tic-Tac-Toe game.
Branch: master
Clone or download
Latest commit 09c405f May 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Removed all files from repo and added them back Feb 25, 2018
img Initial files Jan 30, 2018
js
.gitignore Added .gitignore Feb 25, 2018
README.md Minor changes to README.md Jan 31, 2018
index.html

README.md

Tic-Tac-Toe

Project 4 | Treehouse Full Stack JavaScript Techdegree

A functional, two-person Tic-Tac-Toe game.

Requirements

  • Use the supplied mockup files and HTML snippets to guide you in building a Tic Tac Toe game. You can use jQuery or plain JavaScript to complete this project. Don't use an already programmed Tic Tac Toe plugin or library.
  • When the page loads, the startup screen should appear. Use the tictactoe-01-start.png mockup, and the start.txt HTML snippet to guide you.
  • 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 HTML snippet to guide you.
  • Add the game play following these rules:
    • Play alternates between X and O.
    • The current player is indicated at the top of the page -- the box with the symbol O or X is highlighted for the current player. You can do this by simply adding the class .active to the proper list item in the HTML. For example, if it's player one's turn, the HTML should look like this:
    • When the current player mouses over an empty square on the board, it's symbol the X or O should appear on the square. You can do this using the x.svg or o.svg graphics (hint use JavaScript to set the background-image property for that box.)
    • 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 CSS we're providing will automatically add the proper image to the square marking it as occupied.
    • 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. Use the tictactoe-03-winner1.png and tictactoe-04-winner2.png mockups, and the win.txt HTML snippet for guidance. Depending on the game results the final screen should:
    • Show the word "Winner" or the phrase "It's a Tie!"
    • Add the appropriate class to the
      for the winning screen:
      screen-win-one for player 1, screen-win-two for player two, or screen-win-tie if the game ends with no winner. For example, if player 1 wins, the HTML should look like this:
  • Add programming so that when a player pushes the "New Game" button, the board appears again, empty, and a new game begins.

Extra Credit

  • On the start screen, prompt the user add their name before the game starts.
  • Display the player’s name on the board screen during game play.
  • Add programming to support playing against the computer. Only one player plays; the other is controlled by your programming.
  • Display the player’s name if they win the game.

View Project

Live Demo for peer review.

You can’t perform that action at this time.