Match 2 Fruit is a memory game where you match two fruits. You flip the first card and try to find its match by choosing a second card. Once you match two fruits, continue to flip each card and match fruit types until the board is complete. The score has two elements, time and moves.
View the live site: here
- Match 2 Fruit Game
- Features of Website
- Design Choices
- User Goals
- User Stories
- Site Owner Goals
- Technology
- Testing
- Deployment
- Credits
- Mentor Support
- Markdown Language
- Markdown Table Generator
- Markdown TOC Generator
- Meta Tags
- W3 Schools Media Queries
- Sticky Header and Footer
- WebTips.Dev Memory Game
- Grid Template Columns
- Fruit Emojis
- Code Institute Form Dump
- JavaScript Basics
- Favicon Generator
- W3 School Responsive Web Design - Images
- Mozilla.org Reference
- Adobe Fonts
- Unicorn Revealer
- Chrome Dev Tools
- Media Genius
- markdownlint
- GitLens 12
- CSS3 2D Transforms
- LambDaTest Safari
- Grammarly Office Plugin
- Git and GitHub
- GitPod
- Multi-Device Website Mockup Generator
- Version Control Reference
- Content
- The website has a fixed header with the Match 2 Logo aligned left and it is responsive on all device sizes.
- The fixed header will be displayed throughout the website.
- The navigation links to the Home and the Feedback page and is responsive on all device sizes.
- Users can navigate between each page of the site, having consistent menu placement on the different screen sizes.
- The website has a fixed footer describing the programs the site was designed in, with a link to each that opens on a new page.
- Users will be able to find additional information about the programs used.
- The Index page has a centred box with the game's rules and a button to start the game.
- Users can find information about the game's rules and a play button.
- The Game Page contains the main game board, header, and footer.
- The Feedback page has a centred contact form with a submit button.
- Users can contact the site owners through the contact form.
-
The feedback form uses the Code Institute Form Dump to validate.
-
Access the Confirm.html page: here
- The 404 page has a centred box with a message that the page isn’t available.
- Users will know what to do if they try to access a non-existing page.
- Access the 404.html page: here
- The Main Game Board has a Start button that disables with a grey color when the board is active, with the number of moves taken so far and the time since either clicking on the start button or turning the first card, both displayed above the random grid of Cards.
- The Main Game Board (game.html) is a 4x4 set of cards that can be turned with a mouse click, clicking a second card to try to find the fruit match. If unsuccessful, both unmatched turned cards revert to being unturned.
- The board is built using the Grid Template Columns CSS property.
- The Main Game Board has a Play Again button which links back to Index.html.
- A user tracking system.
- A scoreboard of past visits.
- An option to choose a specific size of the main game board.
- The following Emoji were used to fill the main game board using the generateGame function randomly:
| EMOJI | Unicode Hex | HTML Dec Value | Image |
|---|---|---|---|
| Grapes | U+1F347 | 🍇 |  |
| Banana | U+1F34C | 🍌 |  |
| Strawberry | U+1F353 | 🍓 |  |
| Green Apple | U+1F34F | 🍏 |  |
| Pineapple | U+1F34D | 🍍 |  |
| Tangerine | U+1F34A | 🍊 |  |
| Coconut | U+1F965 | 🥥 |  |
| Tomato | U+1F345 | 🍅 |  |
| Mango | U+1F96D | 🥭 |  |
| Cherries | U+1F352 | 🍒 |  |
- From the Site Logo, created a back of the card image to display the card front before a card is flipped.
-
The website, logo and text effects use the following colors, which go together well.
-
Forest Green Traditional, Marigold and Golden Poppy.
-
The below fonts look well together on the page and suit the look and feel of the website.
-
Used the font Muli from Adobe Fonts for the main text of the website and buttons.
- Muli is no longer listed under Google Fonts but can still be imported for use with a website; an explanation is found here.
- The logo was designed to fit the theme of a fruit matching game.
- Used the Gliker Semi Bold and HK Modular available for use on the Canva platform for the logo design.
- The Favicon was designed from the back of the card image; the image used when using Favicon & App Icon Generator was:
- Visually attractive game website.
- It is easy to navigate the website.
- Can see my moves and time easily.
- As a user, I want instructions on how to play the game.
- As a user, I want to enjoy the game.
- As a user, I want to view how many moves I've made, and the time it's taken.
- As a user, I want the option to play the game again after one game ends.
- To create a website that is easy to navigate.
- To create an appealing website that a user will want to visit.
- The structure of this website uses HTML.
- The website was styled by connecting a custom CSS to an external file.
- This website's game board uses JavaScript to an external file.
- The website was developed using Visual Studio Code IDE.
- Used Adobe Photoshop for overall design and logo images.
- The website was tested and designed using Adobe Dreamweaver.
- This website uses Google Fonts.
- Created wireframes for this website using balsamiq.
- The link to Testing ReadMe can be found at the Testing ReadMe link.
- A repository called 'CI-P2-Fruit' was created using the Code Institute GitPod Full Template.
Both Visual Studio code editor and GitPod were used to create this site and then pushed to the GitHub remote repository named ‘CI-P2-Fruit’.
The following commands were used to push code to the remote repository:
-
git add . was used to stage all files for commit changes.
-
git commit -m “commit message” was used to add the changes to the local repository for upload during a push.
-
git push was used to push all local changes to the remote repository on GitHub.
The site was deployed to GitHub Pages.
Below are the steps required:
- In GitHub, navigate to your username.github.io repository and click Settings.
- Within Settings, navigate to the Source section within the GitHub Pages section. From the dropdown menu, select the master branch and then click Save.
Once GitHub Pages is set up, normal GithHub flow updates the live page.
View the live site: here
Forking creates a copy of the repository to view and/or make changes without affecting the original.
Below are the steps required:
- In GitHub, access the specific GitHub Repository - Match 2 Fruit Game
- You will find and click the "Fork" button on the top right of the repository page underneath the user icon.
- You will have successfully created a copy of the original repository within the logged-in GitHub account.
- Go to the page of the repository that you want to clone, the CI-P2 GitHub site: here
- Click on the “Code” menu and copy the URL.
- Use the git clone command along with the copied URL.
- git clone https://github.com/USERNAME/REPOSITORY
- Mentor support from Daisy McGirr.
- Used syntax from Markdown Guide for reference.
- Used TableGenerator.com Table Generator to build Emoji Readme Table.
- Used Ecotrust Canada's Markdown TOC Generator to build Readme TOC.
- Used SEO Timers Meta Tag Generator to generate HTML meta-tags.
- Used W3 Schools CSS Media Queries - More Examples to code media queries.
- Sticky Header and Footer from Tutorial Republic.
- WebTips.Dev Memory Game from WebTips.Dev.
-
Used Grid Template Columns for reference for the main game board.
-
Used W3 School Grid Template Columns for reference and troubleshooting the main game board.
- Fruit Eomijis from AltCodes.net.
- Used Code Institute Form Dump to validate contact form.
- JavaScript Basics from JsChallenger.com.
- Used Favicon & App Icon Generator to generate the favicon and W3 Schools HTML Favicon for the HTML.
- Used W3 School Responsive Web Design - Images to resize logo image.
- Reference from Mozilla.org.
- Used Muli from Adobe Fonts for screenshots for readme.
- Used Unicorn Revealer to troubleshoot layout and responsiveness.
- Used Chrome Dev tools to debug code and troubleshoot layout and responsiveness.
- Used Media Genius responsiveness website to troubleshoot layout and responsiveness.
- Used MarkdownLint extension in Visual Studio to troubleshoot markdown errors in readme's.
- Used GitLens 12 extension in Visual Studio to help overall Git management.
- Used CanIuse? to troubleshoot translate/transform in Safari.
- Used LambDaTest.com to test WebKit changes in CSS.
- Used Grammarly Office Plugin on spelling, grammar, punctuation, clarity, and writing style in the ReadMe's.
-
Used W3C Git Tutorial for reference.
-
Used GitHub Git-Guides for reference.
- Used GitPod Help Page for reference.
- Used Multi Device Website Mockup Generator to create multi-device mockup.
- Used Our Coding Club GitHub.io How To's for reference.
- Logo created using Canva and Adobe Photoshop.