A Drop of Maths is a mathematical game for people of all ages to enjoy and improve or maintain their mental arithmetic skills.
The game has been designed to be both fun and challenging whatever your still level and game settings can be customised to change the level of difficulty. There is even a choice of game theme for children or adults. The theme for children is more bright and colourful and the theme for adults is largely monochromatic based on variations of the same blue colour. The theme is purely cosmetic as the game settings determine the difficulty.
If you would like to have a go yourself and challenege your mental artihmetic skills A Drop of Maths can be found at https://martinbannister.github.io/CI_MS2_aDropOfMaths/.
The goals of the project are the same for all stakeholders.
To have fun whilst improving their mental arithmetic skills.
To create a fun and challenging game that they can enjoy as well as their site visitors.
The author designed the site so that the game can be played on a veriety of devices and screeen sizes. The author's goal was to create a game that was both fun and educational and could be played by both children and adults. This is achieved through customisation options that allow the parameters of the game to be changed by the player and includes separate colour themes for children and adults.
The children's theme is the default because the author wanted the least amount of friction to children playing and enjoying the game.
As a parent:
- I want a game that is easy to play and understand.
- I want a game that I can customise to my child's level of ability.
- I want my children to play a game that is educational.
- I want my children to be able to play a game that is safe.
- I want my children to be engaged and have fun.
- I wany my children to feel a sense of achievement.
- I want to improve my mental artihmatic skills.
- I want to be able to play the game quickly.
- I want to feel like I am playing something serious and not silly.
- I want the game to be available across all my devices.
- I want to be able to save my progress.
- I want to see my previous scores.
- I want to be able to change settings to make the game more challenging.
I have chosen the ability to select from two colour schemes for the game. One is a more somber less garish colour pallet targeted at adults. The other is a more bright a colourful pallet that should appeal more to children.
The reason for this is that I wanted the game to be accessibly to people of all ages; a game parents could let their children play to improve their maths skills and a game that adults can play to improve their day to day mental arithmatic.
Just having the one child-like colour pallet could put off adult players.
Below are the two colour schemes taken from the CSS file. As you will see the children's theme uses more of a wide range of bright colurs, where as the adult theme is largely based around shades of the same colour.
Although a bubble colour is specified for the children's theme for finctionality reasons the actual bubble colours are varied when created to make the experience more colourful and engaging. The bubble colour when using the adult theme remanins static for each bubble.
The author chose the short stack font for it's readable quality and because it reflects characters that are rendered in a more hand written way than traditional typography. This should make it more readable and accessible for children.
The author chose Schoolbell because it has a more childlike, handwriten quality but is less readable. As such it's use has been limited to in-game pop up messages such as, correct, try again and you won.
The author chose the "Press Start 2P" font for the high scores page because it has an 8 bit retro feel. The author wanted to recreate an arcade style high score page and this fits perfectly.
For the adult theme The author has chosen to use the Ariel font throughout to keep the theme more serious looking.
The Material Icons font is used for the settings button icon.
All fonts are served from Google Fonts
No images have been used in the creation of the game.
You will notice the wireframes differ somewhat from the final game. This is because the original game was intended to be a single page with an introduction to the game.
With the inclusion of a home page and high scores page the design was adapted to suit this and have some consistenet layout across pages.
Rather than tabs the selection of the calculation type is done in the settings screen before the game starts.
There are no mock ups of the home page or high scores page as these were added after the design stage.
[Intro 1](assets/docs/wireframes/01 wireframe_desktop_start_1.pdf)
[Intro 2](assets/docs/wireframes/02 wireframe_desktop_start_2.pdf)
[Intro 3](assets/docs/wireframes/03 wireframe_desktop_start_3.pdf)
[Settings](assets/docs/wireframes/04 wireframe_desktop_settings.pdf)
[Addition](assets/docs/wireframes/05 wireframe_desktop_plus.pdf)
[Subtraction](assets/docs/wireframes/06 wireframe_desktop_minus.pdf)
[Multiplication](assets/docs/wireframes/07 wireframe_desktop_times.pdf)
[Division](assets/docs/wireframes/08 wireframe_desktop_divide.pdf)
User stories covered by this feature
User stories covered by this feature
Below is a list of features I would like to implement in the future.
- Explosion effect on bubble click
- A continuous mode to keep playing until you get an answer wrong
- A random operator option to vary calculation types throughout play
Google Fonts Site fonts
Testing is documented in the testing.md file.
I have used GitHub pages to deploy this page. If you would like to do the same you can follow these steps:
- Log into your GitHub account and find the repository.
- Click on 'Settings' in the repository.
- Click 'Pages' in the left-hand menu once you're in Settings.
- Click 'Source'.
- Click the dropdown menu which says 'None', then select 'Master Branch'.
- Wait for page to refresh automatically.
- Under GitHub pages you can now find a link to the published live website.
If you would like to fork this respository so you can make changes without affecting the original please follow these steps:
- Log into your GitHub account and find the repository.
- Click 'Fork' (last button on the top right of the repository page).
- You will then have a copy of the repository in your own GitHub account.
In order to make a clone of this repository to work on locally, follow these steps:
- Log into your GitHub account and find the repository.
- Click on the 'Code' button (next to 'Add file').
- To clone the repository using HTTPS, under clone with HTTPS, copy the link.
- Then open Git Bash.
- Change the current working directory to where you want the cloned directory to be made.
- In your IDE's terminal type 'git clone' followed by the URL you copied.
- Press Enter.
- Your local clone will now be made.
All credits included in code where applicable
https://coder-coder.com/display-divs-side-by-side/
https://www.w3schools.com/css/css_grid.asp
https://cssgradient.io/blog/css-gradient-text/
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
https://www.sitepoint.com/css-theming-custom-properties-javascript/
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
https://css-tricks.com/updating-a-css-variable-with-javascript/