This website is created for educational purposes only.
The brief for this second Milestone project was to make a responsive and dynamic website using HTML5, CSS3 and JavaScript. It is the second of four projects as part of the Full Stack Web Development Program at The Code Institute. The British Wildlife Memory Game (BWMG) was created first and foremost as a way to fulfil the requirements of this brief. As I already made a website for the first project, I wanted to make a game in order to use a lot of JavaScript. Thus, a pairs matching game seemed like a good option. I previously worked as an Ecologist in the UK, and ecology and conservation still hold a great interest to me. I therefore decided to put my own spin on the pairs matching game by making it an educational game where users can learn more about British wildlife.
Click here to view the project live.
In terms of the BWMG, the goal was to:
- Create a fully-functioning memory game.
- Upon a match, a modal with a fact about the matched species would pop up.
With time and resources allowing, other goals were to:
- Allow the user to select between 'Learning mode' and 'Timed mode'
- Learning: the species fact modal would appear upon matching
- Timed: no modals would pop up, but the time it takes the user to beat the game is recorded.
- In Timed mode, the user would be able to enter their name and have their high score logged.
- Choose a difficulty setting where the higher difficulty increases the number of tiles.
- Choose between three categories of wildlife pictures to match.
- For the bird category in learning mode, have the modal play a soundfile of the noise the bird makes upon matching a pair.
- Have a collection of different facts in a json file and display a random one upon matching a pair instead of always the same one. This would increase replayability value.
- As a user, I want to learn more about British wildlife in a fun way.
- As a user, I want to play a fun and functional memory matching game.
- As a user, who is competitive, I want to beat the game as fast as possible and see my name in the top rankings.
- As a wildlife organisation community manager, I am always open to external content that I can repost on social media, as long as the information is correct and the tone is professional.
I wanted a clean looking website, with fairly simple images and colours for the back and front tiles. Definitely no animations on the tile backs as I have seen on other memory games, as I wanted the images on the front of the tiles to be the focus. Initially I had not envisaged a patterened background. Having a one-tone background however, made the pages look either too boring or too garish. I felt a fairly calm pattern and keeping complementary colours gave the pages a decent balance.
I wanted the memory game to look well put together, but sourcing free to use wildlife photos from the internet would cause an issue in that I would not be able to control the consistency of the images, in terms of resolution, colours, angles, etc. I therefore decided that I should opt for illustrated images rather than photographs. Another benefit of illustrated images instead of photographs is that they are more useful for identification purposes, as the illustrator can highlight the important features of the species.
Initially the idea was to have three difficulty settings, with ‘easy’ having 12 tiles (4x3 grid) During testing it became clear, however, that a square gameboard was going to be the easiest option to deal with in terms of responsive design. I therefore cut the easy setting.
Colours: Since the theme of the game is wildlife, green hues are the obvious choice, and is users are likely to associate with wildlife and nature.
#051f20 'Swamp'
#cfcfc4 'Pastel gray'
#027412
I did not want to make any bold statements with the typography, but did want something more unsual for the title, just to make the two pages look a bit more interesting and eye-catching. I therefore chose the Sansita Swashed font. For the rest of the website, I chose the complementary Open Sans font with Sans Serif as the fallback font in case Open Sans does not load correctly.
I selected illustrated images, for reasons described above. The bird images were taken from the RSPB website.
I did not create the website fully in a design tool only to then create it again in HTML/CSS. Instead I used design tools to mock up rough versions of my site, including design and colour combinations. Since this was a solo project, and I was struggling through the JavaScript parts quite slowly, I was mindful of spending too much time creating perfectly responsive design mockups. As such, I was happy keeping some information in my head rather than drawing out the exact version of the final website. On collabarative projects, however, I would have a more finalised version of the website in a design tool.
- Fully centered and responsive.
- A brief description of the purpose of the website.
- Two radio button groups where the user can choose the difficulty setting (and in the future also the category of wildlife pictures) they want to play with. The category buttons apart from the default ‘birds’ have been disabled, as the images and code for the other categories have not yet been implemented.
- A ‘PLAY’ button takes the user to the game on a separate page.
- The rules of the game are listed. It is assumed that the majority of users know how to play this classic childhood game, and this is therefore positioned at the bottom.
- An eye-catching yet neutral pattern covers the page.
- The game-board is always square, and this is controlled by the maximum amount of tiles as set by the two difficulties, eg: 16 or 36 tiles.
- To the left and right side of the game board there are buttons that take the user to the home page, and restart current game.
- The game chooses the images to use on the tiles at random, from an array of of 21 different birds and the tiles are laid out randomly.
- The tiles flip over with a subtle animation when clicked.
- Upon matching a pair of tiles, a modal is presented to the user, with a picture, common and latin names, and a fact about the species.
- When the game has been completed, another modal appears, so that the user is not 'stuck'.
The following ideas were cut due to time constraints:
- Add the two other categories of wildlife pictures to match.
- 'Timed mode': no modals would pop up, but the time it takes the user to beat the game is recorded.
- In Timed mode, the user would be able to enter their name and have their high score logged.
Future ideas for new features:
- For the bird category in learning mode, have the modal play a soundfile of the noise the bird makes upon matching a pair.
- Have a collection of different facts in a json file and display a random one upon matching a pair instead of always the same one. This would increase replayability value.
- HTML5
- CSS3
- JavaScript
- Gitpod
- Gitpod was the environment in which the site was created, using the terminal to commit to Git and Push to GitHub.
- jQuery:
- jQuery is used extensively in order to make it easier to link to elements in the DOM.
- jQuery Modal
- This library was used to create the modals for matching tiles and completing the game.
- Codepen
- Codepen was used as a scratchpad and create smaller bits of work in isolation, such as the modals.
- Balsamiq -Balsamiq was used to create the wireframes and aid design and layout decisions.
- Google Fonts:
- Google fonts were used to import the 'Montserrat' font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there was no invalid HTML or CSS.
- W3C Markup Validator Fully passed, no errors or warnings
- W3C CSS Validator My CSS has no errors or warnings.
- Beautify Tools JavaScript Validator My JS had no errors.
In order to test the matching I had "tileid" as an attribute during development, so I could see which tiles were which. I used data attributes when development was complete, so that you couldn't simply look at the elements with developer tools. I also wrote a simple function for auto-completing the game to show the winning modal, as playing the game to the win condition took a long time.
1. As a user, I want to learn more about British wildlife in a fun way. and 2. As a user, I want to play a fun and functional memory matching game.
- A fully-functioning memory game is provided where the flipping of the tiles is animated. Two difficulty modes are available, with 16 and 36 tiles, respectively.
- Upon matching a pair of tiles, the user is presented with a modal styled as a little card, which shows a larger picture of the species matched, along with the common name, latin name and a fact.
3. As a user, who is competitive, I want to beat the game as fast as possible and see my name in the top rankings.
- Due to time constraints, this feature was not implemented.
4. As a wildlife organisation community manager, I am always open to external content that I can repost on social media, as long as the information is correct and the tone is professional.
- The clean-looking website is responsive on all screens, with the result being an aesthetically-pleasing and functional site on all screen sizes.
/////////////////////////
- The website was tested on Google Chrome, Mozilla Firefox and Microsoft Edge browsers.
- The website was viewed, using Chrome Developer Tools, on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
- No known bugs.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash or Terminal
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3. - Press Enter. Your local clone will be created.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
- Certain blocks of code were taken from various sources on the internet. This includes:
- ‘Shuffle an array’ JS code taken from:https://medium.com/@nitinpatel_20236/how-to-shuffle-correctly-shuffle-an-array-in-javascript-15ea3f84bfb
- CSS flip card with animation taken and modified from: https://3dtransforms.desandro.com/card-flip
- CSS Tricks proved to be an invaluable resource, especially their pages relevant to the grid layout and the width property.
- Stack Overflow was a greatly used resource, in particular.
- All code was written by the developer.
- The bird facts were mostly copied without modification, due to time constraints. The majority of the facts have come from Living with Birds. Additional facts have come from Twootz, Soft Schools, Animal Diversity, Discover Wildlife, RSPB and the Wildlife Trusts.
Images were used from the following image sharing sites:
- All bird images were taken from the Royal Society for the Protection of Birds
- Card back image oak leaf by Vectors Market from the Noun Project
- Repeating background image
-
My Mentor Can Sücüllü for insightful and thoughtful feedback.
-
My partner Ben for invaluable feedback and endless cups of tea.