In line with this edition of the Hackathon, we have decided to develop an interactive game based on the importance of environmental cleanliness. To achieve this, we have developed a game whereby players must sort through various randomly generated items of rubbish that which they can then deem recyclable or not. In tandem with this, players will be up against a time parameter with players that finish the game in a shorter period achieving a higher position on the overall leader board. The overall goal of this game is to drive home a newfound knowledge base for recyclable goods. Players will continuously learn which pieces of rubbish are environmentally friendly to recycle while noting which amounts of garbage aren’t. Of course, the leader board is there to gauge each player’s skill level. Still, the main takeaway is that players are enjoying themselves, gaining knowledge of the environment around them and that, hopefully, they can provide this newfound understanding to those around them.
You can find the live site here.
For our project, the intention is to advertise the game to the younger generations, mainly within the age bracket of 6-12 years old. In particular, the demographic the project is aimed at is those that want to learn more about the environment around them. The following areas were looked into to achieve this goal of obtaining this age demographic: Gamification, Interactivity, and Visual and Audio cues. A combination and the correct use of all four allow the target audience to be attracted to the project. The different difficulty levels provide for prolonged interest in the game itself also.
- As a first-time visitor, I want to be able to easily understand the purpose of the website, so I can decide whether I want to use it or not.
- As a first-time visitor, I want to be able to easily navigate the website, so I can find what I am looking for.
- As a first-time visitor, I want to be able to easily understand the rules of the game, so I can play freely.
- As a frequent user, I want to be able to learn about sorting garbage for recycling, so I can recycle my garbage in real life.
- As a frequent user, I want to enjoy the game, so I can play it regularly.
- As a frequent user, I want to be able to compete with other users, so I can motivate myself to play the game.
- As a frequent user, I want to be able to change the theme of the game, so I can enjoy a different experience.
- As a frequent user, I want to be able to learn interesting facts about the environment, so I can improve my recycling habits.
- As a parent of a frequent user, I want to be sure that the content is safe for children, so I can freely let my child play the game.
- As a parent of a frequent user, I want to be sure that the is no advertisement, so I can freely let my child play the game.
- As a parent of a frequent user, I want to know that my child develops good recycling habits, so I can be sure that my child will be able to recycle in real life.
- As a parent of a frequent user, I want to be sure that my child is not addicted to the game, so I can be sure that my child will be able to play the game regularly. (for the future development)
- As a parent of a frequent user, I want to be sure that my child is motivated to play the game, so I can be sure that my child receives enough motivation to recycle and actively participate in preserving our environment.
- As a parent of a frequent user, I want my child to learn additional facts about the environment, so I can be sure that my child will be able to improve his recycling habits.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
- JS: the primary language used to develop the client side of the website.
- jQuery: was used to control click events and sending AJAX requests.
- jQuery User Interface was used to create interactive elements.
- jquery-ui-touch-punch was to use jquery UI draggable to work on mobile devices.
- Git: the version control system used to manage the code.
- W3C Validator: was used to validate HTML5 code for the website.
- W3C CSS validator: was used to validate CSS code for the website.
- JShint: was used to validate the JS code for the website. GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Chrome DevTools: was used for debugging the website.
- Font Awesome: was used to create the icons used in the website.
- Adobe Illustrator to build own SVG images.
- Obfuscate was used to obfuscate the API key to firebase.
- Home page (which includes a navbar with links to all pages of the site);
- Rules page;
- Leaderboard page;
- Play button (located on home screen and rules page);
- Game difficulty choice;
- Game theme option;
- A footer that includes all team members' names;
- Neat and presentable UI for the game;
- Countdown clock for the game;
- Performance analytics for the player (including time left, score, and lives);
- A sound feature to toggle on and off;
- Sounds to accompany correct and incorrect game moves;
- An overlay that allows a player to supply their name and score to the global leaderboard;
- A game pause button;
- A game stop button that allows a player to prematurely end the game as well as submit their name and score for the leaderboard.
Home Page
The Earth Protectors Home Page is structured with a Navbar on the top, the logo heading centered on the web page, followed by the Play button, which will prompt the users to choose the basic gameplay settings. The Footer section occupies the bottom of the page.
Difficulty Selection
When users click the Play button, they can choose between Easy and Hard modes.
- Easy: garbage appears on the screen and users must segregate it into proper bins.
- Hard: new garbage appears every 2 seconds.
Game Arena Themes Selection When players choose their difficulty preference, they must select the Game Arena Theme. They have three options which bring users to their respective scenery:
- Beach,
- River,
- Ocean.
Players can choose scenery with arrow buttons located on the left & right parts of the screen. When they decide they can click the Play button to start the game session.
Every scene has a different musical background.
Navbar
The web application has navigation buttons to navigate to the Home view, How to Play Section, Leadersboard Section and a Sound control button.
The sound control button allows users to toggle the sound on and off. It looks different depending on whether the sound is on or off.
On the mobile version of the application the user will see a hamburger menu icon on the left side on the navigation bar, which will open the navigation menu, and the sound control button will be located on the right side of the navigation bar.
When the user clicks on the hamburger menu icon, the navigation menu will appear on the whole screen.
When the user starts the game, the Home, Rules and Leaders board buttons will be hidden. The game will be seen on the right side of the navigation bar.
On the mobile device the game bar will be seen in the middle of the navigation bar.
How to play
This section contains 3 subsections:
- Rules
- 3 ways to play
- Fun facts
To navigate through the sections, the user can click on the tabs navigation buttons located on the top of the main container. Each subsection has a play button that will take the user to the respective subsection. This button is located in the right bottom corner of the subsection.
Rules
This section contains the rules of the game and the difference between two difficulty levels.
3 ways to play
Presents a carusel of 3 images that will show the user how to play the game.
Fun facts
The purpose of the Rules Feature is to give users a brief description of how to play the game. The four bins located in the centre of the screen are buttons, which show what kind of garbage must be placed in a respective bin. The bins appear on the screen with CSS animation delaying every bin to be displayed one after another. When users hover over bins, CSS animation is triggered to rotate respective bins 360 deg. Information about proper segregation of garbage is presented to a user using a modal pop-up window.
Below the garbage bin section users can find randomly selected facts related to ecology. The information is fetched from a JSON file using jQuery and presented in UI. This section allows users to start a game with the use of the Play Button located in the right bottom corner of the section background window. Users can exit the Rules Section with any click outside the section window (excluding the navbar and footer) or by clicking the exit button in the top left corner.
Game Theme Feature
The theme selection allow players to select a natural environment to clean up, as it were. Each theme was inspired a collection of pens found on CodePen (links available in credits section).
We built the CSS animations by pulling the code from the existing pens, and then manipulating it to suit our needs in seperate test-game-bckdrop.html files. Once satisfied with the visuals, we then migrated the code into the project. From there, the JavaScript was wired up, and layered above the animations in order to render the game.
- River Theme Foundation
- River Theme Materialized
- Ocean Theme Foundation
- Ocean Theme Materialized
- Beach Theme Foundation
- Beach Theme Materialized
End Game Window
After the game is finished, users are notified about their score. They can submit their score to Leader Boards by typing their name or anonymously if they prefer. Below name input, the Submit button sends the data to the Firebase database and the user is informed about the latest results hierarchy.
Leaders Board
Users are able to see scores of previous players. The Leaders Board section is displayed after players submit their scores or by clicking in the respective button on the Navigation Bar.
Firebase database is implemented to store players scores.
Footer Feature
The footer is a fixed feature - always visible to the user. In addition to the copyright information, the footer includes a fun dropdown function that displays an avatar of each developer involved in the creation of this project. Each avatar links to the developers personal GitHub page.
-
Footer (Normal State)
-
Footer (Active State)
- In the future, the intention is to implement a 'time-limit' on the frequency a player can play the game. If a player plays the game in a specified number of successions they will be given a prompt notifying them of the amount of time they have spent playing the game and a suggestion that asks them to consider taking a break and coming back later. This is to ensure that parents can feel at ease as to whether or not their child will be playing the game too much. This feature will be developed further as the lifespan of the game continues into the future.
A variety of colours were tested before settling on a combination that incorporated complementary colours that were bold, modern and most importantly fun, since the target audience is young children.
The background colour for the navigation and footer was chosen for contrast - against the navigation content as well as the screen content, since the nav and footer are always fixed.
- Colour Scheme 1
- Colour Scheme 2
-
Nav & Footer
-
Bin Design
The bin SVGs were custom designed by a team member in Adobe Illustrator and based on the following image obatined from Vecteezy
Final Custom Bin Design:
Google Fonts was used to obtain our two chosen fonts:
Rubik Moonrocks was chosen for its rock-like, earthy appearance which was an appropriate choice given the theme of Earth Day. It also has a very fun and playful appeal, which is important since the target audience is comprised of young game-players.
Lato is sans serif typeface and works well in contrast to the header/title font, providing balance while maintaining a modern, simple appearance.
Most of the imagery in the form of icons and illustrations was obtained from Icons8, including the rubbish icons used in all of the games as well as the cloud background image that helped inform many of the cartoon-like design choices.
Many of our images were custom designed using Adobe Illustrator, for example the bins (mentioned above) as well as other SVGs used in the animation themes.
Designed for use in the Ocean animation:
-
Stingray Designed for use in the Ocean animation
-
Waves
-
Jellyfish
Click Here to view the full testing steps that were completed on every device and browser.
- 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
- In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/IuliiaKonovalova/team_3_april_hackathon.git
-
Alternatively, if you use Gitpod, you can click here, which will start the Gitpod workspace for you.
-
You may also download the project from the GitHub repository and run it locally.
In order to clone the repository, the user must visit the repository page.
Cloning by command line: Click the button beside the green button titled 'code', there you will be given various options on how you would like to clone the repository. You must then type 'git clone' into your own workspace along with the repo URL and enter.
Go to the repository page. In the top right of the page, below the navbar, click the 'fork' button. The fork should now be in your repositories.
How to run this project locally
- Garbage bins animation pop-up in Rules Section come from: css-tricks.com
- jQuery: as simple and fast syntax allowed to create functionality of the game within short period of time
- jQuery User Interface for free libraries which increase user interaction
- CSS Animation Resources:
- Firebase for providing a free platform to host and store the leaderboard data.
- The modal pop-up window used for the game's instructions were based on this Web Dev Simplified video.
- Passing multiple arguments with the event included to event listener based on this thread.
- jquery-ui-touch-punch for providing a library which allows to use iquery ui draggable to work on mobile devices.
- Adobe Illustrator.
- Obfuscate Was used to obfuscate the api key to firebase.
- css-tricks.com: Garbage bins animation pop-up in Rules Section come from:
- Icons8: for providing free access to amazing icons and illustrations
- FontAwesome: for providing free icons
- Google Fonts: for providing the chosen text fonts
- Build a Popup with JavaScript: The modal pop-up window used for the game’s instructions section
- Stack Overflow: Passing multiple arguments with the event included to event listener
- Thank you to the Code Institute for hosting the Hackathon platform.
- Thank you to Jim Morel, our group facilitator from the Code Institute.
- Thank you to our amazing, hard-working team of developers! We learned so much from one another.
- And a big shout-out goes to Iuliia - our SCRUM Master 🤗 We would have been utterly lost without her!
Our team is made up of a wonderful group of people from around the world - all of which are either past or present students of the Code Institue
- Aleksei @lexach91
- James @stuartj073
- Iuliia @IuliiaKonovalova
- Milosz @miloszmisiek
- Whitney @Wingkelinks