Building a Memory Game App with MIT App Inventor

Tutorial plan

1- Presentation memory game

2- Objective of memory game mobile application

3- Description of application designer interface

4- Description of application blocks part

Presentation memory game

The Memory Game is a simple and interactive mobile app designed to help players improve their concentration and memory skills. The game consists of six cards arranged in pairs, with each pair hiding the same image (e.g., banana, strawberry, orange). All cards are initially face down.

The goal is to find all the matching pairs by turning over two cards at a time. If the images on both cards match, they stay visible. If they do not match, the cards are flipped back after a short delay, challenging the player to remember their positions.

The game includes a Reset button that randomizes the card positions and starts a new game. A Clock component is used to manage the delay before hiding mismatched cards. The game also uses procedures to organize actions like creating image lists, comparing selections, and enabling/disabling card buttons.

This project was developed using MIT App Inventor, a block-based visual programming tool that makes it easy to design mobile applications without needing to write traditional code.

Objective of memory game mobile application

The objective of this mobile memory game is to help users develop and strengthen their memory and concentration skills through a simple and fun interactive game.

The app displays 3 pairs of hidden images (banana, strawberry, and orange), randomly placed face down. The player taps two cards at a time to reveal the images. If the images match, they remain visible; if not, they are hidden again after a short delay.

Using MIT App Inventor, the app provides:

- An intuitive interface

- Random image placement for each game

- A reset button to restart the game anytime

- A timer to control image hiding delay

- This game is especially suitable for children and beginners in mobile app development, combining fun gameplay with educational value.

Description of application designer interface

The Designer Interface in MIT App Inventor plays a crucial role in building the visual layout and user interaction elements of the Memory Game. It allows you to drag and drop components to design the look and feel of the app without writing any code.

User Interface Components

Layout Components:

TableArrangement are used to organize the buttons in a grid format (e.g., 2 rows × 3 column)

Image Buttons / Buttons (6 total):

Represent the cards in the memory game.

Initially display a hidden or empty image.

Change to show a fruit image (banana, strawberry, orange) when clicked.

Reset Button:

Allows the user to restart the game.

Resets all cards to their hidden state and shuffles image positions.

Clock Component (non-visible):

Adds a short delay before hiding unmatched cards.

Helps create a smoother game experience.

Description of application blocks part

The Blocks editor in MIT App Inventor is where the logic and behavior of the Memory Game are programmed using visual code blocks. These blocks control how the game responds to user actions, manages the game state, and handles timing events.

Complete program of the mobile application

Explanation of the program

Variable	Description
	This variable stores the image (e.g., banana, strawberry, orange) revealed when the player clicks the first card in a pair attempt. It helps to remember which image was selected first so that when the player selects the second card, the game can compare the two images.
	This variable stores the image revealed when the player clicks the second card during a matching attempt. It works together with selected_image1 to compare the two selected images.
	This variable tracks how many cards have been clicked in the current turn (usually 0, 1, or 2). It Controls the game flow by indicating whether the player is: Selecting the first card (etat_clic = 1) Selecting the second card (etat_clic = 2)
	This variable holds the list of images assigned to all the cards in the current game session. It contains pairs of images (e.g., banana, strawberry, orange) duplicated and randomly shuffled to create the game board.
	This variable temporarily stores a randomly chosen image from the list of available images during the setup or shuffle process. It selects images at random when creating the shuffled list of card images for the game.
	This variable acts as the position indicator to access a specific image in the list of images.
	It contains the complete collection of image resources used in the game (e.g., banana, strawberry, orange). It serves as the master list from which pairs of images are selected to create the game board.

The reset_buttons procedure is responsible for resetting the state of all card buttons to prepare the game for a new round or restart. Specifically, it sets all card buttons to show the “empty” image, hiding any previously revealed fruit images.

The disable_buttons procedure is used to temporarily prevent the player from interacting with the card buttons.

Its main roles include:

1- disabling all card buttons so that the player cannot click on any cards during specific game phases.

2- used typically when two cards are already selected and the game is waiting (using a timer) to check if the cards match or to hide them again.

3- prevents multiple clicks or accidental taps that could disrupt the game logic during this pause.

The activate_buttons procedure is responsible for re-enabling the card buttons so the player can interact with them again. Its main functions include:

1- Enables all card buttons that are not yet matched or disabled.

2- Allows the player to continue selecting cards after a pause or after unmatched cards have been hidden again.

The create_image_list procedure is responsible for creating and preparing the list of images that will be used in the game for matching pairs. Its main tasks include initializing a list of images that contains the pairs of each fruit image (e.g., banana, strawberry, orange), so there are two copies of each image for matching.

The reset procedure is designed to reinitialize the game so that a new round can begin smoothly. Its main tasks include:

- Resetting all card buttons:

- Randomizing the game images:

- Resetting game variables:

- Disabling or resetting timers:

The create_image_list procedure is responsible for creating and preparing the list of images that will be used in the game for matching pairs. Its main tasks include initializing a list of images that contains the pairs of each fruit image (e.g., banana, strawberry, orange), so there are two copies of each image for matching.

The when Screen1.Initialize triggers automatically when the app’s main screen loads (when the player opens the game).

It calls the reset procedure, which prepares the game to start fresh.

The when reset.Click is triggered when the player taps the Reset button in the game interface.

It calls the reset procedure, which restarts the game.

This When Clock1.Timer triggers when the Clock1 component’s timer interval elapses—typically after a short delay set to allow the player to see two selected cards.

Its main role is to handle the hiding of unmatched cards after they have been briefly revealed.

When fired, it usually does the following:

Checks if the two selected cards do not match.

If they don’t match, it resets those cards’ images back to “empty”, hiding them again.

Re-enables the card buttons so the player can continue selecting new cards.

Disables the Clock timer to prevent repeated firing until needed again.

The test_game procedure (often called test_image or tester_jeu in some versions) is responsible for checking if two selected cards form a matching pair. It is a core part of the game logic.

1- Compare Two Selected Images

It checks whether selected_image1 and selected_image2 are the same.

These variables store the images revealed by the first and second card clicked.

2- Handle a Match

If the two images match, the procedure:

Keeps both cards visible.

Disables those two buttons so they cannot be clicked again.

Resets selection variables for the next turn.

3- Handle a Mismatch

If the two images do not match, the procedure:

Enables the Clock1.Timer to wait briefly before hiding the images again.

Calls disable_buttons to temporarily block input during the wait.

Stores the index or reference of the two mismatched buttons to be reset later.

4- Prepare for Next Turn

Resets the click state (etat_clic) to 0 to allow a new pair selection.

Clears or resets selected_image1 and selected_image2.

The block When Button.Click does two things:

- reveals the image assigned to Button1 using its index in list_images_game.

- triggers the matching logic by calling the test_image_test procedure to handle the game’s next step.