Whale, Whale, Whale

WHAT

'Whale, whale, whale' is the name of my first web development course project utilising basic HTML, CSS and a mix of vanilla javascript and jQuery. In brief, this is a simple memory game with marine mammals. All images are laid face down on a surface and two images are flipped face up over each turn. The object of the game is to turn over pairs of matching cards and sounds before the time runs out.

WHY

This is a fun and active way of improving your memory and concentration. Although designed for young children, adults may find it challenging and stimulating as well. It ca be employed as an educational game; thus, educators can incorporate it in their classroom delivery.

HOW

Installation and setup

You can run the project locally by downloading or clonning the Github repo or you can view it online on Heroku.

Technologies

This initial version of the project was developed within 5 days using:

• HTML5
• Javascript (ECMAScript 6)
• jQuery
• Git
• Github
• Heroku

Images and sounds courtesy of the Woods Hole Oceanographic Institute, Watkins Marine Mammal Sound Database

CHALLENGES

Several challenges have impacted the development process.

1. The code can be a bit more DRY and that is a top priority. At the moment, it is a bit convoluted in certain parts, such as the card flipping function. Due to the limited timeframe, not enough time was allotted for refactoring. Likewise, the time did not permit me to dwelve into giving it a responsive design.
2. It is repetitive because the shuffling function is too complex at the moment and doesn't fully work. Therefore, I have left it out of this version. To make it work, I have to scrap off the current game board approach.
3. The game is yet to achieve its full educational goal.

NEXT STEPS

There are many areas for improvement. In the short run, I will focus on:

REVAMPING THE ARCHITECTURE

• changing the game board coding will allow me to introduce the shuffling function
• create a responsive design to make it work on small screen devices
• add code to ensure cross-browser functionality
• random selection of images and related sounds from a larger media bank

IMPROVING UI

• The overall perception should be more game-like and the aim is to really give it a more marine/oceanic look and feel
• Remove the colors that might affect color blind players
• Add more educational content, e.g. labels for each mammal and perhaps a further info section at the end of the game
• consider adding a numeric score and a leaderboard
• add or remove rows for increased/decreased levels of difficulty

DRY CODE

• refactor, refactor, refactor

Acknowledgments

• this project would not have come to fruition without the brilliant support from General Assembly's instructional team. Kudos to Ben, Emily, Gerry and Guy.
• grateful to my ocean scientist partner for the idea and images and sounds database