alexvera1/tic-tac-toe

Tic Tac Toe Project

Overview

I created this project for unit 1 of the Software Engineering Immersive at General Assembly. The game allows players to sign up for a user account with their email address and password, sign in to the gaming portal, and play rounds of tic-tac-toe.

The game is played by placing X's and O's in the grid with nine individual square. X goes first and turns are alternated between player X and player O. The players can win across (rows), vertically (columns), diagonally or counter diagonally. To win a round, the player has to have three of their markers in a row, vertically, or diagonal. When a winning condition is met, the player is notified with a message "Player X has Won" or "Player O ha won". You can start a new game or sign out.

Important Links

https://alexvera1.github.io/Tic-Tac-Toe/

Planning

One of the resources that helped guide the planning of this project was the Suggested Schedule. This provided a framework and time line to tackle the project step by step. Initially, I created a wireframe to visualize what the sign up/sign-in and game board views would look like and begin building it out from there.

I started out with a simple sign up form where the user could create an account with a user name and password, sign in to the gaming portal and start a new game. Next, I created the gaming view with a standard grid with 9 spaces. The game logic and functionality was needed to make the game interactive and playable. This was accomplished by incorporating winning conditions using Javascript,user input with jQuery and data storage using API calls. Game status messaging was implemented to let users know the winning player, a tie, when the user successfully signed in, successfully signed out, or if there was a failure in sign up/sign in.

To style the game, I used css to target the elements in HTML with classes and id's. I kept the styling simple but I did use various colors, fonts, and font sizes to add creativity and unique style to my game.

Throughout the development stages of this project I referenced various sources of information to strengthen my knowledge base and figure out how to approach building this application. These sources include the user and gaming documentation, Chrome Developer Tools, resources provided in class, appointments with TA's, collaborating and discussing issues with students and instructors.

User Stories

As a user, I want to create a personal account with email and password. As a user, I want to be able to play again when the current game is over. As a user, I want to know who won: X or O. As a user, I want to be able to sign out. As a user, I want to be able to start a new game. As a user, I want a game interface that is fun and easy to use.

Technologies Used

• HTML
• CSS
• JavaScript
• Bootstrap
• jQuery
• AJAX
• GitHub
• Visual Studio Code
• API
• JSON

Wireframes

![Wireframe] (https://imgur.com/WJl9LKV)

Resources

[Link to game-project-api] (https://git.generalassemb.ly/seir-flex-831/game-project-api/blob/master/docs/game.d#update-request-body)

[Link to game-project-styling-guide] (https://git.generalassemb.ly/ga-wdi-boston/game-project-styling-guide)

[Link to styling video] (https://drive.google.com/file/d/1v7iHsx5T2owSHBxeeK6IRyjje0lN3YtR/view)

[Link to Coolers] (https://coolors.co/palettes/trending)

[Link to markdown-study] (https://git.generalassemb.ly/seir-flex-831/markdown-study/blob/solution/study.md)