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:. The game is comprised of a single web page, index. After initial early user testing and feedback, the following minor design changes were made:. The JavaScript code has been broken down into seperate, re-usable functions where possible and is contained within several JavaScript Code Library files:.
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. 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.
The project has been developed using Gitpod and GitHub. The project was regularly commited to GitHub during the initial development phase. The steps required to deploy the website to GitHub Pages are as follows:. In order to make a fork or clone of the project, a GitHub account is required.
The Gitpod Browser Extension is also recommended. Skip to content. Star 0. Branches Tags. Could not load branches. Could not load tags. Latest commit. Git stats commits. Failed to load latest commit information. View code.
Project Goals 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. Site Owner Goals Developing the site will serve as a learning experience for the developer.
User Goals To play the maths game for fun, to learn new maths skills and to reinforce existing maths knowledge. A simple, bright, colorful and engaging design would fit this demographic. User Requirements 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.
User Stories 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. Constraints 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.
Functional Requirements 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. 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. Business Rules 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.
Key Features The following key features have been identified and scored from 1 - 5 for importance and difficulty. 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 final colour palette selected is shown below: CD9 - "Blue Bell" - used for buttons, question area, score and high score outlines. AA - "Purpureus" - Used for modal dialog text, high score text, score text, information text and highlighting. Structure Information Architecture The game is comprised of a single web page, index. 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 is visible at all times. Features Implemented Features Implemented in Phase 1 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.
At the easy level you get the questions in a row and at the difficult level the questions are mixed. The easy level is ideal for learning the times tables well if you do not know them yet. The difficult level is suitable for repetition of the tables and as a preparation for the table diploma or speed test if you already know the tables.
This game is perfectly suited for the primary school to play and learn. Pay attention to privacy and don't use sirnames. Only letters and numbers Password: Please re-enter your password:. Username: Only letters and numbers Password:. Spuq Balloons. Play also: My Smart Horse. Rally V Submarine Math.
Figo and Friends. Play also: Animal Rescue. Number Diving. Times Tables Rally. Happy Burger. Times Tables Shooting.
0コメント