View live project here on Github Pages

Irish Wildlife MatchUp is a matching card game built with HTML, CSS, and JavaScript. The aim of the game is to enjoy the matching experience in a non-competitive, relaxed environment where the visual and audio aspects have been thoughtfully designed to reflect the theme. It is my first JavaScript project built for the Code Institute's Full Stack Software Development course.

• UXD (User Experience Design)
  • User Stories
• Creation process (Strategy -> Surface)
  • Wireframes
• Design
  • Colour Scheme
  • Light/Dark Theme
  • Typography
  • Imagery
  • Sounds
  • Accessibility
• Page Features
• Future Features
• Technologies Used
  • Languages Used
  • Technologies & Programs Used
• Deployment
• Testing
  • Bugs
• Credits

Irish Wildlife MatchUp is an online memory card game styled with my artwork of Irish animals. It is suitable for all ages. The game aims to provide a fun, memory-enhancing experience which will relax the user through its nature soundtrack and visual design. The game has a Light/Dark mode with the design changing to reflect this. An audio track of nature plays with an option for the user to mute/unmute the sounds.

Irish Wildlife MatchUp has been designed to be easily accessible and fun for all ages. It is a grid-style card game that allows the user to flip two cards at a time in order to match them; testing their memory skills. The combination of artwork and nature sounds seeks to bring the user into the wild environment as they play the game. Design and styling will be responsive to different media screen sizes and the user will have control over the aesthetic and the sounds played. A timer and moves counter will inform the user of their progress.

• As a first-time user, I want to know the rules of the game.
• As a first-time user, I want to choose when to start the game.
• As a first-time user, I want to have the choice of a Light/Dark mode.
• As a first-time user, I want to control any audio playing.
• As a first-time user, I want a visually pleasing experience.
• As a first-time user, I want a friendly, challenging play experience.
• As a first-time user, I want to compare my progress game to game.
• As a first-time user, I want positive feedback when I complete the game.

• As a returning user, I want to be able to personalise my gameboard.
• As a returning user, I want to be able to configure my game screen and experience.
• As a returning visitor, I want to be able to play the game on different devices.
• As a returning visitor, I want to be able to reset the game screen quickly if I share it with another user for their try.

The project goal was to build an interactive, memory game suitable for all ages. I wished to use my artwork to personalise the styling of the game. The theme of the game is 'Irish Wildlife', with different animals displayed on the cards to be matched, and the game environment styled to reflect the Irish landscape.

• The user will be able to familiarise themselves with the game rules before personalising the gameboard with visual and acoustic features.
• The user can develop their memory skills using the timer, moves counter, and game score board which displays the user's recent score, or play in a relaxed manner listening to the background nature soundtrack.

The game must be responsive and playable on mobile, tablet, and desktop-sized devices. To assist with this, the styling and artwork will be clean, vectorised graphics that will adjust appropriately to the resizing of the screens.

• The game will allow the user to personalise their board with their name.
• The game will have a light theme and a dark theme.
• The game will play a soundtrack of forest sounds.
• The game will track the time taken and moves made by the player.
• The game will record the score for the player from the previous play.
• The game will have two playable sizes; 4x3 and 6x4 grid layouts. The player can choose which size by clicking a button - Producing artwork for the 6x4 board was at this time not possible due to time restraints, however, the larger gameboard will be added in the next version with a wider variety of animals displayed on the cards. I wish to have the cards shuffle through all of the available artwork, no matter the gameboard size so that the user can challenge their skills. This is documented in the future features section.

Clear pathways to interactivity are essential for this game's success.

• The player is informed of the rules via a modal window and a start 'Tick' button to bring them to the gameboard. This window also presents an input section to enter the player's name to record their recent score, but this is optional. A placeholder informs the user of this.
• Buttons and toggles along the perimeter of the gameboard give the player the options to control the visual and acoustic aspects of the game. (Game size choice will be made available in future versions.)
• The player is informed of their win, time taken, and moves made by a modal window when the final cards are matched. This modal is personalised with the user's name if they choose to enter it in the 'Start' modal.
• The layout and design of the gameboard changes very minimally between screen sizes to keep the experience consistent, and gameplay familiar.

The game site will have a clean layout with every feature identifiable and interactive.

• On loading, the game page will display a modal window front and centre for the user to immediately start the game (click the 'Tick' button). This window will also offer an optional input section to enter the user's name. The 'Tick' button submits the name.
• The gameboard is situated in the center of the screen with the size of 4x3 gamecards displayed.
• A theme toggle button is displayed top right of the game screen to control the Light/Dark mode.
• An audio control is situated beside the theme toggle to unmute/mute the nature sounds.
• Timer and moves counter are located above the gameboard to the left for larger screens and on top for smaller screens.
• A reset button is located centered, below the cards on the gameboard.
• The gameboard is centered over background art of an Irish landscape which changes to reflect the Light/Dark mode.

The wireframes were created in Figma.

It is important to me that the game be the best possible visual representation of its theme, that I can produce. Using Procreate to create the images, Figma for the backgrounds, and CSS for styling the main features, the wireframes will be brought to life. Every design aspect will be considered to create a tactile feeling for the user. Hopefully one that they will enjoy coming back to.

Using the Adobe Color website, I used the colour picker to select colours from landscape photographs and created palettes from these to design the themed backgrounds. Shades of brown were used to create the gameboard palette. These colours are used throughout the gameboard and buttons/toggles, and in both of the Light/Dark Themes.

Colour palette for the gameboard

The gameboard palette was inspired by natural wood tones and was used to give the gameboard design a 'heavy' feeling as it is the central, most important feature of the game page.

I decided to include an option to switch between a light and dark theme to keep up with current webpage features. This will be accessed by a toggle switch at the top right of the page. The design of the background and the gameboard will change to reflect this. Light theme colours extracted from photography by Steven Hylands/Pexels

Dark theme colours extracted from photography by Matthew Ang/Pexels

I chose the serif font 'Inknut Antiqua' from Google Fonts and imported the Light 300 weight for use in my project. The font reminded me of the 'Book of Kells' in keeping with the Irish theme and is used throughout the project.

I wished to create the artwork for the game, instead of using photographs, to give the game a more 'playful' feeling. I gathered a selection of copyright-free images as my reference material and used colours picked from the images to create the artwork in Procreate. A variety of rough brushes and ink brushes were used to create the textured feel.

Once the main gameboard has been accessed, by pressing the start 'Tick' button, the forest soundtrack will start playing. The soundtrack is muted and the volume button must be selected for the user to hear the nature sounds. Birds can be heard chirping, leaves rustling in the wind and a stream can be heard babbling.

I considered the use of additional audio feedback with card flip sounds and 'pings' to indicate successful card matches, however, I felt it did not fit with the relaxed game environment that I was seeking. This was similar with adding a dark theme soundtrack, it brought no benefit to the game experience at this time.

Pixabay Sound Effects

Adobe Color Accessibility Tools was used to check for colour blind safeness in the gameboard colour palette. Contrast levels were considered throughout the build.

The start modal greets the user when the page first loads. It details the rules and offers the option to enter a player's name to personalise the gameboard. This is indicated with the 'optional' placeholder. Pressing the 'Tick' button starts the game.

The gameboard offered is a 4x3 grid-style gameboard. A hexagonal pattern decorates the backs of the cards to reflect traditional playing card graphics. Cards are flipped, two at a time, revealing artwork created by myself. Matched cards stay facing up. Unmatched cards flip back over and increase the 'Moves' counter by one. A 'Reset' button is present which will reset the game experience for the current player or set it up for a new player.

The timer starts when the first card is clicked and works as a stopwatch recording the time taken, instead of counting down from a set time. This is to allow the player to choose whether they wish to play a relaxed game or to try to beat their recent score. A moves counter increases every time two cards, which don't match, are selected.

The optional player name input from the start modal displays the entered name above the score section. The recent score displayed is the winning time and moves count from the player's last round when they choose to continue playing. This score can be some visual encouragement for the player to continue playing and beat their previous round.

The player has the option to turn on the volume for the nature soundtrack that plays when the game loads, they can then also mute it. The player also has the option to choose a dark theme over the default light theme for a different play experience. The toggles change colour to refelct the dark theme.

The win modal displays the player's name if they have chosen to enter it at the start. It also displays the winning time and moves count for the player to see. Pressing the 'Play Again?' button allows the player to continue the same game experience with a shuffled gameboard, reset the timer and moves counter, and their previous score is displayed in the 'Recent Score' section.

The dark theme is accessed via a theme toggle located at the top, right-hand corner of the screen. It changes the default day theme to a night-time background, with darker gameboard, timer, moves counter, name and score area. The theme and volume toggles change colour also to stand out against the background. Both the day and night-themed backgrounds were created by myself in Figma.

• As mentioned earlier in the README, I had wished to include the option for a larger 6x4 gameboard. The creation of more artwork was beyond the scope of this version but will be included in the next one.
• In addition, the next version will allow for the complete array of animal artwork to be shuffled and used, no matter the size of the gameboard. The selection of cards will be greater and present fresh boards to encourage the user to continue playing and practising their memory skills.
• I would like to include a high scoreboard with all of the players' names entered and their top scores recorded using localStorage, this will appeal to the more competitive player.

• HTML5
• CSS3
• JavaScript

• Procreate - used to create the animal artwork and edit images
• Figma - used to produce wireframes and background vector artwork
• GitHub - used to save and store all files for this website
• Git - used for version control
• Google Fonts - fonts were imported from here
• Flaticon - icons were edited and downloaded from here
• Adobe Color - for all color palettes and accessibility color testing
• Remove.bg - for image background removal
• Simple Image Resizer - to resize all artwork
• Convertio - to convert PNG files to WEBP files
• Favicon.io - for badger favicon
• Tiny PNG - to compress images
• Online Audio Converter - to compress mp3 files
• Google Dev Tools - to debug and for testing responsiveness
• Google Lighthouse - for auditing the website
• W3C Validator - for validating the HTML and CSS code
• JSHint - for validating JavaScript

GitHub was used to deploy the website. These were the steps taken to achieve this:

1. Login to GitHub account.
2. Navigate to the project repository, irish-wildlife-matchup.
3. Click the Settings button near the top of the page.
4. In the left-hand menu, find and click on the Pages button.
5. In the Source section, choose 'main' from the drop-down, and select branch menu.
6. Select 'root' from the drop-down folder menu.
7. Click 'Save' and after a few moments the project will have been made live and a link is visible at the top of the page.

To clone this project from GitHub:

1. Visit the Irish Wildlife MatchUp repository.
2. Click on the Code dropdown menu located beside the green GitPod button.
3. Choosing your preferred cloning option of HTTPS, SSH or GitHub CLI, click on the clipboard icon to copy the displayed URL.
4. Open the terminal in your code editor and change the working directory to the location that you wish to use for the cloned directory.
5. Type 'git clone' into the terminal, paste your copied link, and press enter.

To make a copy of this GitHub repository that allows you to view the content and make changes without affecting the original repository, please take the following steps:

1. Login to GitHub and find this repository.
2. Locate the Fork button on the top, right hand side of the page.
3. Click on the Fork button to create a copy of the repository in your GitHub account.

The primary goal of this project was to create a visually pleasing, responsive web application that delivers a positive experience for the user. I have used Chrome Dev Tools to thoroughly test my game through all stages. Using the console to debug my JavaScript was a new experience and skill which will continue to be developed on. I deployed my page early on in the build to ensure that I could test it on real world devices. These devices included:

• Acer Aspire 3 Laptop (1920 X 1080)
• Huawei AD80HW 24" Monitor
• iPad Pro 2021
• iPhone SE(2016)
• iPhone 13
• Samsung Galaxy s10
• Oppo Reno 8 Lite

On desktop, the browsers that I had access to for testing were:

• Chrome
• Firefox
• Edge

On my iPad Pro I had access to Safari but not the Safari Dev Tools/Web Inspector. This would have been helpful to solve an ongoing bug with the Start modal's height appearing clipped near the bottom, interrupting the user's ability to enter their name. This is detailed more in the Bugs section.

The results of feature testing in Chrome, Firefox, Edge and Safarai are as follows:

The W3C Validator was used to validate HTML and the CSS file was validated in the Jigsaw W3C validator. JSHint was used to validate the JavaScript file. Below are the records of these validations:

• All content created is of my own design using copyright-free resources and is intended for educational purposes.
• Free Code Camp for their Memory Card Game tutorial which I have practised, understood, and adapted to fit my game.
• Code Institute for their HTML/CSS/JavaScript learning material.
• W3Schools for additional learning material:
  • Modal how to - https://www.w3schools.com/howto/howto_css_modals.asp
• MDN Web Docs for JavaScript best-practise, tutorials and guidance.
• Stack Overflow for assistance:
  • Add '0' to minutes/seconds in timer and moves counter - https://stackoverflow.com/questions/26898378/javascript-countdown-timer-need-a-second-digit
  • Centering modals - https://stackoverflow.com/questions/39627549/how-to-center-modal-to-the-center-of-screen
  • Fix text jumping when button clicked - https://stackoverflow.com/a/26908722
• Web Designer Hut for solid drop shadow tutorial.
• Keith Paterson Youtube for modal user input and response assistance.
• Foolish Developer for help in creating a timer function.
• Eyehunts.com for swapping images using JavaScript.

• Pexels, Unsplash, and Pixabay for all reference material for creating the animals and background imagery:

  • Red fox (credit: Adam Sondel)
  • Frog (credit: Inspired Images)
  • Robin (credit: Hans)
  • Falcon (credit: Iulian Ursache)
  • Hedgehog (credit: Amaya Eguizába)
  • Bee (credit: Myriams-Fotos)

• Pattern Monster for hexagonal pattern on back of cards.

• Favicon for the favicon used for this site.

• Flaticon for the volume icon (credit: Amazona Adorada), theme toggle (credit: Saepul Nahwan) and tick button (credit: Vectors Market).

• Pixabay for the forest soundtrack (credit: Garuda1982).

I would like to thank my mentor Rahul Lakhanpal for his continued guidance and expertise,
my fellow classmates and extended Code Institute Slack community for their encouragement, and my family for their constant support during my studies.