I have decided for my second project to develop a small game we all know called Tic Tac Toe, the reason for the is because it shows off what I have learnt so far with javascript and it's one of the more complex games to develop. The reason I chose this game is because I always used to enjoy playing tic tac toe, many people know this game already and it's always enjoyable to play. The primary focus of this project, is to allow full functional interaction with it's users to allow for a quick and easy user experience. My main goal was to create a interactive easy to use game. I chose to use a simple layout using an attractive landing page image to catch users attention.

Here you can find a demo of the deployed website here

Here you will find screenshots of the deployed website here

Colour Scheme I opted for a colour scheme of black, green and blue, the reason for this is the darker colour suits the games look, like a retro game along with the blue and green to compliment the logo.

Typography I decided to go with a retro to modern handwriting style of text. I feel the retro really suits the game along with the handwriting style font. The font I decided to use is Pacifico.

Layout I wanted to create an uncluttered game screen where navigation was easy to understand. So I opted for an old school looking main menu. When on the game board you can see the simplicity along with the colours to make the game board stand out. When heading to the rules section I tried to keep with the retro look to keep with the theme of the game.

Sound I decided to add sound to buttons to continue the retro theme and add a little extra for the user, along with a sound for a win or a draw.

All Wireframes were designed using Balsamiq Follow the links below

First Time User

• As a first time user, I want to easily understand how to play the game.
• As a first time user, I would like to easily access the rules of the game.
• As a first time user, I would like to be able to ecit the game when im finished.

Returning Visitor

• As a returning user, I want to enjoy playing the game so that I can recommend it to others.
• As a returning user, I want to be able to play the game as many times as I wish.

Frequent User Goals

• As a frequent user, I would like to easily navigate straight to the game.
• As a frequent user, I would like to access the game on mobile, tablet and desktop.

Main Menu

• Landing Image: This is the game logo created to look retro and draw users attention.
• Call to action buttons: Here are two buttons play game and how to play.

Play Game

• Game Screen: The screen will display a game board with 9 cells each cell will be empty until the user clicks a spot, there will also be a main menu button taking the user back to the main menu screen.

How to Play

• Game Rules: A box will display the rules on how to play the game and a main menu button.

• Animated logo
• Background Music with a on/off toggle
• Create a username before playing
• Play againt AI
• Multiplayer/Online mode

• HTML - This was used to create the structure and provide the contents to my website.
• CSS - This was used to create the styling for my website.
• JavaScript - This was used to create run the game and any other user activity.

• w3c Validator - To check for any errors in the HTML code.
• Jigsaw - To check for any errors in the style.css file.
• Gitpod - Used to develop the website.
• GitHub - Used to host the project.
• Google Fonts - Used to add font Pacifico .
• FreeLogoDesign - This was used to create my logo.

Please see the testing process here

How to deploy the project

Hosted on github pages

1. Load up GitHub and find the correct repository.
2. Using the project's repsoitory menu, at the top on the menu select settings.
3. Scroll down until you see the pages section
4. Now click on the drop-down menu and select the option Master Branch.
5. The page refreshes and scrolls you back to the top, scroll down back to the pages section.
6. The link to your deployed website will now be there.

Follow this link to see how to depoloy to GitHub pages.

How to run code locally

1. Load up GitHub
2. Find the project's repository
3. Under the repository's name click Clone
4. In the clone with HTTPS copy the url.
5. Choose your IDE and open git Bash.
6. Change the current working directory to the location where you want the cloned directory to be made.
7. Now type Git Clone, and paste the url copied from github.
8. Just press enter and your clone will be copied over.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Code

• Youtube - Helped with creating my game board using cells and structuring the gameplay.

Content

• All content was written by the developer.

Media

• Youtube - Helped with creating my game board using cells.
• FreeLogoDesign - This was used to create my logo.

Acknowledgements Precious Ijege for the incredible mentoring support. The Code Institute student care, slack and mentors. Anthony from slack was a great help.