How To Create A Deck Of Cards Animate In Game Card

Build a Card Memory Game with React

Very often we come beyond minor games and wonder how circuitous is it? Tin nosotros build it? Generally nosotros do not get beyond it. In this mail still we volition build a simple memory game which is easy to play and as well like shooting fish in a barrel to develop.

The menu memory game is a simple game to examination the player's memory. In a deck of paired cards, the player needs to select a matching pair in sequent turns. The thespian wins the game when all matching pairs are selected.

A simple UI of it may expect similar this:

Let us define the Rules of the Game

We can't make a game unless we know the rules. And then lets state them hither:

• We demand a shuffled prepare of cards. There must be a pair of each card in our deck.
• The game must flip the cards clicked by the player. Maximum of two cards will show at a fourth dimension.
• The game will handle matched and unmatched cards. Unmatched cards are flipped back after a curt duration. Matched cards are removed from the deck.
• Every fourth dimension a player selects a pair, the game will increment the electric current movement count
• Once all pairs are found out, players sees a confirmation dialog with the score.
• Game provides a functionality to restart.

And so what are we waiting for... Lets get into information technology.

We start define our carte construction. For a card nosotros create an object with the type attribute and an image source.

          {
            type: 'Pickachu',
            image: require('../images/Pickachu.png')
}        

Now the next step is to shuffle the deck of cards. Ahh yes, this is the about important step. It is not really a memory game if we don't shuffle

1. Shuffle

I will employ Fisher-Yates shuffle algorithm for shuffling an array of cards but nosotros can use any algorithm or lawmaking that gives us a randomized array.

Fisher Yates shuffle algorithm to shuffle our menu deck

ii. Render board for the deck of cards

In this example, we are using 12 cards(six pairs). Afterward shuffling our cards, we render them as a grid of 3x4. You can either choose to carve up your card deck into 3 arrays of 4 items each and return using a nested map or use CSS flexbox or grid. I will be using CSS Grid to return it since it is easier to handle updates with a one-dimension array.

Layout Component

Grid container CSS

3. Flip Cards, evaluate lucifer and count moves

The next step is to provide an interaction for the user to flip cards and evaluate if there is a match. For it, we maintain the following states

• openCards to track the cards that have been flipped past the player
• clearedCards to track the cards that accept matched and need to be removed from the deck
• moves to keep rail of the moves made by the player.

Handling Flip and evaluate

At a time nosotros shall only go along a maximum of two cards in openCards state. Since we have a static array and we aren't actually deleting anything from our original cards array we can simply store the alphabetize of the opened bill of fare in openCards state. Based on openCards and clearedCards state we laissez passer a prop isFlipped or isInactive respectively to our Card component which information technology will then use to add the respective class.

Do look at this wonderful web log which explains how to handle Flip Card Animation.

Note: Since nosotros add together an animation to our cards for flipping, we evaluate a friction match after few seconds to allow for the flip transition.

iv. Check for game completion

Every time we evaluate for a match, we check if all pairs accept been found. If yes, we evidence the player a completion modal.

v. And finally, our restart functionality

Well, restarting is simple, we just reset our states and reshuffle our cards.

Hurray! There we have our basic memory carte du jour game.

Codesandbox playground

Conclusion

I am and so glad nosotros've reached this signal. We created a shuffled deck, rendered it on a board, added a flip functionality, and evaluated it for a matching pair. We can extend this case to add a timer, add together the best score of the player, and support level for higher numbers of cards too.

You can check this Github repository for the full code.

More content at plainenglish.io

Source: https://javascript.plainenglish.io/building-a-card-memory-game-in-react-e6400b226b8f

Posted by: kimbroughthavid75.blogspot.com

Share this post