In this project, you'll build a functional, two-person Tic Tac Toe game. You'll use the provided mockups, HTML, CSS and image files to create a game that requires players to add their names, take turns adding an X or O to the game board, and announce when the game ends. You'll need to keep track of the state of the game -- whose turn it is, where the X's and O's are on the board, and whether the game is a draw or, if not, who won and lost.
You'll use your knowledge of JavaScript data structures like arrays and objects as well as DOM-manipulation using jQuery or plain JavaScript to complete this project.
And, to ensure that you're using good programming practices, you’ll use the module pattern to create your Tic-Tac-Toe game. In other words, you should wrap all of your code in a single global variable, or execute it all in a single self-invoking function. See the link in the project resources for a Treehouse workshop on the module pattern.
- Start screen appears when page loads
- Play Game button loads the Tic Tac Toe board and start the game
- Game alternates between O and X
- Active player identified on the page (The O or X is highlighted, depending on whose turn it is)
- Empty squares are highlighted with player's symbol when moused over
- Cannot click on already occupied squares
- Occupied squares are identified with an X or O
- Games ends if player has 3 symbols in a row, or the board is full
- Finish screen appears announcing winner (or tie)
- New game button starts a new game on an empty board
- Uses the module pattern or a self-invoking function literal
- Program is stored in, at most, one global variable
Live Demo of this project for peer review.
Excellent work, Richard!
Your Tic-Tac-Toe project is great. Your start page is on point. Your game UI functions nicely and looks slick. Modular pattern is implemented well in your JS file. All in all, excellent work here!
As you move on to your next project, keep up the great work! And try shooting for those exceeds grades! The time spent attempting to hit those exceeds criteria will strengthen your skills and give you cooler projects to show off at the end of this Techdegree. Definitely worth your time to revisit this project at some point to add some of those nice exceeds features to make this already cool project even better. :)
The next project focuses on making some requests from an external API. And that means working with some asynchronous code. That’s just another way of saying code that waits to run until some other task is complete. This can be a somewhat tricky concept at first, but once you get the hang of it, you’ll see that it’s nothing you can’t handle. Just take your time and give it your all and I'm sure you'll do great!
Good luck and happy coding as you move forward, Richard! You rock! :)