Developing a Mobile Puzzle Game with MIT App Inventor

Tutorial plan

1- Presentation of Puzzle Game

2- Objective of Puzzle Game mobile application

3- Description of application designer interface

4- Description of application blocks part

Presentation of Puzzle Game

The Puzzle Game is a visual logic challenge where the player must reassemble an image that has been split into separate pieces.

At the beginning, the pieces are displayed on four buttons in a mixed order.

By clicking a button, the player cycles through different image pieces for that position.

The goal is to arrange all pieces in the correct order so they recreate the original picture.

After each click, the game checks if the arrangement is correct using the puzzle_test procedure.

When all pieces are correctly placed, a congratulatory message is shown with the Notifier component, and the player can move on to the next phase or enjoy the completed image.

Objective of Puzzle Game mobile application

The main objective of the Puzzle Game mobile application is to provide players with an engaging and interactive challenge where they must logically reconstruct an image that has been split into several pieces and randomly positioned at the start of the game.

Each puzzle piece is represented by a clickable button (Puzzle1, Puzzle2, Puzzle3, Puzzle4), and every click on a button changes the image shown on that position, cycling through the different available puzzle pieces.
The player’s goal is to determine the correct image piece for each position and arrange all the pieces in the proper order so that they form the complete original picture.

This objective promotes:

- Logical Thinking – identifying the correct piece for each position based on the image’s visual details.

- Problem-Solving Skills – finding the optimal sequence of clicks to achieve the correct arrangement.

- Observation Skills – noticing small details, shapes, and colors that indicate a correct match.

- Memory Skills – remembering which pieces are already in place to avoid unnecessary changes.

The game continuously checks the arrangement after each move using the puzzle_test procedure.

When all pieces are in their correct positions, the application automatically detects success and uses the Notifier component to display a congratulatory message such as “Bravo! Puzzle Completed!”.

Optionally, the game can then advance to the next level, increase difficulty, or present a new image to keep the challenge engaging.

Description of application designer interface

In MIT App Inventor, the Designer interface is where you visually arrange and configure all the components that make up the Puzzle Game before adding logic in the Blocks section.

These are the elements players can see and interact with on the screen:

Screen1:

The main container of the game where all other components are placed.

Properties set in the Designer: Title (Puzzle Game), alignment (center), background color or image.

TableArrangement:

Arranges the puzzle buttons in a 2×2 grid layout.

Ensures the puzzle pieces are properly aligned like a real puzzle.

Button Components (Puzzle1, Puzzle2, Puzzle3, Puzzle4)

Each button displays a part of the puzzle image.

Clicking a button changes its image to cycle through possible pieces.

Sized equally so pieces fit together visually.

Notifier1:

Displays pop-up messages when the puzzle is completed or for other feedback.

Example: Shows “Great job! The puzzles are correctly placed” when the correct arrangement is detected.

Description of application blocks part

In MIT App Inventor, the Blocks section is where you create the logic and interactivity of the Puzzle Game.

While the Designer interface focuses on layout and components, the Blocks part defines how the game behaves.

The full program of application

Description of blocks program

1- The variables 

These variables will store which puzzle piece is currently shown for each button, and you can update them when the player clicks a puzzle button.

2- The puzzle_test procedure

The puzzle_test procedure verifies whether the puzzle pieces shown on the buttons are in the correct order.

It uses the if control block to check the values of the variables (puzzle_number1 … puzzle_number4).

Each variable represents the puzzle piece currently displayed on its corresponding button.

How it works:

When a player clicks a puzzle button, the game changes the piece shown and updates its variable (puzzle_numberX).

After each click, puzzle_test runs.

Inside puzzle_test, the if block checks if all puzzle variables match the correct piece numbers (correct arrangement).

If the condition is true:

The Notifier component displays a success message (e.g., "Bravo! Puzzle complete!").

3- The puzzle.Click event

In the Puzzle Game created with MIT App Inventor, the Puzzle.Click event (e.g., Puzzle1.Click, Puzzle2.Click, etc.) is the block that responds when the player taps on a puzzle piece button.

Main Roles

a) Detect Player Action

Captures the click/tap on a specific puzzle piece.

Identifies which puzzle button was pressed.

b) Change the Puzzle Piece Image

Cycles through the available puzzle images (e.g., piece 1 → piece 2 → piece 3 → piece 4 → back to piece 1).

Updates the button’s Picture property to display the new piece.

c) Update the Puzzle State Variable

Changes the corresponding global variable (puzzle_number1, puzzle_number2, etc.) to store the new piece number shown on that button.

d) Trigger the Win Condition Check

Calls the puzzle_test procedure to verify if all puzzle pieces are now in the correct order.