PokeCards - Memory Card Game

View the live project here.

This website was created for the purpose of completing the second Milestone Project for the Code Institute's Full Stack Developer course. But also for my nephews, to have some fun and memory improvement, which we miss so much.

1. User Experience - UX
   • Project Goals
   • Player goals
   • Developer Goals
   • User Stories
   • Design Description
   • Wireframes

2. Features
   • Welcoming Modal Pop-up
   • Score Board
   • Game Panel and Cards
   • Victory Modal Pop-up

3. Technologies used

4. Testing

5. Deployment
   • GitHub Pages
   • Making a Local Clone

6. Credits
   • Content
   • Code
   • Acknowledgements

PokeCards

The Memory Game

PokeCards is an interactive and enjoyable memory card game created for children from 5 years old. The game includes entertaining sounds with attractive gif cards and a friendly interface very easy to operate. The opening selection of the characters *Misty, Brock and Ash* and Pokemons (Charmander, Pikachu, and Squirtle) refers to the main script of the game/cartoon Pokemon engaging, even more, it's fans.

Project Goals

The main goal of PokeCards is to provide a simple, fun and intuitive game to contribute to children's entertainment and its development. PokeCards target audience is children from 5 years old and Pokemon's fans. Even though PokeCards was primarily built for children it also considered the parental involvement and participation helping the child to initiate and use the game. Because the game was developed to improve and develop children's memory and spatial ability it is clear that the game is also meeting the parents goals.

Player Goals are

• Enjoyable game to play.
• Friendly interface to use.
• Remarkable Pokemon es to have fun.
• Large cards and buttons facilitating children to operate.
• Easy clickable areas to engage the game.
• Accessible game controls to manage.
• Amusing images and sounds to enjoy.

PokeCards was specifically built to meet player's needs taking into account each mentioned goal by providing:

• A grouped controls to manage.
• Large icons, thematic and colorful buttons to captivate children's attention without focusing too much on words that children are still not able to fully read.
• PokeCards includes positive audio awards to promote fun and expanding learning.
• A reset button enabling the player to continuously enjoy the game.
• The overall construction of PokeCards is children-friendly.
• Optically appealling and fully-functioning game.

Developer Goals

Neatly developed programming that helps children to increase their memory and spatial awareness through a fun and intuitive game. PokeCards was developed and tested to ensure that the game cannot be cracked by fast clicking in random areas for example. A professional appearance primarily accessing the world of JavaScript, HTML, and CSS. The developer also sees the project as a great opportunity to increase his portfolio.

User Stories

As a player aged 5 years or more possible a Pokemon's fan, I wish:

• The possibility to quickly find and comprehend the controls for the game, in order to be able to perform them without problems.
• Audio and/or visible response when I play the game, to realize when I have clicked something.
• Practical large buttons that are easy to be used on any device.
• Visual icons and images that I recognize, to find my favorite characters and Pokemons so I can engage the game..
• A game that will not break as I use it.

Design Description

PokeCards design choice was inspired by the Pokemon cartoon. It was developed to attract its fans. It includes specific Pokemon features such as the card layout which was based on the Pokeball from the cartoon. It presents the main characters to be chosen as a player followed by three options of the most famous Pokemons to be selected. The cards for the memory game were carefully chosen to captivate Pokemons fans with great quality in the image.

1. Fonts

The Fonts reflect Pokemons essence relying on the animated letters that remember the design used in the cartoon. The fonts have a happy and understandable style facilitating children's engagement. As a primary font for this project, Acme was selected because this is a clean and friendly font. Montserrat is the secondary font and it was picked because it is a motivating and cheerful font.

2. Icons

All icons were picked with the specific purpose to add a friendly and compact visual complementing the Pokemon thematic presented in the whole project.

3. Colours

The colours are passing the adventurous impact promoted by Pokemon's journey presented on the cartoon at the same time it is professionally presenting the game in a clean and neat way in harmony with the images.

4. Styling

Cards and chart boxes were drawn with round corners to bring a soft and friendly theme. Children's physical cards are designed cornerless for safety reasons. This pattern is followed consistently fully in the whole project.

5. Backgrounds

• PokeCards' main background image brings in a clean and friendly way the most famous and traditional Pokemons of the cartoon promoting engagement and classic style for the game.

• The welcome background presented in a pop-up version was selected to make the reference to the Pokeball main instrument used in the game to catch the Pokemons.

• The congratulation's pop-up also at the completion of the game provides a very appropriate image from the main character "Ash" holding a trophy.

6. Card Images

The quality of the gif cards was highly considered in this project to amuse the Pokemon fans providing a stunning presentation of the game with shining cards. There is a great mix of Pokemons composing the cards bringing a variety of Pokemon species to attract the children.

7. Audio Directory

PokeCards is directed by animated audios to indicate if the move was a match of cards or a random flip of them facilitating children's to operate the game. A nice and fun audio is added into the clicking buttons to signal the navigation to the children. There is also an audio for when the time is up and the game over warning comes up. The victory audio is also available motivating the player to keep practicing their memory skills with the game.

Wireframes

The following wireframes were produced using Balsamiq program and it was developed in the planning phase of this project.

• Wireframe Laptop Screen
• Wireframe Tablet & Mobile
• Wireframe Victory Modal

Features

• Welcoming User Info Modal Pop-up: PokeCards opening page there is a welcome modal pop-up inviting the player to select their favorite character from the three main famous ones from Pokemon cartoon called *Misty, Brock and Ash* followed by the choice of three classic Pokemons: Charmander, Pikachu, and Squirtle. This modal is not a compulsory choice the player is allowed to select the "Let's Go" button straight away the intention of this modal is simply to attract Pokemon fans but not limit the game to them.

• Score Board: The single display of the game contributes to its clean interface providing a counter of moves, a score of matched cards, a timer and a reset button to restart the game.

• Reset Button: For anytime the user fells like to restart the board and play again.

• Game board and cards: This panel has a friendly blue background with the 18 PokeCards displayed neatly. For PC the sequence of cards is provided in 3 horizontal rows of 6 cards. For others devices most of the cellphones for example are displayed in 6 horizontal rows of 3 cards, others squeezed versions will present the game with 9 horizontal rows of 2 cards. The majority of tablets will display the game in 4 horizontal rows which the first three ones will show 5 cards and the last one 3 only.

• Victory Modal Pop-up: This victory pop-up will only appear if the player completes the game on time which is 300 hundred seconds. The image available on this modal is a classic and motivating one from the main character "Ash" holding a trophy with the Pokemon Pikachu behind congratulating the child to have "catch them all" referring to the Pokemons presented in the cards. This victory modal pop-up also provides a large yellow invitation button to play the game again.

Technologies Used

• Programming Languages: this project was built using HTML, CSS and JavaScript.

• Bootstrap: in order to simplify the coding presented in this project it was necessary to use this program.

• GitHub: This project uses GitHub to be stored and shared to its target audience providing access to its code remotely.

• JQUERY: This project uses JQuery to facilitate DOM adminstration.

• Google Fonts: All the font styles used in this project was provided by Google Fonts.

• Canva: this project uses this tool on its images searching, editing, cropping and saving them.

• Imgbb: Images such as wireframes are outside stored here.

• Red Ketchup: this project uses this tool for images resizing and compressing.

Testing

Automated Testing

Validation services

The following validation services and linter were used to check the validity of the website code.

• W3C Markup Validation was used to validate HTML.
• W3C CSS validation was used to validate CSS.
• JSHint was used to validate JavaScript.

User stories testing

The following segment is going via every of the user testimonies from the UX ReadMe segment.

As a player, I want:

1. The possibility to quickly find and comprehend the controls for the game, in order to be able to perform them without problems.

   • All the controls are withinside the dashboard, that is at the left facet of the display on medium to huge devices, and on the pinnacle of the display on mobiles.
   • All the controls depend upon symbols and colors earlier than any phrases to talk their purpose.

2. Audio and/or visible response when I play the game, to realize when I have clicked something.

   • When every button on the game is pressed, a clicking audio report that performs.
   • When a card is clicked first to offer the impact of being clicked, then it flips over with a fulfilling animation and card flipping sound.

3. Practical large buttons that are easy to be used on any device

   • All the buttons and icons use vivid colors to indicate their meaning and use.

4. Visual icons and images that I recognize, to find my favorite characters and Pokemons so I can engage the game.

   • Attractive cards images that get my attention and help to engage the game to see them all.
   • Win modals show the participant’s Score and a trophy is likewise proven when the participant win the game.
   • When finished the game, helpful audio feedback to indicate that I completed a stage in the game.

5. A game that will not break as I use it

   • It has been programmed with the manner a kid could use it in mind.
     • In User Info Modal, there is no requirement of selecting name or pokemon, so they can start the game right away.
     • When deciding on playing cards to match, no extra than 2 playing cards may be decided on at one time.
     • The game can't be damaged when the user clicks the cards very speedy to turn extra than 2 over at a time.
     • It doesn't create weird presentations if the game is reset. For instance a peculiar wide variety of playing cards are flipped over.

Manual testing

Below is an in depth account of all of the manual checking out that has been carried out to verify all areas of the web page work as expected.

Testing undertaken on desktop

All steps on desktop had been repeated in browsers: Firefox, Chrome and Edge and on exceptional desktop display screen sizes.

1. Player info modal

   • Opened the game in a modern browser, and affirmed that the participant data modal is mechanically released.
   • Closed the web page with out inputting any information, the reopened the web page and confirmed that the participant data modal is released.
   • Closed the web page with best one of the fields stuffed out, showed that on reloading the participant data modal remains released.
   • Confirmed that the modal will now no longer near and indicators are given to manual the participant to fill out each fields.
   • Chose call and pokemon from the three choices, closed the modal with out hitting submit, showed that the modal is released once more on reloading the web page.
   • Hovered my mouse over every factor of the participant data modal to test that every one the applicable Stories for display screen readers had been displaying up.

2. Scoreboard

   1. Player info display
      • Confirmed that the rating, timer and movements are displayed effectively at the participant dashboard.
   2. Reset button
      • Played the game so numerous playing cards had been face up, then clicked the reset button to verify that the face up playing cards had been flipped again over.
      • Confirmed that the turns counter in the game is likewise reset to zero.
      • Confirmed that even if an unusual quantity of playing cards are face up, whilst the reset button is clicked the turns counter is reset to zero.
      • Played the game once more to verify that the playing cards were shuffled.
      • Played the game so I had a few excessive rankings, pressed the reset button and showed that the excessive rankings had been now no longer affected.
   3. Moves counter
      • Played the game and showed that the turns counter will increase through one for over playing cards flipped over.
      • Confirmed that clicking the playing cards absolutely speedy does now no longer wreck the turns counter.
      • Confirmed that the turns counter is reset to zero whenever the game is reset (the usage of issue buttons, individual desire buttons or reset button).
      • Confirmed that if the game is closed and reopened, the turns counter is likewise reset to zero.

3. Playing the game

   • Confirmed that once playing cards are flipped over, the game exams in the event that they in shape.
   • If they in shape, showed that the right in shape sound is played, and the playing cards continue to be face up and can't be clicked once more.
   • If they do not in shape, showed that the game flips the playing cards again over after a delay, in order to allow the participant to see what will be the outcome at the second card.
   • Confirmed that clicking the playing cards absolutely speedy does now no longer motive mistakes with too many playing cards being face up at once.
   • Confirmed that clicking the playing cards absolutely speedy does now no longer motive the cardboard flipping audio sound to wreck.
   • Played the game to completion, showed that the game launches the right win modal for the rating achieved.

4. Info modal

   • Confirmed that the data modal is displayed effectively.
   • Confirmed that every one textual content is readable.
   • Clicked the crimson hand icon to verify that the parental test modal is released from it effectively, and that this closes the data modal on the equal time.
   • Reopened the data modal and showed that clicking the near button closes the modal.

5. Win modal

   • Played the game to showed that the win modal is released.
   • Confirmed that the win modal shows the right statistics for Moves, and Time.
   • Confirmed that the win audio report performs whilst the modal is released.
   • Confirmed that clicking the near button closes the modal and reset the game.

6. Footer

   • To see who is the developer and his work

Testing Process

After the conclusion of the main structure of the project the validation process started. To check the acceptance of the website code the following systems were used:

1. W3C Markup Validation for HTML

2. W3C CSS Validation for CSS

3. JSHint for JavaScript

Bugs discovered:

Solved bugs

1. Clicking the cards really fast caused too may cards to be face up.

• Though my function to check a card match was set to activate when two cards were selected, clicking fast meant that 3 or more cards could be flipped over before the check for a match had been done.
  • Fix: Create a function to remove the event Listener to prevent the cards to be clicked again if it's a match. If it's not will be flipped back again.

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
}

• In case it's not a match, when try to open a second pair of cards before the first one flips back crash the logic.
  • Fix: Create a function to lock the board till the cards have been flipped back.

let lockBoard = false;

function flipCard() {
	if (firstClick){
        firstClick = false;
		startTimerCount();
	}
	
    if (lockBoard) return;
    if (this === firstCard) return;
    
    this.classList.add('flip');
    
    if (!hasFlippedCard) {
        //first click
        $('#FlipAudio')[0].currentTime = 0;
        $('#FlipAudio')[0].play();
        hasFlippedCard = true;
        firstCard = this;

        return;
    } 
    //second click
    hasFlippedCard = false;
    secondCard = this;
    $('#FlipAudio')[0].currentTime = 0;
    $('#FlipAudio')[0].play();
    checkForMatch();
    moveCounter = moveCounter + 1;
    document.getElementById('moves').innerHTML = 'Moves: ' + moveCounter;   
}

function unflipCards() {
    lockBoard = true;

    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        
        resetBoard();
    }, 1200);
}

• Double click. In case that clicks too fast on the same card, in this case is match is evaluate true and disable the cards by removing the event listener.
  • Fix: Add a condition to beginning of flipcard function, and set resetBoard function as it set flippedCard, lockBoard to false and to set first,second card to null. As FlipCard function from above

  function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

Unsolved bugs

1. Audio bugs in Chrome

   • The Chrome browser sometimes delays some of the sounds. I haven't found the way around yet.

Testing undertaken on tablet and make contact with devices

• All steps beneath had been repeated to check mobile specific elements at the developers several iPhones and Android telephones and tablet. And additionally withinside the Chrome Developer Tools tool simulators on all alternatives and orientations.
• Checked the participant data modal suits on small and medium monitors easily.
• Confirmed that font sizes are responsive so display screen length so it's miles displayed in a manner that every one customers can use.
• Confirmed fields and buttons are huge sufficient to click on easily, however small sufficient to healthy without problems at the display screen.
• Checked that participant data shows effectively on smaller monitors, now no longer an excessive amount of space, and no squashing or overlapping of factors even on smallest monitors.

Deployment

This project was developed using VisualCode pushing it and implementing it to GitHub.

GitHub Pages

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

1. Log in to GitHub and locate the GitHub Repository

2. 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.

3. Scroll down the Settings page until you locate the "GitHub Pages" Section.

4. Under "Source", click the dropdown called "None" and select "Master Branch".

5. The page will automatically refresh.

6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Making a Local Clone

1. Log in to GitHub and locate the GitHub 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.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• The full-screen hero image code came from this Wallpaper Wide

• OurCodeSolution: Blog Post code copied, modified, to adapt for my needs.

• FreeCodeCamp - Memory Card Game Tutorial: Video Tutorial code copied, modified, to adapt for my needs.

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• Bootstrap4: Bootstrap MODAL Library used throughout the project mainly to make modals.

• StackOverflow: Used many times for understanding better Javascript functions and more.

• w3schools.com: Used for understanding better how the audio element works, between JS and.

Media

Images

• The logo image was created using Canva.

• The images for the pokemon pick were sourced from Pinterest, Pinterest

• The Champion image used was sourced from Lukasthadeuart.

• The images for the memory card images was sourced from EdwinSantander59 and Plattyneko.

• The images used for the back of the memory cards, background wallpaper, some Cards,and UserInfo Modal were obtained from Google Images.

• Copyright for the memory card images belong to Pokemon a Nintendo Game Franchise, and strictly used for educational purposes.

Audio

• Audio files such as flip, match, and victory was sourced from Myinstants.
• The Button click audio file is from Mixkit.

Content

• All content that wasn't credit was written by the developer or from it's mentor.

Acknowledgements

• My Mentor for continuous helpful feedback.

  Antonio Rodriguez has mentored this project since the beginning. It was only possible to conclude it because of his support and advice. His main contributions were giving an initial North so that it was possible to start effectively, providing ideas, demonstrating the technical criteria and pointing out proper feedback on the errors that should be corrected. In other words, his assistance was essential for the success of this project, so, I am taking the opportunity to express my gratitude for each mentoring session that enabled the competition this work.

• Tutor support at Code Institute for their support.

• Fellow friends, that helped me throughout the project as Fabio Araujo, and Vinicius Xavier.