This game is mentioned in both the popular American series "Star Trek" and "Big Bang Theory". It evolved from rock, paper, scissors with two extra elements. It is popular among fans of these series. Fans of these series can now play this game online whenever they like.
Please view the game live project here.
- A user-centered approach was taken with the design of an interactive sight for this game.
- The user should be able to start the game, and save scores on a scoreboard within a short period of time.
- The site should be future-proofed to accomodate scalability but keep the navigation of the site consistent for the user - regardless of growth and expansion.
- As a user, I want to be able to start this game quickly and generate a score.
- I want to be able to clearly see who won and why.
- I want easy access to the rules, so that I can check how scores are awarded.
- The score should be saved on a scoreboard if I choose.
- The scores should be tallied up for me.
- I should be able to reset the game at any point.
- The same basic structure will allow for consistency and predictability for returning users.
- The rules are on display with each game making indirect visibility key to learning the rules. This in-turn should generate indirectly toward the investement of the user.
- The rules are visible, generic and easy to learn making the game accessible and relevant.
- An easy return to a familiar game is important.
- The user can make use of the score board or not - the game can be played either way.
- The site is responsive on all device sizes.
- The headings are clear and without clutter.
- It is easy to navigate - you simply work your way top-down through the options.
- The rules are visually indicated, giving a quick clear explanation at a glance.
- It can be accessed while playing by simply scrolling up - without losing scores or activating a new game.
- The rule resource is generic and easy to follow, making the game accessible globally to all genres and cultures.
- The feedback section gives the user the option that was chosen, as well as the universe option that randomly was selected.
- Both the rules and the feedback have words that indicate the choices for easy referencing.
- Transparency is enhanced by the clear way the scoring is awarded.
- It is easily checked against the scoreboard since it only increases in increments of 1.
- The scoreboard keeps tally of the scores after each save.
- The feedback game results still display showing who was awarded the score.
- With this save function it is easy to see when and how the scores increase and what the latest scores are.
- The reset button allows for a new set of scores to be stored.
- The user can store as many sets of scores as is needed.
- A 404 page was added to ensure that users could navigate back to the main page if they inadvertently landed somewhere else.
- The buttons are highly visible - all in the same color. This makes playing predictable and easy.
- The buttons changes color to blue, to show hovering and use.
- On the mobile device the buttons are still easy to use.
- The footer displays copyright information.
- A multiple player option could be provided.
- Adverts for these services could also generate income.
- Pages with information about the origins of the game could lure users. A spin off from this could be a sister quiz game.
- Social media buttons and feeds can promote content and increase engagement.
The following palette was selected from My Color Space
- The Raleway family of fonts was chosen from Google Fonts with sans-serif in case it doesn't import.
- FigmaJam was used to create wireframes that will scale up easily for teamwork.
- The site has been designed with an "easy to take in" style.
- Each stroke and click is efficient and intentional.
- There is no clutter or unnecessary information.
- HTML, CSS and Javascript was used.
- Git was used for version control.
- Github wa used to save and store files.
- Lightshot was used for screendumps.
- Initially a decision maker game was conceptualised but it proved too complicated to pull together, since it needed form reset functions and scoreboards.
- Valuable feedback from the mentor and peers, made it clear that there may be issues about users not actually understanding the game or what it should be used for. It was decided to convert current work to a game that would be well recognised and understood.
- Simpler features could be used with manageable code that responds without too many complications.
- A new repository was used so that none of the old code and text was carried through to the game.
- The bulk of the html, js, css and readme file was converted to a game of rock, paper, scissors, spock and lizard. It was much easier to test and responded well from the onset.
- The W3C HTML Validator were used and Index.html passed the test after a few tags were fixed. W3C HTML Validtor.
- The W3C CSS Validator was used and Style.css passed the test after an unused style section for a div was removed. W3C CSS Validtor.
- A few errors were found with variables that were not being used but have been removed succesfully and no errors are found.
| Test | Expected Functionality | Actual Behavior | Test Result |
|---|---|---|---|
| Load on Browsers | Load successfully on Opera, Google Chrome, Microsoft Edge | Loaded successfully | Test Passed |
| Responsive to Varied Devices using Chrome Dev Tools | Tested desktop, tablet iPad Air and Samsung Galaxy A33 | Response Good | Test Passed |
| Buttons | All buttons responded as expected | Quick response and correct calculation | Test Passed |
| Random URL Load | Redirect User | Redirection executed with 404 page | Test Passed |
Github was used to deploy this site. The steps are as follows:
-
Log into the Github site
-
Pull up the repository for project 2
-
Select the settings link on the menu.
-
Select the the pages link on the vertical menu.
-
In the source section choose 'main' from the dropdown menu.
-
Select the 'root' from the drop menu and 'save'.
-
The URL that is displayed should have your live Github pages site.
- Log into the Github site
- Pull up the repository for project2
- Use to fork button on the top right hand corner
- Log into the Github site
- Click on the burger menu that will open up the repositories you are working on at the bottom. Select the project you need.
- Click on the clone button and select from HTTPS, SSH, or GitHub CLI. Then copy the link shown.
- Open your code editor terminal and change the current work directory to the location you want to use for the cloned directory.
- Type in the terminal 'git clone' and paste your link here.
- Am I Responsive displays the site on a range of devices.
- Code Institute Readme Template Tutorial
- Code Institute Readme from Thomas Tomo
- Code Institue Readme from Kera Cudmore
- freeCodeCamp Tutorial was used for examples of code and learning.
- Dave Gray tutorials were viewed to assist with understanding Java Script.
- Web Dev Simplified tutorials were viewed to assist with the project.
- Ania Kubow was used to learn about Javascript
- Favicon was used to create the favicon
- Figjam was used for the wireframe
- Font Awesome provided all icons
- Emoji provided hand emojis
- Wikipedia Game Rules is the source for rules
- All content was written by Caylin Dewey.
- My mentor, Mitko Bachvarov provided helpful feedback and advice.
- Code Institute Slack community provided solutions and feedback.
- Code Institute tutors were quick to respond to my problems and to assist me.