NUMBERS GAME

Want to play a game? Who doesn't!

Lucky for you, there is a new game in town and it's said to be very addictive.

Our game is called 'Numbers game'.

The point of the game is to clear all of the numbers from the screen by following a few simple rules. Depending on the users current result, they can take advantage of several boosters.

Our target audience are any users with access to the Internet. And more specifically, users with thirst for quality content without adds. Our ideal user is a working professional who commutes to and from work and/or has too much time on their hands when on their lunch break. A user that wishes to have at least something under their control, their square of peace and quiet. Our user does not want a permanent commitment, but a temporary escape without repercussions.

Game's goal is for it's users to relax their mind all while practicing logical and strategic thinking.

UX

Colour Scheme

Colour scheme was decided based on the background image. The main goal was for image's content to be a connection between outdoor sports activity, all the while having an abstract connection to the game's content.

Once the image was sourced, the colour scheme of the game needed to provide direct contrast while being simple and easy on the eyes.

• #BC4A3C used for background colour in case image does not load.
• #000001 user as primary border, text colour, icons as well as span background colour upon successful removal of valid pairs in-game.
• #D3D3D3 used as primary background colour of the game-area to provide initial contrast from the background image.
• #F5F5F5 used as a secondary background colour of the areas containing text.
• #E5E619 used as a tertiary background colour to highlight user's choice.
• #808080 used as a secondary border colour.
• #F4C430 used as a quaternary background colour to display hints.

I used coolors.co to generate my colour palette:

Typography

• Kanit was used for the primary headers and titles.

• Courier New was used for all other secondary text.

• Font Awesome icons were used for sound toggling options.

Wireframes

I've used Balsamiq to design my site wireframes.

Home Page Wireframes

Mobile	Desktop

Rules Wireframes

Mobile	Desktop

About Wireframes

Mobile	Desktop

Controls Wireframes

Mobile	Desktop

Difficulty Menu Wireframes

Mobile	Desktop

Game Wireframes

Mobile	Desktop

Mobile	Desktop

• Deviation from wireframes

  • Button placement and content has been revised during production to optimise the experience and allow room for features which were not part of the MVP (hint, remove fifth). That being said, user can still easily access rules and controls when pausing the game.
  • Back to top button has not been implemented due to the fact that this feature was initially planned to allow the user to easily reach the game button section. This was resolved by ensuring the button section remains visible at all times. Taking into the account the usual logic of game solving, user will have no need to scroll all the way to the top since they are either solving the game from the top or the bottom - leaving gaps in between solved areas will prove unwise.

Features

Existing Features

• Responsive design

  • Our game is accessible via phones, tables and desktop devices.

• Difficulty levels

  • User can choose their difficulty level. Their choice will decide on the initial size of the game.

• Generate button and functionality

  • User can choose to generate all existing squares (spans) to allow for more options when solving the game.

• Hint button and functionality

  • If user is unsure of their next move, they can use the hint button to see available match. In case there are none, Generate button will be highlighted instead.

• Undo button

  • After a successful removal of a pair, user has an option to use the undo button should they notice their choice not being the best. Undo button will be disabled in several instances to prevent gaming and boost genuine experience.

• Remove fifth button and functionality

  • User can choose to spend their points by using a 'remove fifth' booster. This button is enabled only if the user has a minimum of 50 points and if there are more than 4 squares on the board.

• Sound and sound options

  • User can choose to switch the sound on or off. When game is initially launched, sound will be switched off.

• Return to Menu button

  • Each section of the game enables user to return to the main menu.

• Pause game

  • Should the user return to the menu during a live game session, the main menu will contain 'continue' and 'quit game' buttons.

• Continue game

  • User can use continue button to return to the game. All stats, including the squares present on the board, sound preference and score will remain as they left them when pausing the game.

• Quit game

  • User can choose to quit the game. Pop-up will ask for confirmation. If the user decides to cancel the action, game will remain in it's paused state.

• Stuck-check

  • Should the user repeatedly use 'generate' button without any alternative actions, it is possible the player has no viable pairs to remove. For this reason, pop-up will appear notifying the player of the case.

• Row removal

  • Once a full row has been emptied, it will be removed from the table to allow for better visibility. Image below is not representative of the actual action which takes place.

• Score calculation

  • Score is calculated, depending on the user's action. Removing a pair will add 2 points, removing a row will add additional 10 points. Using a hint, undo or remove fifth options will subtract specific amount of points from the overall score.

• Choice validation

  • User can make valid and invalid choices. Should a valid choice be made, the two squares will become dark. Otherwise the highlight showing the user's choice will be removed from the board. The same behaviour exists for instances when the user clicks the same square twice.

• Game won confirmation

  • Once all of the squares are removed from the board, a pop-up will automatically appear, notifying the user of their win. Pop-up will include their final score. User will be taken to the main menu.

• Rules section

  • Main menu includes a button which leads to the rules section. This section briefly explains the rules of the game.

• About section

  • Main menu includes a button which leads to the about section. This section briefly explains the inspiration for the game and contains a link taking the user to the creator's github page.

• Controls section

  • Main menu includes a button which leads to the controls section. This section briefly explains the controls used in-game. Depending on the screen size, user can see different options available.

• Shortcuts

  • There are several shortcuts available in-game. User can un/mute the sound, pause the game, continue game, generate more squares, remove a fifth of them or ask for a hint. Depending on the availability of the boosters. To prevent unnecessary clicks, user can use majority of them to unpause the game all while their actual request is being acknowledged. This feature is intended to be used by desktop users and the controls section should not be displaying the shortcuts on devices smaller than the usual desktop width.

• Re-playability

  • When launching the game, the numbers will be randomly placed on the board, making the replayability value significant.

• In-game button section

  • Regardless of the screen size, in-game buttons will remain visible even if the board becomes sufficiently long to require scrolling. Name of the game is deprioritised in this case to maximise screen space.
  • Additional benefit here is the fact that the position of the buttons doesn't change regardless of button visibility. Should 'remove fifth' button not be available, it's space will remain blank instead of taken over by another button. This ensures familiarity for the user and removes room for accidents.

• 404 page

  • 404 page exists to notify the user of a non-existent page. Page contains a link which allows user to transition to the main menu easily.

• Favicon

  • Favicon is available to allow for easier navigation between multiple tabs.

Future Features

• Randomise-booster
  • In the future, we would like to add additional booster which functions like a randomizer for the existing squares on the board.
• Leaderboard
  • In the future, we would like to implement a scoreboard with users being able to add their usernames and compare their result to their peers depending on the level played.
• Light/dark theme
  • In the future, we would like to implement a variety of themes to make game more accessible all while allowing the user to choose the prefered theme.

Tools & Technologies Used

• HTML used for the main site content.
• CSS used for the main site design and layout.
• CSS Flexbox used for an enhanced responsive layout.
• CSS Grid used for an enhanced responsive layout.
• JavaScript used for user interaction on the site.
• Git used for version control. (git add, git commit, git push)
• GitHub used for secure online code storage.
• GitHub Pages used for hosting the deployed front-end site.
• Gitpod used as a cloud-based IDE for development.
• Codeanywhere used as a cloud-based IDE for development.

Testing

For all testing, please refer to the TESTING.md file.

Deployment

The site was deployed to GitHub Pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Main Branch, then click "Save".
• The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

Cloning

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash or Terminal
5. Change the current working directory to the one where you want the cloned directory
6. In your IDE Terminal, type the following command to clone my repository:
   • git clone https://github.com/josipcodes/numbers-game.git
7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Local VS Deployment

There are no known differences between the local version developed, and the live deployment site on GitHub Pages.

Credits

Below resources were used in the creation of the game. No content was explicitly copied unless stated otherwise within .js, .html or .css files.

Content

Source	Location	Notes
Markdown Builder	README and TESTING	tool to help generate the Markdown files
Chris Beams	version control	"How to Write a Git Commit Message"
W3Schools	entire site	CSS Grid
MDN Web docs	entire site	CSS Grid
W3Schools	entire site	Create element
W3Schools	entire site	Removing element
StackOverflow	entire site	Removing element
StackOverflow	entire site	Converting string to an integer
StackOverflow	entire site	split method
W3Schools	entire site	Creating attribute
StackOverflow	entire site	charAt method
GetButterfly	entire site	Customer data-attributes
MDN Web docs	entire site	querySelectorAll method
MDN Web docs	entire site	querySelector method
StackOverflow	entire site	Breaking nested functions
StackOverflow	entire site	.contains check
MDN Web docs	entire site	Cloning Nodes
StackOverflow	entire site	Remove style
MDN Web docs	entire site	Grid repeat
StackOverflow	entire site	Background styling
W3Schools	entire site	CSS transition
W3Schools	entire site	hidden visibility
Javascript30	entire site	Playing audio
W3Schools	entire site	Playing audio
StackOverflow	entire site	forEach method
MDN Web docs	entire site	Spread syntax
CodingDeft	entire site	Array.from (error fix)
StackOverflow	entire site	noopener, noreferrer
AnswerTabs	entire site	confirm()
StackOverflow	entire site	forEach within a filter
Flexbox Froggy	entire site	modern responsive layouts
Github	commit messages	version control
Webdevsimplified	modal boxes	creating dialogs/modals
MDN Web docs	modal boxes	modal accessibility
MDN Web docs	modal boxes	modal accessibility
MDN Web docs	modal boxes	modal accessibility

Media

Images displayed within the Rules section and the ones used to create favicon are of this game and thus belong to the creator of the game.

Source	Location	Type	Notes
Unsplash	entire site	image	free background image
Pixabay	in-game	sound	free playable sound
DynamicDrive	tab	favicon	tool for favicon creation
Coolors	entire site	image	tool for colour pallet creation
Convertio	entire site	image	tool for image compression
Canva	entire site	colours	tool for colour choice

Acknowledgements

• I would like to thank my Code Institute mentor, Tim Nelson for their support throughout the development of this project.
• I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
• I need to thank Codewars; without the katas solved, I'm not sure I would dare to create some of the current aspects of the game. In addition, I owe thanks to Javascript30 challenge for the idea (and partially capability) to add sound to the game.
• I would like to thank Iva for the inspiration and Petra for her support throughout the process.
• I absolutely have to thank all of my testers - Eva Amalija, Aoife, Minna, Claire and Marek as well as the creator of the original Numbers Game available on Google Playstore.