View the live project here.

I have created a Memory card game with a fanfare twist. I've meshed a great card game with one of my favourites animations to create Naruto Memories. A plot filled card matching game that pays homage to the great show called Naruto. As a fan, it has been a pleasure to bring my study of coding and love of animation together. I hope you enjoy it.

1. Click on any card to reveal all the cards; memorise the card pairs before they flip back.
2. Click on any card to start the timer.
3. Use your memory to remember what images show up on which card. You have 30 seconds to match all the cards
4. You win the game when all 16 cards are matched!

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to be pulled in by the theme of the website/game.
    2. As a First Time Visitor, I want to play the game as intended for it to function.
    3. As a First Time Visitor, I want to learn more about the developer.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to see if the game is fun being replayed.
    2. As a Returning Visitor, I want to find the best way to find out more about the developer.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any newly added challenges or updates.
    2. As a Frequent User, I want to check to see if there are any new features.
    3. As a Frequent User, I want always to have fun playing the game; replayability is crucial.

• Design

  • Colour Scheme

    The two main colours represent the main character's (Naruto) colour scheme: orange and black.

  • Typography

    • The Acme font is the main font used throughout the whole website, with Sans Serif as the fallback font. Acme is a stylistic font used to achieve a vintage flash game look, so it is both attractive and appropriate.

  • Imagery

    • Imagery is vital. The large background hero image is designed to be a striking centrepiece as if the user is in the midst of the battle. It also has a minimalist colour scheme that does not clash with the Orange/Black palette.

• Wireframes

  • Wireframe - View

• Responsive on all device sizes

• Interactive elements

• HTML5
• CSS3
• Javascript

1. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file, which is used on all pages throughout the project.
2. jQuery:
   • jQuery was used for the card game logic.
3. SweetAlert2
   • SweetAlert2 was used to create the Victory and Loss alerts.
4. Git
   • Git was used for version control by utilising the Gitpod terminal to commit to Git and Push to GitHub.
5. GitHub:
   • GitHub is used to store the project's code after being pushed from Git.
6. Photoshop:
   • Photoshop was used to edit the background hero image.
7. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

• First Time Visitor Goals

  1. As a First Time Visitor, I want to be pulled in by the theme of the website/game.

     1. Upon entering the site, users are automatically greeted with a clean and easily readable Splash screen, which introduces the plot and premise for the game. There is a Hero Image used in the background, which displays the enemy opponent(Itachi).
     2. There is a brief tutorial text which tells the user how to play; not much detail is needed as the game is intuitive enough to pick up without instructions.
     3. The splash screen has an appropriate timeout feature which gave me enough time to read the content and tutorial.
     • Screenshot View

  2. As a First Time Visitor, I want to play the game as intended for it to function.

     1. Each component of the website is straightforward and structured, separated by a splash screen, the main game and finally, a victory or loss alert.
     2. The timeout features are functional, the cards flips are fluid, and the timer works correctly.
     • Screenshot View

  3. There is an option to "Play again" when winning and "Try again" when losing; GIFs are also used to emphasise the win/loss.

     • Screenshot View

  4. As a First Time Visitor, I want to learn more about the developer.

     1. Once the new visitor has won the game or lost the game; there is a link to the developer's portfolio.
     2. Developer links are not as crucial and should not take away from experience; therefore, they are presented once the game session has ended.
     • Screenshot View

• Returning Visitor Goals

  1. As a Returning Visitor, I want to see if the game is fun being replayed.

     1. The cards are randomised, so each experience is different.
     2. The use of a 30-second timer makes the game fast and exhilarating, which allows for replayability.
     3. A suggestion is made at the end of the game to give more reasons for the player to challenge themself.
     • Screenshot View

  2. As a Returning Visitor, I want to find the best way to find out more about the developer.

     1. A link to the developer's portfolio is readily available whether the game is won or lost.
     2. The portfolio gives a base introduction and provides information on the developer's skillset and links to all socials.
     • Screenshot View

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added challenges or updates.

     1. The user can continue to play in a conventional way or without memorising.

  2. As a Frequent User, I want to check to see if there are any new features.

     1. The user would already be comfortable with the game but has access to the developer through the portfolio to see if they make any more updates or features.

  3. As a Frequent User, I want always to have fun playing the game; replayability is crucial.

     1. The memory game is fluid and works well, with a small timer which makes the game difficult if you aren't familiar with the images used as they are not simplified symbols.
     2. There is an option to play the matching game without memorising the cards, making the game more intense and harder to win.

• The live project has been tested on a variety of devices such as Desktop and Samsung Note 10 +
• A large amount of testing was done to ensure that the game is functional
• Friends and family members were requested to review the site and documentation to point out any bugs or user experience issues, and all were content with the gaming experience.

• On some mobile devices, the title image does not fit correctly, and the cards are cut off if the screen size is too small.
  • If the screen is too small, the "click to start" is pushed into the title image
• On Microsoft Edge and Internet Explorer Browsers and some phones, the .gif/.webp format does not display correctly.
  • Unable to get HTML5 Audio or iframe working correctly on mobile devices, only works after the game is restarted using the Try again/Play again alert.

The project was deployed to GitHub Pages using the following steps.

1. Log in to GitHub and locate the relevant Repository.
2. At the top of the Repository (not top of page), find the "Settings" button on the menu.
3. Scroll down the Settings menu until you find the Pages tab. Click on Pages
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Click on the Github Pages tab, which should provide a link to the live project.

By forking the GitHub Repository, we make a copy of the original Repository on our GitHub account to view or make changes without affecting the original Repository by using the following steps.

1. Log in to GitHub and locate the relevant Repository.
2. At the top of the Repository (not top of page), just above the "Settings" button on the menu, locate the "Fork" button.
3. You should now have a copy of the original Repository in your GitHub account.

1. Log in to GitHub and locate the relevant Repository.
2. Under the repository name, click "Clone or download".
3. To clone the Repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

• SweetAlert2: SweetAlert2 used to create beautiful and responsive alerts.

• All text content was written by the developer.

• All materials on this Site(Naruto), including, but not limited to characters, images, illustrations, audio clips, video clips, and compilations, are protected by copyrights, trademarks, and other intellectual property rights which are owned and controlled by VIZ Media, LLC. and its affiliates (collectively, "VIZ Media, SHONEN JUMP, Shojo Beat")

• The Full-screen background image came from this Wallpaperaccess
• The Victory .webp came from this Tenor
• The Loss .webp came from this Cute Wallpaper
• The Splash screen background image came from this Wallpaper Abyss
• The Card images came from Pinterest
• The Favicon icon came from Icon Library

• Javascript logic inspired by OurCodeSolution (https://ourcodesolution.com/)

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.