(Developer: Ewart Hestick)
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
- Play a simple interactive game rock paper scissors
- Build an easy to use interactive game
- Build a game with an attractive design
- Build and game that is simple to navigate
- This game is build for the simple minded audience
- Audience who just want something simple to pass time
- Younger Audience whi like cool images
- Simple understanding
- Bright images
- Responsive features
- Play game on varius devices
- As a fisrt time user i want quick game start
- As a first time user i want see attractive characters
- As a first time user i want to have active selection options
- As a first user have to see a win or lose message
- As a first time user i want to know my scores
- As a site owner i want the gameto have an end function
- As a site Owner I want the user enjoy the creative output of the game
- As a owner I want user to have a customized 404 error page if the wedsite fail to load
The rock paper scissors game was with special images to give the game charactor and a competitive feel
The colors brown, black, white, etc were chosen to give an animated feel.
The font indie flower was chosen to give a relaxed feel to the game
- Intro
- Game page
- Game over and Restart page
- 404 page
- HTML
- CSS
- JavaScript
- Git
- GitHub
- Gitpod
- Tinypng
- Balsamiq
- Google Fonts
- Font Awsome
- Favicon.io
The page consists of 3 pages and 9 sections
- The intro page is consist of a small friendly dispalyed image of RocK,Paper, Scissors together along a play game button which leads to the game page with a the header and footer contents included.
- The header give the name of the game with a special selected font style
- The game area is shown after the intro page. This area contains all the reactive icons, images, messages for the player to experience.
- The game message is designed with a large using the indie flower font to display to the user wheather their selection have win, lost or draw.
![game-message](docs/features/result-message .png)
- The score count features located on the top left and top right of the game area shows the count of when the player win and when the computer win to give the player and idea of if they are winner or not. If there is a draw the numbers will remain the same.
![score-count](docs/features/result-message .png)
- The selected image display shows animated images of a rock, a paper and scissors to the player or computer selections. These images give the game character.
- The selection buttons are iconic rock, paper, scissors which also gives the game character and are used to for the player to pick a choice.
- The game over button appears when the game chooses the game winner which is determined at the 12 winning score on either side.
- The game footer is consist of the link to the Github link for the game and the linkedin for the designer.
- The 404 is the error page which returns the user to the game if an error occure or the wrong search link is used.
- HP EllitBook
- Amazon fire table 7
- Samsung galaxy 20
- Tested on Goole Chrome
- Tested Micrsoft Edge
- Tested on Morzilla Firefox
-
As a first time user i want quick game start
Feature Action Expected Result Actual Result Play button Clicked Fades page to game area Works as expected -
As a first time user i want see attractive characters
Feature Action Expected Result Actual Result Game area leave intro page all game character visible Works as expected -
As a first time user i want to have active selection options
Feature Action Expected Result Actual Result Selsction icons click selector icons rock,paper or scissor image changes Works as expected -
As a first user have to see a win or lose message
Feature Action Expected Result Actual Result Result Message click selector icons appears when selected options are compared Works as expected -
As a first time user i want to know my scores
Feature Action Expected Result Actual Result Score count dispaly click selector icons score count changes Works as expected -
As a site owner i want the game to have an end function
Feature Action Expected Result Actual Result Game over message game score raises to 12 selectors are disable with a game over message Works as expected -
As a site Owner I want the user enjoy the creative output of the game
Feature Action Expected Result Actual Result Game area click play game button game is ready for user input Works as expected -
As a owner I want user to have a cutomized 404 error page if the wedsite fail to load
Feature Action Expected Result Actual Result 404 error page On non-matched URL 404 page present with a return button to the game intro page Works as expected
List of bugs found and fixes used ti mitigate them.
- Bug: W3C Validator fauled due to empty player and computer selected img tag source. Fix: Add default image file to img tag sources.
- Bug: Error fualt due to redundant undefined function Fix: Deleted function from call list
- Bug: Console log detect variable with null value called to textcontent in win game function Fix: Deleted redundant code and confirm error fixed
- Bug: Console log detect variable with null value called to textcontent in lose game function Fix: Deleted redundant code and confirm error fixed
- Bug: Footer links dispaly high on the iphone response screen Fix: Adjusted footer positon
- Bug: W3C Validator detected stray div tag in index.html Fix: Deleted div tag and confirm index.html pass validation
The game was deployed using GitHub Pages by following these steps:
- In the GitHub repository navigate to the Settings tab
- On the left hand menu select Pages
- For the source select Branch: master
- After the webpage refreshes automaticaly you will se a ribbon on the top saying: "Your site is published at "https://ewie1.github.io/CI_PP2_RPS/"
You can for fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right hand corner
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
- My HTML code from lessons and formats from the html module and walk through project which then evolved into my owm structure as i gain more knowledge by trail and error.
- My CSS code was also built on the concept of trail and error.
- My JavaScript was reference form research, not an easy task as a first time finding a way implement JavaScript code but through alot of research, stackoverflow, youtube, codeInstitute module and lovemath walk project i have manage put my Javascript code together.
- Thank you to my mentor Mo Shami great guidance.
- Acknowledge my brother Addan Mc Collin for support form a user's veiw
- Thankful to the Slack team for tips