- Background
- Project Goals
- Site Owner Goals
- User Goals
- UX
- Technologies
- Structure
- JavaScript Code Library
- Game Logic
- Testing
- Deployment
- Credits
- Acknowledgements
During the Covid pandemic, many parents have been required to facilitate education for their children at home. Often, parents have found themselves juggling full time jobs and home education responsibilities. School work, especially for younger children, requires a high degree of facilitation and help from busy parents. Interative web based maths games can give children an engaging way of learning new maths skills and reinforcing existing maths knowledge independently.
To provide a simple and engaging maths game that young children are able to play independently to learn new maths skills and to reinforce existing maths knowledge.
Developing the site will serve as a learning experience for the developer. The finished website will act as a showcase for the developer's new skills and will also help to raise the developer's profile. The developer also hopes that his 7 year old son will become a keen user of the site!
To play the maths game for fun, to learn new maths skills and to reinforce existing maths knowledge.
The following opportunities were identified and ranked using a score of 1 - 5 for importance and viability:
| Opportunity | Importance | Viability |
|---|---|---|
| Balloon Pop Multiplication game | 5 | 4 |
| Balloon Pop Division game | 3 | 4 |
| Balloon Pop Addition game | 3 | 4 |
| Balloon Pop Subtraction game | 3 | 4 |
| Contact Form to contact developer | 3 | 5 |
| Link to developer GitHub page | 4 | 5 |
| Subscribe Option | 1 | 2 |
The opportunities matrix was used to help decide which items should be included for the initial development phase (phase 1):
| Item | Development Phase |
|---|---|
| Balloon Pop Multiplication game | 1 |
| Contact Form to contact developer | 1 |
| Link to developer GitHub page | 1 |
| Balloon Pop Division game | 1 |
| Balloon Pop Addition game | 1 |
| Balloon Pop Subtraction game | 1 |
| Subscribe Option | 2 |
- The primary users of the site will be Key Stage 1 and 2 school pupils from ages 5 to 10.
- A simple, bright, colorful and engaging design would fit this demographic.
- Visually engaging.
- Easy to navigate.
- Easy to update game settings.
- Responsive design is required as users may be viewing the site on Mobile, Tablet or Desktop.
- As a user, I am playing the game for fun and enjoyment.
- As a user, I am playing the game to learn new maths skills.
- As a user, I am playing the game to reinforce existing maths knowledge.
- As a user or parent, I would like to to provide feedback to the developer about the game.
- Developer skill set - the developer is currently learning JavaScript.
- Developer's available time - the developer is working full time whilst studying. This coupled with the developer's current skills constraints may impact on whether all four maths games can be incorporated into the site in the initial development phase.
- The user would like to be able to select different maths games to play.
- The user would like to be able to select different options within each maths game - e.g. 2x, 5x and 10x tables within the multiplication game, or addition of numbers up to 20 in the addition game.
- The user would like to be able to set the difficulty level of the maths games - this will give the games a wider age appeal.
- The user needs to be able to initiate the game from the menu, and return to the main menu if they want to abort the current game.
- The user would like to see their current score, and their previous top score. This will mean that the user is more likely to play another game or return to the site in the future to better their previous score.
- The user would like to be able to contact the developer.
- It is not envisaged that the game will be sold for profit. However, the game should be as much fun as possible to play, in order to maximise the learning opportunities for users, increase the game's following and therefore increase the profile of the developer.
The following key features have been identified and scored from 1 - 5 for importance and difficulty. The proposed development phase has also been indicated:
| Feature | Importance | Difficulty | Development Phase |
|---|---|---|---|
| Balloon Pop Multiplication game | 5 | 3 | 1 |
| Contact Form to contact developer | 4 | 2 | 1 |
| Link to developer GitHub page | 3 | 1 | 1 |
| Balloon Pop Division game | 3 | 3 | 1 |
| Balloon Pop Addition game | 3 | 3 | 1 |
| Balloon Pop Subtraction game | 3 | 3 | 1 |
| Subscribe Option | 1 | 3 | 2 |
An initial Site Map was produced, and is shown below:
Hand Sketches were drafted showing the home page and times table game:
Initial Wireframes were then produced showing the Home page layout for each game mode: Multiplication, Division, Addition and Subtraction. The home page Multiplication layout is also shown below:
Initial Wireframes were also produced showing the Game page layout for each game mode: Multiplication, Division, Addition and Subtraction. The game page Multiplication layout is also shown below:
Responsive design wireframes were then produced showing the Home and Game page layouts on Tablet and Phone. The Responsive design wireframes are also shown below:
Whale I Tried has been chosen as the title font, and is used for the main Balloon Pop Maths heading. Whale I Tried is a custom outlined cartoon font available from Misti's Fonts, and is free for personal and non-profit use. This font was chosen as it has a balloon like look and a soft, playful feel.
- font-family: "Whale I Tried", sans-serif;
Nunito has been chosen as the main body font for text content. Nunito is a clean, rounded and modern sans-serif font which works well with the maths game theme and complements the Whale I Tried title font. Nunito is available from Google Fonts and is licensed under the Open Font License.
- font-family: 'Nunito', sans-serif;
The "sky" background colour is a 3 colour gradient generated using ColorSpace. The three colours used (#7CC0FF, #6FD1F4, #9EFBF5) and the colour gradient generated are shown below:
The colour palette was chosen to tie-in with the first colour in the 3 colour gradient (#7CC0FF). Colour ideas were generated using the ColorSpace colour palette generator. The final colour palette selected is shown below:
- #908CD9 - "Blue Bell" - used for buttons, question area, score and high score outlines.
- #9C70BD - "Purple Mountain Majesty" - Used for button highlighting, footer and information area links and audio controls.
- #A2529A - "Purpureus" - Used for modal dialog text, high score text, score text, information text and highlighting.
- #3E8BC6 - "Green Blue Crayola" - Used for button and question area borders,
- #EEFBFF - "Azure X 11 Web Color" - Used for title, button text, question text, balloon answer text and modal dialog background.
- #DC7774 - "Candy Pink" - Used for "Health" bar.
- #A9A9A9 - "Silver Chalice" - Used for text shadow on balloon answer text.
The following browsers are all supported by Balloon Pop Maths.
Please note that Balloon Pop Maths does not function correctly in Microsoft Internet Explorer. For further information please see the Browser Compatibility section in TESTING.md.
The game is comprised of a single web page, index.html, divided into the following sections:
- The Heading section, containing the Balloon Pop Maths title.
- The Options section, containing the collapsing Game Options.
- The Information section, containing the collapsing How To Play information.
- The Game section, containing the In Game Elements. The Heading, Options and Information sections are hidden when in Game mode. The Game section is hidden when not in Game mode.
- The Footer section, containing the Contact Developer and GitHub links. The footer is visible at all times.
- Balloon Pop Maths title, links to home page if selected:
- Game Mode Selector (including hover styling), facilitates switching between multiplication, division, subtraction and addition games:
- High Score Panel, shows current high score. Updated if the user gets a new high score:
- Play Button (including hover styling), launches game:
- Options Audio Controls (including hover styling), allows audio to be toggled on and off from the options area:
- Options Button (including hover styling), opens collapsing options panel:
- How To Play Button (including hover styling), opens collapsing information panel:
- Footer Contact Developer Link (including hover styling), opens Contact Modal:
- Footer GitHub Link (including hover styling), links to Developer Page on GitHub:
- In Game Home Button (including hover styling), returns to Home panel from game:
- Game Loader, displayed while game window is loading. Note that the Game Loader will only be visible the first time the game is played, depending on how quickly the game is initiated, as it is shown only until the window load event is fired:
- In Game Score, records current score in-game:
- Answer Balloons showing potential answers. Balloons are animated using JavaScript, showing a "pop" animation sequence and playing a "pop" sound if the correct answer is selected. If an incorrect answer is selected, a "deflate" sound is played and the balloon and answer fades out:
- Custom Cursor - cursor is changed to a drawing pin when hovering over answer balloons:
- In Game Audio Controls, allows audio to be toggled on and off in-game:
- Health Bar, shows current health. Game finishes when health is fully depleted. If game is played on "Easy" difficulty level (selected in options), health is set to 5 hearts. If game is played on "Medium" difficulty level (selected in options), health is set to 3 hearts. If game is played on "Hard" difficulty level (selected in options), health is set to 1 heart:
- Question Panel, shows current question:
- Contact Modal, implemented using Email JS and JavaScript Mail Library. If the contact form is succesfully submitted, a Success Modal is displayed.
- Game Feedback Modal, gives varying feedback to the user at the end of a game:
- Subscribe feature on Contact Modal - this may be implemented in the future if the developer decides to develop further similar games.
After initial early user testing and feedback, the following minor design changes were made:
- In-game score was moved from underneath the game question to the top right corner.
- Options audio controls were added to allow audio to be toggled on and off from the options area.
- In-game audio controls were added to allow audio to be toggled on and off in-game.
- Collapsing How To Play section was added underneath Options to explain how to play and to give some further information about the game.
- Game loader was added and is now shown until the game window is completeley loaded. Note that the game loader will only be visible the first time the game is played, depending on how quickly the game is initiated, as it is shown only until the window load event is fired. The event handler is located in the JavaScript Event Handler Library.
- In-game home button renamed from "Options" to "Home".
- The Balloon Pop Maths title is responsively styled, and stacks on screens under 768 pixels wide.
- The Balloon Pop Maths title is re-sized and re-positioned for screen sizes under 680 pixels high.
- The Play Button is responsively styled, and is re-sized for screen sizes under 680 pixels high.
- The Game section is responsively styled, showing 2 panels of 3 balloons stacked vertically on smaller devices, and side by side on large devices over 992 pixels wide.
- The Game section is dynamically sized for devices up to 992 pixels wide, so that it takes up the full screen height. A fixed size is implemented on large devices over 992 pixels wide.
See Responsive Design section in TESTING.md for further information and Responsive Testing screen prints.
The JavaScript code has been broken down into seperate, re-usable functions where possible and is contained within several JavaScript Code Library files:
- JavaScript Animation Function Library
- JavaScript Audio Function Library
- JavaScript Display Interaction Function Library
- JavaScript Event Handler Library
- JavaScript Game Logic Function Library
- JavaScript Initialisation Library
- JavaScript Mail Library
- JavaScript Maths Function Library
Each function is fully documented using JSDoc comments.
The game logic was developed using JavaScript.
When the user hits the Play button, the heading, options and information sections of the index page are hidden and the game section is shown. The selected options are gathered using functions in the JavaScript Display Interaction Functions Library and are stored in global variables. All global variables are initialised in the JavaScript Initialisation Library and are prefixed with "bpm".
The user is presented with a maths question. The question type depends on the selected Game Mode. 6 potential answers are presented in the answer balloons, 1 correct answer and 5 wrong answers. Random maths questions and correct and incorrect answers are generated using functions in the JavaScript Maths Function Library.
If the game is played on "Easy" difficulty level (selected in options), health is set to 5 hearts. If the game is played on "Medium" difficulty level (selected in options), health is set to 3 hearts. If the game is played on "Hard" difficulty level (selected in options), health is set to 1 heart.
If the user selects the correct answer, the balloon "popping" animation and sound is played using functions in the JavaScript Animation Function Library, and the score increments by 1. If the user selects the wrong answer, the "deflate" sound is played, the selected balloon and answer text fades out and health is depleted by 1 heart. The game continues until the user has either answered all of the questions or their health has been fully depleted.
When the game is complete, the user is presented with a Feedback Modal. The feedback message varies depending on how well the user has played the game. If the user has scored less than 4, the Unlucky modal is shown. If the user has scored 4 or more but has not achieved a new high score, the Well Done modal is shown. If the user has achieved a new high score, the High Score modal is shown, and the High Score panel on the index page is updated.
See Game Logic UML Diagram for a visual representation of the Game Logic:
Further testing information and screen prints can be found in TESTING.md.
The project has been developed using Gitpod and GitHub. The project was regularly commited to GitHub during the initial development phase. The website resides as a repository in GitHub and has been been deployed using GitHub Pages.
The steps required to deploy the website to GitHub Pages are as follows:
- Go to the Project Code Repository Location on GitHub.
- Select "Settings" (the gear icon) in the top right corner.
- Scroll Down to the GitHub Pages section.
- Set the desired source branch. For Balloon Pop Maths, the deployed source branch is the Master branch.
- Click the "Save" button. A tick should now be shown above the "Source" panel in a green panel which also contains the published site address. For Balloon Pop Maths this is https://richardhenyash.github.io/balloon-pop-maths/.
- For further help and information, see the following links:
About GitHub Pages, and
Creating A GitHub Pages Site.
In order to make a fork or clone of the project, a GitHub account is required. The Gitpod Browser Extension is also recommended.
The project may be forked by following these steps:
- Go to the Project Code Repository Location on GitHub.
- In the top-right corner of the page, click "Fork".
For further information on forking a GitHub repository, see the GitHub Documentation.
The project may be cloned by following these steps:
- Go to the Project Code Repository Location on GitHub.
- Select the "Code" dropdown and choose "GitHub CLI" under "Clone". This will give you a URL that may be copied into the clipboard.
- Open the Git Bash command line interface in Gitpod.
- Change the current working directory to the location where you would like the cloned directory to reside.
- Type git clone, and then paste the URL copied earlier, eg:
$ git clone https://github.com/richardhenyash/balloon-pop-maths - Press Enter to create the local clone.
The code may also be downloaded to a local computer by following these steps:
- Go to the Project Code Repository Location on GitHub.
- Select the "Code" dropdown and choose the "Download ZIP" option.
- This will download a copy of the entire project locally as a .zip file.
For further information on cloning a GitHub repository, see the GitHub Documentation.
Many thanks to the following:
- favicon.cc for the Balloon Favicon.
- Game Developer Studio for the awesome balloon Sprite Images.
- SVG repo for the Pin SVG Image.
- mixkit for the brilliant Sound Effects.
- Martin Himmel and Spicy Yoghurt for additional help on sprite animations.
- loading.io for the attractive Game loader.
- Laurens Holst for the JavaScript shuffleArray function to randomize an array in place using the Durstenfeld shuffle algorithm.
- MDN Web Docs for the JavaScript getRandomIntInclusive function to return a random integer between the two integers given.
Many thanks to the following for help and inspiration during this project:
- Neringa Bickmore for your valued early review and comments on the game and documentation.
- My mentor Reuben Ferrante for helping to get me started off on the right footing and for the insightful review and comments on the game.
- Ben Kavanagh for the Game loader inspiration and helpful comments on the game and testing process.
- The Code Institute slack community, for all your encouragement and positive feedback.