Memory Game App Inventor

Hello friends and welcome to Obsidian Soft,

Today, I will teach you how to make a memory game in MIT App Inventor i.e. a picture-matching game.

Start a new project in MIT App Inventor. Let’s call it MemoryGame.

Make the screen orientation portrait and change the title to Memory Game.

We will be making a 4 by 4 grid type of layout so there will be a total of 16 cards on the screen i.e. 8 pairs so we need 8 images. You can make an animal pictures memory game or fruit pictures…many themes. I will be using these fantasy creatures as I had these images from my reading comprehension worksheets about fantasy creatures.

You can upload them at the same time by selecting all images and dragging them to the media section until a dotted rectangle appears.

From the Layout palette, drag and drop a horizontal arrangement. In its properties, make align horizontal and align vertical both center. Make height 20% and width fill parent.

Drag and drop a button from the User Interface palette inside this horizontal arrangement. Make the background color orange. Make height fill parent and width 25%. Select the button. Right-click and duplicate this button by pressing Ctrl + C & Ctrl + V on the keyboard for Windows OR Command + C & Command + V on MacOS. Select the new button. And duplicate it.

Again duplicate the button. There should be a total of 4 identical buttons in the horizontal layout. Now, select the horizontal layout and duplicate it. Duplicate the new layout. Duplicate it again. There should be a total of 4 layouts with 4 buttons each.

Now, add another horizontal arrangement with align horizontal and align vertical center properties. Make height 15% and width fill parent.

Add a button inside this horizontal arrangement. Make the background color custom blue. Make font bold, font size 20, width 30%, shape rounded, and the text on it: Reset with color white. From the sensors palette, add a clock. Make timer interval 1000 ms and turn off timer enabled.

The screen design is done so let’s go to the blocks section.

First, let’s make our global variables. 

We need two lists:

The buttonsList will contain our 16 buttons which will act like our cards and the imageList will contain the images behind those cards. The button index will be for storing the position of the button that has been tapped by the user i.e. its position inside the buttons list.

We also need to maintain a boolean variable for knowing whether the user is tapping on the first picture card or the second card.

 

We also need a boolean variable to stop clicking too many buttons at the same time.

We also need to store the image of the first card tapped on by the user.

Last, we need to store the two buttons that have been tapped on by the user.

When the screen is initialized, we need to make a local variable for storing the uploaded 8 images and add them twice to the imagesList to make 16 images in total. We will also use any component -> any button -> everybutton list to add all the buttons except the reset button to our buttonsList. The any component feature in MIT App Inventor is quite awesome as it reduces our code substantially. 


We also need a way of shuffling the cards so that the cards don’t have the same images in the same positions every time. For this, we need to shuffle our imagesList with those 16 images.

Make a procedure for shuffling. I have used this procedure before too such as in the flashcards app.

Call this procedure as the last thing in the screen initialize event.

Now, make another custom procedure called reset. It will reset all our cards to a facedown state and will also shuffle the images. For resetting the cards to the facedown state, use a for each item block from control. Go through the buttons list and use the any component->any button blocks to set background color to orange, image to empty text block and enabled to true. The reset procedure should reset all the global variables to their initial state too.

Now, we come to our main button click event. Don’t worry, we will not be making a separate button click event for each of our 16 buttons….phew! That would be troublesome!

We will use the awesome "any component" blocks. Go to the left side and click on any component and choose any button and inside its events, choose when any button.click event. We will first check if our allowButtonClick is true and if it is true, we will use an if/else block from control to differentiate between reset button and picture buttons. If the button is the resetBtn then call the reset procedure. 

In the other condition, this means that this is the picture button, we will first get the button position of the button that was actually clicked by going through our buttons list. We will set this as the button index. When we find the button index, we should also use the Control’s break block to stop running the for loop.

Once we know the button index, we need to know if it is the first card or the second card.

In the case the not first selected condition is true then this means it is the first card. We should get the image against the button index from our images list and set this as the first selected image. We should also show the image to the user i.e. make the card face up.

We should also set our first button variable to the clicked button and make isFirstSelected true.

If firstselected is true, we will go inside the else condition. Here, we should first make allowButtonnclicks false, make isFirstSelected false, enable the timer, assign the clicked button to the second button global variable, and also make the card face up. As we have enabled the timer, after 1000 ms i.e. 1 second, our clock’s timer event will be triggered.

Here, we will check if the first selected image is the same as the image on the second card. If this happens, we will disable the two paired cards. Otherwise, we will set the two buttons to their facedown state.

And this is done. This simple memory game with 8 pairs of cards is done. You can customize it. Make the grid bigger or add a timer or more levels. So, have fun making this app.

You can also watch video tutorials (2 parts) for this amazing memory game here:



I hope you enjoy making this game as much as I enjoyed designing and creating it for you.

Please remember to subscribe if you haven’t done so yet so that you don’t miss any of the great tutorials that I have planned for you.

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.https://www.youtube.com/c/obsidiansofteducation


Please like my social media pages for more educational resources and tips.
Pinterest:
For links to free educational apps, have a look at the educational apps page



Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more