The user chooses one of three options (Rock, Paper or Scissors) & this choice is compared against the computers choice.
- Rock beats Scissors
- Paper beats Rock
- Scissors beats Paper
The user/computer score increments by 1 each time they win & does not increment if they draw or lose a game. The first to 10 points wins!
I plan to include the following features:- Pattern matching functionality
- A limited number of tries before the game is over
- A score tracking system
- The ability to play against the computer
I plan to incorporate the following into the user experience:
- a game that is easy to understand, intuative & entertaining for the user
- pit the user against the computer
- make the game visually appealing to the user with complimentary colors, icons/emojis & call to actions
- the game should work without any bugs or faults
I used Google Fonts as it has a vast amount of modern & contemporary fonts. The two fonts I have used are Hind Siligur & Rubik, I felt these fonts complimented each other, where clean & modern & easily readible for the user.
I have used a favicon from Font Awesome
I wanted to make the website visually appealing to the user so decided to use emojis for the selection buttons;
- Rock ✊
- Paper ✋
- Scissors ✌️
I used a smiling emoji (😁) when the user wins & a crying emoji (😭) in the result description when the user loses, to add to the visual experience of the user. These were sourced from GetEmoji
I used Coolors to get a complimentary color palette to add to the visual experience of the user. I used the following:
- #05445E - very dark blue
- #FFD700 - gold
- #F0F8FF - alice blue
I ensured the website would work on multiple screen sizes to ensure a smooth user experience irrespective of the device the user chose to use tablet, phone, desktop, etc. I did however chose a mobile first design & feel the game is optimal for mobile devices...entertainment & fun on the go
W3c Html Validation service
W3c Css Validation service
JSHint
Wev Dev Tools Chrome
I used web dev tools in chrome to access the quality & accessibility of the webpage. It gave me insight into how the RockPaperScissors website performed & scored highly in Performance, Accessibility, Best Practices & SEO for both desktop & mobile devices
Mobile Devices
Desktop devices
Initially the SEO was resulting in score of 89
I added in meta descriptions within HTML header as per advice from lighthouse guidance & increased the score to 100 (seen below)
Deployed website would not function - Issue with relative & absolute file path for javascript file "app.js", would work with gitpod website preview using:
<script src="assets/app.js"></script>but would not function on deployed website. For javascript file to load correctly I changed to absolute file path
<script src="/rockpaperscissors---P2/assets/app.js"></script>Issue with gameOver function - I had issues with getting game to stop when user or computer reached max_points (set to 10 in this example).I overcame this by setting a variable as "let isGameover = false;". Then adding isGameOver function into the game() function. So if isGameOver function is false then play the game. Within the game function the gameOver function was included to run with statements defined within the function gameOver() with an else if statement. These determined the conditions for who won, the user or computer or if the game was drawn. The code was executed if the conditions were true, i.e.
if(userScore === max_points && computerScore < max_points){
alert('You WON the game!! Congrats!');
userScore = 0;
computerScore = 0;
isGameOver = true;
Restart button only appearing when game was over - I initially had this as display:none within CSS but this did not work. I overcame this issue by including CSS styling rules within the gameOver function:
if(isGameOver){
restart.style.display = 'flex';
}
else {
restart.style.display = "none";
}
The website was deployed on GitHub by using following steps:
- Login into GitHub and locate the repository - pharmacy
- At the top of repository locate the "settings" button and click on it
- On the left sidebar find locate the "pages" button and click on it
- Click on the branch dropdown menu and select: master
- Click save
- Link to your deployed repository appears
- HTML
- CSS
- Javascript
- Git hub
- Git pod
- W3c Html Validation service
- W3c Css Validation service
- JSHint JavaScript Validator
- WebDev Checker
- Am I Responsive
- Stack OverFlow
- Font Awesome
- GetEmoji
- Coolors
- Evernote
- martina_mentor - my mentor Martina who was always on hand to answer any questions
- Code Institute Channel on Slack - I found this a great resource with many knowledgeable people who were more than willing to answer my questions & help out.
- GeeksForGeeks - useful resource to see worked examples to improve my understanding of JavaScript syntax & functions
- Youtube - I found a number of tutorials on youtube useful in helping me understand javascript & how I should structure my code in relation to a rock, paper, scissors game. I found the tutorials an invaluable resource in overcoming issues that arose. In particular I would like to acknowledge Ania Kubów, Whatsdev, Webdevsimplified, Traversy Media, Dave Gray & Rajneesh Rana
I found this project to be particularly challenging, even more so than HTML & CSS. It was rewarding when functions worked correctly but was very frustrating when bugs appeared or functions would not work correctly. Through perseverance & the aid of my colleagues in the code institute slack channel, reviewing the Javascript module from Code Institute numerous times, my mentor Martina, stack overflow threads & youtube tutorials I was able to improve my understanding of Javascript structure, functions & syntax. I hope to build on the skills I have developed & realise I can improve my knowledge futher by continuing to build other projects, which I plan to do.
Thank you
daves
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent