| Live Project | Project Board |
Higher or Lower is Frontend Development Hackathon Project as part of Code Institute Full Stack Software Developer Bootcamp. Utilising HTML, CSS, JavaScript and Bootstrap the page allows users to engage with an interactive game of chance requiring them to predict whether the next randomly generated number is higher or lower than the current.
The live project can be found here: Higher or Lower
- CTRL ALT ELITE - Higher or Lower
- Project Outline
- UX Design
- Features
- Built With
- Development
- Deployment
- Early Deployment
- Cloning & Branching for Group Members
- Commit Guidelines
- Pulling updates Regularly
- Continuous Integration
- Deployment Information
The site’s users want to play an online game that has elements of chance.
The site’s goal is to provide a challenging game with increasing levels of difficulty to entertain online users.
- As a user, I can view the website's Homepage, so that I can play the game it offers.
- As a user, I want a smooth interactive game to play, so I can have fun and come back and play again.
- As a user, I can see my current score update in real-time as I make correct or incorrect guesses, so that I can easily keep track of my progress without needing to refresh the game.
- As a user, I can access the game from both desktop and mobile devices, so that I can play the game seamlessly no matter where I am or what device I am using.
- As a user, I can find the navigation links, so that I can easily navigate the website.
- As a user, I want to be able to choose a difficulty, so that I can make the game easier or more challenging.
- As a user, I can view my high score on the leaderboard, so that I can follow my score and try to beat my personal best.
- As a user, I would like access to a rules page, so that I know how to play the game.
- As a user, I want to be able to provide feedback, so that I can recommend future features I would like to see implemented.
- As a user, I want the option of other game modes, so that I can have multiple options for game play.
- As a user, I would like some in-game content, so that I can personalise my game experience.
- As a user, I want to be able to access social links, so that I can see what else the developers have created.
- As the owner, I want the game to be entertaining and run smoothly, so that users want to come back and play again.
- As the owner, I want the design to be intuitive for users, so they can easily navigate and play the game.
- As the owner, I want to provide clear rules, so users can easily follow and enjoy the game.
- As the owner, I want a place to receive feedback, so users can contribute to the features they would most like to see added.
- As the owner, I want the users to have a leaderboard, so users have the option to review and try and better their scores, to keep them returning.
- As the owner, I want options for additional in-game content, so that I can monetise.
- As the owner, I want to include a leaderboard that encourages players to return and try to beat their high score, fostering competition among users.
- As the owner, I want the game to have minimal load times and run efficiently, so users don’t lose interest while waiting and are more likely to engage.
- As the owner, I want to design the game to work across various platforms (desktop, mobile, tablet), so it is accessible to the widest audience possible and can be played anywhere.
- As the owner, I want to ensure the game's design and interface are visually appealing and easy to navigate, so users enjoy the experience when they land on the homepage.
- As the developer, I want to ensure that users can provide feedback, so that we can make adjustments and/or implement new features in the future.
- As the developer, I want to utilise available frameworks, so I can minimise requirements whilst ensuring responsivity and web standards.
- As the developer, I want to implement JavaScript, so that I can provide interactivity.
- As the developer, I want to explore available options to generate game logic, so that I can ensure a fully functioning game, as intended.
- As a developer, I want to utilise available assets/providers, so I can create an appealing interface and appearance for free.
- As the developer, I want to ensure the game mechanics (higher/lower guessing) work seamlessly across devices and inputs (keyboard and buttons), so users have a consistent experience.
- As the developer, I want to make the game accessible (e.g., keyboard navigation, screen reader support, color contrast for visual impairments), so that users with different abilities can play and enjoy the game.
- As the developer, I want to implement local storage for saving game states and high scores, so users can resume where they left off or track their progress over multiple sessions.
- As the developer, I want to ensure the game works with touch controls (for mobile and tablet devices), so users can interact with the game intuitively across all platforms.
- As the developer, I want to implement responsive design principles, so the game looks and functions properly across different screen sizes (mobile, tablet, desktop).
After opting to use a retro gaming aesthetic for the project we were keen to implement a color scheme that would reflect this and generated a series of potential palettes using coolors.co.
Our initial palette was devised using these options in conjunction with inspiration from our logo design concept developed on logo.com
- Gunmetal
#272d2d--grey - Mikado Yellow
#ffc700--yellow - Red (Pantone)
#fe0039--red - Rich Black
#0a1627--blue-dark - Ruddy Blue
#5aa5d9--blue-light
Additional Color For Higher Button
- Emerald
#6fcf97--green
Due to failed contrast checks at AAA Normal for multiple combinations of colours, we were careful to only use these combinations of colors within elements that adhered to their contrast pass states.
Colour Contrast Checker (also available as extension on Chrome Web Store) was used.
Both the WebAIM and the Adobe color contrast tools were used to corroborate these results.
We selected a pair of fonts that adopt the retro gaming style whilst maintaining a clean and clear visual for the user experience.
Silkscreen - Retro Pixelated Font For Headings
Oxanium - Complementary For For Body
Halloween Images for background
The rules page provides clear instructions on how to play the game, including guessing if the next card is higher or lower, scoring, special rules, controls, and how to win.
The goal is to correctly guess whether the next card drawn will be higher or lower than the current card.
- First Card: The dealer reveals the top card from the shuffled deck and places it face up.
- Guessing: The player must guess whether the next card drawn will be higher or lower than the revealed card.
- If the guess is correct, they score a point and continue playing.
- If incorrect, they score no points, and your score resets.
- Same Value Rule: If a player draws a card of the same value as the previous card, the player wins.
- Press the UP arrow button to select Higher
- Press the DOWN arrow button to select Lower
- On keyboard:
- ‘H’ or Up key = Higher
- ‘L’ or Down key = Lower
Your points will continue to increment for every correct guess. On an incorrect guess, your points will be reset.
- Pattern matching functionality
- A limited number of tries before the game is over
- A score-tracking system
- The ability to play against the computer
| Branding | Navigation | Game Page | Rules Page | Leaderboard Page |
|---|---|---|---|---|
| Logo | Navbar | Game Title | Game Rules | Sign in / Sign up |
| Game page | Game Start | Report a bug | Leaderboard | |
| Git links | Score Tracker | |||
| Favicon | Game difficulty | |||
| Modals - Rules / how to play |
Google Drive - shared folder for resources, documents and links
Slack - Voice calls, messaging
GitHub - Repo, project board
Magma - Pre-balsamiq wireframe planning
This GitHub project was created using the Code Institute Template, which ensured that all necessary dependencies were included when opening within the designated workspace on Gitpod IDE.
Set up a repo using this method and template:
- Login to your GitHub profile.
- Navigate to the Code Institute Full Template.
- Click the dropdown for 'Use this template' and select "Create a new repository".
- Generate the necessary name and description for your repo and click 'Create repository from template'.
- Ensure the repository is created within the correct organisation if working as a group.
- Set the repository to private or public depending on the group’s requirements.
- Navigate to the new repository and click the green 'Open' button with the Gitpod logo.
- IMPORTANT - This button should only be clicked once to generate the new IDE workspace.
- Other group members should fork the repository or clone it locally to prevent overwriting the master IDE workspace.
- You can now work on your repository within the Code Institute Gitpod IDE workspace.
- Once the project repository is created, an early deployment for the live project should be performed.
- This allows for early and continuous testing using a variety of devices, as well as the Dev Tools available within browsers.
- Each group member should fork the repository or clone the repository locally to avoid conflicts.
- We will create feature branches for each new feature or bug fix (e.g.,
feature/user-auth,fix/score-bug). - Do not work directly on the
mainbranch to ensure the main project remains stable. - Push your changes to your own branch and open a pull request (PR) for review before merging into the
mainbranch. - Assign relevant group members to review PRs and approve them before merging.
- Use clear, concise commit messages, following the group’s established guidelines (e.g., “Add user authentication feature” or “Fix styling issue on mobile view”).
- Make smaller, frequent commits to ensure code changes can be easily tracked and understood by everyone in the group.
- Regularly pull changes from the
mainbranch into your working branch to stay up-to-date with everyone’s changes. - Resolve any merge conflicts locally before pushing changes to avoid issues in the
mainbranch.
- Implement Continuous Integration (CI) tools, such as GitHub Actions, to automate tests or deployments after each merge.
- Ensure all group members are aware of any test failures or deployment issues after their code is merged.
- Additional details about the deployment process can be found in the official GitHub Docs or in our project’s README file, which should include steps for deployment to ensure consistency across the group.
Feedback:
On mobile it looks like the main logo is clickable for the game as can't see the Higher Lower buttons : we added a link to the logo image.
Javascript/Logic:
This was our first collaborative project and our first to implement javascript/logic, and this did throw up a number of issues that needed addressing. We initally progressed well with our MVP to get a simple higher or lower number generator game. The premise for this MVP was to have a random number generate and show on screen. Then have an unseen random number generate as our 'guess' number. We also needed to have a way to initialise a 'click' event for if we thought the unseen [hiddenNumber] was higher or lower. Then we would need to check our guees against the current number on screen.
We had no isseus here with the code or logic on the first MVP.
However we did have a few issues when we decided to implement a 'Leaderboard' page:
Issues - bugs.
logic trying to bring both game page and leaderboard logic together
Upon performing a final validation there were errors in both HTML and CSS.
| No. | Bug | Solved | Fix | Solution Credit | Commit no. |
|---|---|---|---|---|---|
| 1 | No number was showing when the game page loaded | Yes | There was a conflict with the game starting when it loaded as a page - we needed to get the number to show but it was blank. The solution was to get the event to trigger as the page load and then trigger a 'start game' function, this would also display the scores etc with a reset to zero. | W3s | 2d82438 |
| 2 | Couldn't get the hidden number to renew. So the hidden number would generate once and then stick | Yes | We took out the code for the Math.random for hiddenNumber and added it to the top. This menat the function for generating the conditions would run through but then not generate the new [hiddenNumber] as it was out of the function scope. | W3s | 2d82438 |
| 3 | Leaderboard script | Yes | We didn't know if the leaderboard script needed to be on a separate file to trigger the event - After discussing this issue with colleagues and then using perplexity as a team member we began to realise these needed to be separate and the pages need to be linked to their respective html. | Chat with perplexity to check understanding [socratic questioning] Geeks for Geeks, stack overflow | 74cbe67 |
| 4 | HighScore | Yes | We couldn't get the leader board to update - we needed to have an end to the game so as to record the highscore and show it. We made a quick function and added the highScore variable to store this. We had to do this in order to get the logic to work with the leaderboard as the phase 1 mvp was simply a game that keeps going so thus wouldn't be able to take info into the leaderboard | Stackoverflow | 74cbe67 |
| 5 | Wouldn't pull through highscore to leaderboard | Yes | After many many discussions with perplexity and reading relevant resources as to why we still couldn't pull the high score through to the leaderboard - it was because the html link had a typo! | Eventually saw the problem! | 74cbe67 |
There were a few instance that we discussed elements with perplexity in a socratic questioning way, making sure that what we discussed was reflected in our level here. Some parts became advanced in order to solve the leaderboard in terms of syntax however the understadning behind these few bits was sound, and made sense.
JavaScript Validation
JSHint was used to validate the JavaScript code added to the project.
| Page | Screenshot | Errors | Warnings |
|---|---|---|---|
| script.js |  |
none | none |
| leaderboard.js |  |
none | none |
These errors were corrected for the final code commit.
Reference Code Resources https://www.w3schools.com https://github.com/TheRickyroy/astronauts-for-autism https://getbootstrap.com/docs/5.3/getting-started/introduction/ CSS Debug Border
Javascript tutorial
https://stackoverflow.com/questions/16089421/how-do-i-detect-keypresses-in-javascript
https://stackoverflow.com/questions/70754748/i-am-getting-a-error-in-node-js-which-is-of-require-stack/70812337#:~:text=Whenever%20you%20have%20a%20'MODULE_NOT_FOUND,that%20is%20referenced%20in%20package. - node structure for console.log in terminal
https://www.educative.io/answers/how-to-detect-the-key-events-in-javascript - realising the console doesn’t take from the DOM for testing https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_html - onclick https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event - event types https://www.educative.io/answers/how-to-detect-the-key-events-in-javascript -event types https://www.w3schools.com/js/js_scope.asp - function scope Perplexity AI for socratic questioning and helping with cleaning up code when it became over engineered. jshint.com - validation for javascript https://stackoverflow.com/questions/64113076/javascript-high-score-update-regardless-of-whether-new-score-is-higher-or-not - highscore
Fonts & Icons https://fonts.google.com/specimen/Silkscreen https://fonts.google.com/specimen/Oxanium https://fontawesome.com/kits/550fe83872/setup Updating Favicon Article - Real Favicon Generator Logo Design Inspiration Halloween style image (https://www.freepik.com/free-vector/halloween-neon-sign-collection_5543415.htm#from_view=detail_alsolike)
Colours https://color.adobe.com/create/color-wheel
https://webaim.org/resources/contrastchecker/
Additional Software Balsamiq Affinity Photo Affinity Design
GitHub Stuff README Contributors Stashing Changes Commit Messages
Form Dump https://formdump.codeinstitute.net/
Heather Bailey - commented on interactivity for phase 1 of game logic: Looked good and liked the playability, wasn’t sure what the second card with question mark was or did. Would like to see something on leaderboard. Phase 2 liked the leaderboard and gave it a competitive element to make her play more.
Made with contrib.rocks