Higher-or-lower is a deceptively simple card game where the player has to decide if the next face-down card (in a sequence of cards) is higher or lower than the current face-up card.
The player places a wager on whether or not they can guess the next card correctly until they either guess all cards correctly, or they lose their wager and have to start again; the game ends when all cards, in the pack, have been played, or the player has used up all of their points.
For this website, the gameplay reflects a slightly amended version of higher-or-lower, where the player is dealt five cards at a time (instead of just two). This helps to speed up the gameplay, while introducing a more exciting feel; for example, a player risks losing their wager if they manage to guess four cards correctly but not the fifth.
In the UK, higher-or-lower was the basis for the popular 1980s television game show Play Your Cards Right, where contestants answered questions to guess a longer sequence of cards than that typically used in the classic higher-or-lower card game.
The live site is hosted by Github Pages.
- To attract players to the game and provide a fun experience.
- The value provided to the website owner is from increasing visitor numbers to the website.
- The call to action on the website's home page will be “Play”.
- Users of all ages visit the website as a way to relax and enjoy playing an easy to understand, and exciting, game.
- Target audience:
- Any age.
- Could be a student, employed, or retired.
- A casual or firm interest in puzzles.
- Possibly casual or serious gamer.
- Those looking for ways to relax and have fun.
- The website:
- functions as expected; for example, buttons are easy to identify, and behave like buttons.
- is accessible and responsive.
- is easy to navigate.
- has an appropriate and appealing visual design that reinforces the purpose of the site.
- “What is this website about?”
- “How do you play the game?”
- “What are the rules of the game?”
- "What can I win?"
- “Will I be able to beat my score from the last time I played?”
- “I would like to play the game on my mobile device, while travelling”
The website is designed to appeal to all demographics, but the following personas are meant to represent a range of potential users:
- User 1: Male, student, age 18-21.
- User 2: Female, works part-time, mother of young children, age 25-30.
- User 3: Male, works full-time, professional qualification, age 35-55.
- User 4: Female, retired, grandmother, age 60-80.
“As a student, I want something I can play during my journey to university, so that I’m not bored”
- The website is responsive and displays correctly on a mobile device.
- All messages are clearly displayed and easy to read on smaller screens.
- Style a responsive website using Bootstrap and / or media queries.
- Display any system messages in a larger format.
“As a mother of two, I want an easy, quick game to play while looking after my children.”
- The website is quick to load.
- The game can be abandoned, if necessary.
- Ensure the website has excellent load performance on Google Lighthouse.
- Add ability to navigate away from the game at any point.
“As a project manager, I want a game that I can play to take my mind off my stressful job”
- Gameplay is streamlined and easy to understand.
- The game offers an easy distraction to daily life.
- Add an FAQ page that explains the game and its rules.
“As a retired schoolteacher, I want a fun game that I can enjoy but also possibly use to teach my grand-children about numbers”
- The game has a visually interesting design.
- Cards and scores are displayed clearly and are easy to understand.
- Implement a design that is bright and colourful.
- Display scores clearly on all screen sizes.
- Ensure cards are easy to see and understand.
-
General:
- All pages are responsive, with a layout that automaically adjusts to the user's device screen size.
- A desktop (and larger tablet) screen size was used to produce all screenshots in this section, to give the clearest illustration of different aspects of the site.
-
Browser Tab:
Click to view the browser tab, showing the custom favicon
- A favicon has been added to the site to help users identify the site when loaded among other tabs, and when the site is saved as a browser bookmark / favourite.
-
Header:
Click to view the desktop header
Click to view the mobile header
- The website header is fixed at the top fo the screen, and displays the name of the site; it also contains navigation links.
- It shows the user where they are on the site at any given time, by indicating the currently active page with a green background.
- Header text is shown on a contrasting plain background.
- The site's name is left-aligned.
- Navigation is right-aligned, and contains links to:
- Home: takes the user to the home page (index.html).
- Game: takes the user to the game page (game.html).
- FAQ: takes the user to the frequently asked questions page (faq.html).
- If the user attempts to access a non-existent page, they will be taken to a custom error page (404-html) which returns them to index.html after 15 seconds; however, this is NOT indicated in the navigation links that appear on any page (including 404.html).
-
Footer:
Click to view the footer
- The footer is sticky, and is always pushed down to the bottom of the page by website content.
- It contains social media icons, and miscellaneous information, for easy user access.
-
Home (index.html):
Click to view the home page
- The home page introduces the site, but its main purpose is to provide the main call to action - play the game.
- The browser tab displays the custom favicon and a title - "HI | LO - How Far Can You Go?".
-
Game (game.html):
Click to view the game page, when starting a game
- The game page is where a player plays the game:
- The cards for the current round are prominiently displayed at the top of the page (surrounded by a yellow border).
- All messages relating to gameplay are displayed in the central section (surrounded by an orange border).
- It clearly shows all information pertinent to the game - the value of aces, the current round number, the current card number, the player's points, and the player's wager - at the bottom of the page, to help inform a player of their progress through the game.
Click to view the game page, when navigating away via any link in the header
Click to view the game page, when leaving the game after any round, and before the end of a game
- If a player attempts to navigate away from the page, via the links in the header, a warning will appear:
- If a player still wishes to abandon the game, they are shown their last score and redirected to the link they clicked.
Click to view the game page, when winning a round
Click to view the game page, when a round is lost
Click to view the game page, when a round is a draw
- If a player wins, loses, or draws a round they are asked whether or not they wish to continue.
- If a player does not wish to continue after winning, losing, or drawing a round, or once they reach the last round, they are shown their final score and redirected to the home page.
Click to view the game page, when reaching the penultimate round
- If a player reaches the penultimate round of a game, they are asked whether or not they wish to continue.
Click to view the game page, when the game is completed
- If a player completes an entire game of ten rounds, they are shown their final score and their highest score.
- The browser tab displays the custom favicon and a title - "HI | LO - Play The Game".
- The game page is where a player plays the game:
-
FAQ (faq.html):
Click to view the FAQ page
- The FAQ provides background information on the game, and explains the rules.
- The browser tab displays the custom favicon and a title - "HI | LO - FAQ".
-
Custom 404 (404.html):
Click to view the custom error page
- If a player navigates to an invalid page, the custom error page is displayed.
- It provides a humourous, yet informative, pause for the user.
- It also links to the FAQ page.
- After 15 seconds, it redirects to the home page.
- The browser tab displays the custom favicon and a title - "HI | LO - It's a Busted Flush!".
- Add the ability to play the classic version of higher-or-lower.
- Add the ability to play the switch version of higher-or-lower.
- Add the ability to play the premium version of higher-or-lower.
- Add ability for a player to create an account.
- Add ability to track and display multiple players' high scores.
- Expand site to include different card games.
- Allow players to place real wagers in a currency of their choice.
Click to view the user flow diagram
User flow diagram of potential user-website interaction routes - optional pathways indicated by dashed lines.
Click to view the gameplay logic flowchart
Flowchart explaining the logic behind the HI | LO game, and used to formulate the JavaScript code.
Wireframe diagrams of my initial ideas:
Click to view the mobile home page wireframe
Click to view the mobile game page wireframe
Click to view the mobile FAQ page wireframe
Click to view the mobile custom error page wireframe
Click to view the tablet home page wireframe
Click to view the tablet game page wireframe
Click to view the tablet FAQ page wireframe
Click to view the tablet custom error page wireframe
Click to view the desktop home page wireframe
Click to view the desktop game page wireframe
Click to view the desktop FAQ page wireframe
Click to view the desktop custom error page wireframe
Click to view the chosen colour scheme
- Website colours were chosen from the Sarah Renae Clarke Colour Catalogue (Volume 2) - card 406.
- Text colours on the website are a mix of white (#FFF) and black (#000).
Google Fonts was used to source all fonts:
The following image was taken from Deposit Photos, and used on the 404.html page:
All website copy has been written by myself.
- Please refer to TESTING.md for details.
- HTML, CSS, and JavaScript. - for website structure / interactivity.
- Bootstrap - for layout / some styling.
- Google Chrome Developer Tools - for troubleshooting / testing (including for Lighthouse performance reports).
- Deck of Cards - An API - for obtaining the deck of cards.
- GitHub - for version control.
- GitHub Pages - for website hosting.
- Gitpod - for online coding.
- Visual Studio Code - for local coding.
- Figma - for flow diagram / flowchart / wireframe design.
- Microsoft CoPilot - for general coding advice.
- Google Fonts - for all fonts.
- FontAwesome - for all icons.
- Markdown - for formatting all documentation.
- Google Chrome - for website preview / testing.
- Microsoft Edge - for website preview / testing.
- Firefox - for website preview / testing.
- Opera - for website preview / testing.
- Safari - for website preview / testing and mobile screenshots (using an iPad Pro (12.9-inch) (2nd generation)).
- W3C HTML Checker - for checking HTML code.
- W3C CSS Checker - for checking CSS code.
- JSHint - for checking JavaScript code.
- Web Accessibility Evaluation Tool (WAVE) - for checking website accessibility.
- Responsive Web Design Checker - for checking website responsiveness.
- CSS Tools: Reset CSS - for addressing browser inconsistencies.
- Website Mockup Generator - for a preview of the site on different devices.
- GoFullPage - for exporting full-size web page previews (this does not include Firefox, which does not support it).
- Deposit Photos - for the Devastated gambler man... image used on the 404.html page.
- Sarah Renae Clarke's Colour Catalogue V2 - for website colours.
- Font Joy - for font pairing inspiration.
- Microsoft Photos - for image editing.
- Affinity Photo 2 - for image editing.
- To WebP - for converting all images to webp format.
- Favicon Generator - for generating the website favicon.
- Diffchecker - for comparing JavaScript code.
The site was deployed using GitHub Pages, as follows:
- Open the repository > 'Settings'.
- On the left, under 'Code and automation', click 'Pages'.
- On the right section, under 'Build and deployment' and 'Source', click to select 'Deploy from a branch'.
- Under 'Branch', click to select the main branch.
- Click 'Save'.
To make changes to a repository, without affecting the original copy, you can fork (duplicate) it:
- Open the repository.
- To the right of the page, click the 'Fork' button.
- You can then open this repository in the IDE of your choice, and make your own changes.
To deploy the project on your own computer you can clone it:
- Open the repository, and click the '<> Code' button.
- On 'Local', select your preferred cloning method, and copy the link.
- Open a prompt in your chosen IDE.
- Navigate to the destination directory, and then enter
git clone, paste the copied string, and hit 'Enter'.
You can create a Gitpod workspace for this repository by clicking the following button (it requires the Gitpod browser extension).
- Duckett, J. (2011) HTML & CSS Design and Build Websites - Indianapolis: John Wiley & Sons, Inc.
- Duckett, J. (2014) JavaScript and jQuery Interactive Front-End Web Development - Indianapolis: John Wiley & Sons, Inc.
- How to create a copyright symbol - for the footer copyright symbol.
- Displaying the current year - for displaying the current copyright year in the footer.
- Generate a random boolean value - for assigning aces high or low.
- How to set a favicon in GitHub Pages - for setting a GitGub Pages favicon.
- Modal - for generating a Bootstrap modal.
- Bootstrap 5 Modal - for Bootstrap pop-up modal dialogs.
- Element: insertAdjacentHTML() method - for adding modal dialogs to pages.
- HTML DOM Element remove() - for removing modal dialogs from pages.
- try...catch - for testing calls to the API.
- Julia Konovalova's example of Try / Catch.
- localStorage in JavaScript: A complete guide.
- Extracting numbers from localStorage as numbers - how to convert localStorage values into numbers.
- Extra special thanks to Andrew Parton, for his coding advice and support.
- Thanks to my mentor, Juliia Konovalova, for her coding advice.