Test Hopefully it works...

Odin Project - Tic Tac Toe in Javascript

Project: Tic Tac Toe in Javascript

If you went through the Ruby course, you had a chance to build Tic Tac Toe to test your OOP skills. If you did, you’ll have a leg up because you’ll be building those project now for the browser.

Tic Tac Toe

Remember Tic Tac Toe? See Wikipedia if you haven’t. It involves a couple of players, a simple board, checking for victory at each turn… Let’s build it!

Your Task

Build a tic-tac-toe game in the browser where two human players can play against each other.

  1. Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
  2. Set up a blank HTML document
  3. Think about how you would set up the different elements within the game. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding.
  4. Create a basic 3x3 board object in Javascript that lists the current item in each space on the board (e.g. “X”, “O”, or “ “).
  5. Create a render() function which cycles through that board object and creates the appropriate HTML elements. Style them to look like a real tic-tac-toe board.
  6. Build the main game logic (we won’t give too many hints here). When the user clicks on a blank square, it should show the current player’s symbol. This can be triggered by listening for a click event on the appropriate div. It may be helpful to give each div a data attribute or id based on its position so you can identify it in your JS code.
  7. The game logic should then check whether the game is over – if any player has achieved victory or if there are no more turns available. In the event of victory or defeat, display an appropriate message on the screen.
  8. Optional – switch out the “X” and “O” letters with appropriate (or funny) images.
  9. Push your solution to Github and post the link to it below.

I dont have a lot to say about this one. One of the previous projects was to code tic tac toe in ruby, so I only had to port it to javascript and change a few stuff. I can feel the procrastination coming back. I must be strong.

Here’s code, and the result.