Tic-tac-toe is a game played in a 3x3 square. You and your opponent must take turns putting your symbols in the empty squares. The first player to have a full row of their symbols (in any orientation) wins! If the board is filled and no player has a full row of 3 symbols, it is a tie!
You must first create an account to play the game. Click on the 'No Account? Sign Up Here!' button on the top of the page. Enter your email and secure password Log-in to your account using the 'Sign In Here!' button If you'd like to change your password, click on the 'Change Password' button. Click on 'New Game' After the game is over, click on 'Restart' to play another game. You can sign out at any time by clicking the 'Sign Out' button.
I had originally intended to create the game with a very minimalistic approach. I wanted the board and some buttons, nothing more. The first thing I did was create a wireframe to have an idea of how the page was going to look.
My main focus was on getting the game to work. After having the login functions working correctly, I focused on the game itself. I quickly realized that I was unaware of how to pass functions values. This was my main issue, but I opened a support issue ticket any time I needed guidance. Once that concept clicked, the rest was fairly simple. The coding for the game was done in a few days and the rest of the time was spent on design.
I used bootstrap and CSS to make my page look the way it does. It was easy enough to get it to the right size. It became clear to me that the notion of having one button change over and over again would be troublesome to implement easily. I decided to have buttons hide and show as needed. The mobile layout was the biggest issue I had. The images were losing their ratios and pushing text all over the place. Once I solved that, I was able to have a functional game on any device.
- As a user, I want to sign up so I can have an account to play on
- As a user, I want to sign in so I can access my account
- As a user, I want to be able to change my password for security
- As a user, I want to sign out of my account, so nobody has access to it
- As a user, I want to be able to start and end a game
- As a user, I want to place my marker on the board
- As a user, I want to know how many games I have played
- As a user, I want to know who the winner is
- JavaScript
- HTML
- AJAX
- CSS
- jQuery
- Bootstrap
-
No problems left!
-
Planning on adding a feature that allows user to change their token.
