For my Milestone Project 2 I decided to create a simple Noughts & Crosses game, that two people can play.
The game can be play on either desktop, tablet or mobile screens. Visit the webpage here: https://michaelletson.github.io/JavaScript-Portfolio-Project/
The webpage is for two people looking to play a simple game of Noughts and Crosses. It is not a complicated game, therefore the webpage should be clutter free and enable the user to play with ease, and be able to play immediately.
- To play a game of multi player noughts and crosses with ease.
- Simply be able to use/nagivate the webpage.
- To know who (player X or O) has won.
- Simple layout with message to state the game is multi-player.
- A layout free of clutter to not distract the user from it's simplicity.
- Only allow simple functions, of resetting the game.
- The game own/designer could explore a option of playing against the computer.
- The game own/designer could also explore the option of having a difficulty range for the computer player option.
- The game could also include some more visuals, such as animations upon tile selection, and announcing the winner.
- Website tested on Chrome, Edge, Samsung internet.
- Moblie, Tablet and Laptop have all tested the website with no visual errors and maintains functionality.
- Used Chrome Dev Tool to test site, including when testing styling for media queries and also looking at JavaScript code to ensure efficiency and look for errors.
- The game was stress tested manually.
- Console logs were carried out to ensure the code was efficiently running (checked in dev tools).
- To play a game of multi player noughts and crosses with ease -> Manually testing the front end deployment of the site to ensure the code works in creating a multi player function and that it is user friendly.
- Simply be able to use/nagivate the webpage -> Asked friends and family to try out the page, took feedback and made amendments where necessary.
- To know who (player X or O) has won -> Manually tested functionality of code that displays the winner message, and ensured efficiency.
The HTML code bounced just one error which was a stray element which was removed, the only result now is some warnings which can be overlooked as thsoe elements, should they not result with errors, are needed for CSS styling and JavaScript functionality. Validated at https://validator.w3.org/nu/
CSS code passes through validator with no erros. Validated at https://jigsaw.w3.org/css-validator/
JavaScript code checked and validated via https://jshint.com/
To deploy website, I followed the below steps on Github.
- Go to 'Settings' in repository
- On 'Source' of 'GitHub Pages', select 'Main' for Branch and click save
- The website is now published on GitHub Pages and the link is provided on on the same section
I created a respository and opened in gitpod to create my code. To move my code from gitpod to repository ready for deployment I followed these steps (which I did often to show a journey of creating my site):
- git add .
- git commit -m "message"
- git push
- git pull --rebase
During the beginnign of this project I was struggling with understanding my own code, I was searching and looking at resources to come up with the best solution, and part way through realised I had gotten too confused, and went in search for a more streamlined approach for my code, something easier to understand with simpler logic. After some reseacrh for inspiration I restarted my code part way through and feel I developer a much better webpage due to the change.