Mobile Fighter Jet Game Application with MIT App Inventor

Tutorial plan

1- Presentation of Fighter Game

2- Objective of Fighter Game mobile application

3- Description of application designer interface

4- Description of application blocks part

Presentation of Fighter Game

The Fighter Game is a mobile shooting game where the player controls an airplane (fighter jet) at the bottom of the screen. The airplane can move horizontally by dragging it with a finger. The player’s goal is to shoot missiles upward to destroy enemies that appear at the top of the screen.

The airplane is placed at the bottom of the screen and follows the player’s finger (drag gesture).

When the player fires, a missile is launched upward from the airplane’s position.

If the missile collides with an enemy, the enemy explodes and disappears.

If the missile reaches the top of the screen without hitting an enemy, it resets to the airplane’s position and is ready for another shot.

Objective of Fighter Game mobile application

The objective of the Fighter Game is to control an airplane, fire missiles, and destroy all enemy targets on the screen.

The player moves the airplane horizontally by dragging it with a finger.

Missiles are launched from the airplane and travel upward.

The player must aim carefully so the missile collides with enemies.

Each time a missile hits an enemy, the enemy explodes and disappears.

The game ends when all enemies are destroyed, and the player can restart the game using the reset button.

Description of application designer interface

The Designer Interface in MIT App Inventor is the part of the environment where the visual and non-visual components of the Fighter Game are created and organized.

It organizes all the sprites, buttons, and clocks so that the game can later be programmed with logic in the Blocks Editor.

Here’s a clear description of the Fighter Game application Designer interface in MIT App Inventor:

1- Screen1

The main screen of the application.

Title set to Fighter Game.

Background color or image can be added for a sky effect.

2- Canvas (Game Area)

The playfield where the airplane, missile, and enemies appear.

Size: fills most of the screen.

Background: plain color (blue/black) or a sky background image.

3- ImageSprites (inside the Canvas)

Airplane (fighter jet) → positioned at the bottom, moved horizontally by dragging.

Missile → starts at airplane’s position, moves upward when fired.

Enemies (enemy_1, enemy_2, enemy_3, enemy_4) → placed at the top of the canvas.

Explosion image → used to animate the destruction of an enemy when hit.

4- Button

Reset button → hidden at the beginning, becomes visible when the game ends (to restart the game).

5- Non-visual Components

missile_clock → animates the upward movement of the missile.

enemy1_clock, enemy2_clock, enemy3_clock, enemy4_clock → animate the explosion and disappearance of each enemy.

Description of application blocks part

The Blocks part of MIT App Inventor is where the logic and behavior of the Fighter Game are programmed. It connects the components created in the Designer interface with the actions of the game.

Complete program for the Fighter Game

Explanation of the program

1- reset procedure

The Reset procedure is used to Activate the missile clock to ensure the missile can be launched and animated properly when the game restarts.

It deactivates the four enemy clocks to stop any ongoing explosion animations from previous collisions.

It places the airplane and missile in their initial positions to re-centers the fighter jet and missile at their starting coordinates, giving the player a consistent beginning point.

It shows the enemies to makes all enemy planes visible again so the player has new targets to fight against.

Finally, the Reset procedure hides the Reset button to removes the reset option from the screen during gameplay.

2- Screen1.initialize event

The Screen1.Initialize event is triggered automatically when the game starts (when the app is opened).

The role of Screen1.Initialize is to automatically reset the game at startup, so that the airplane, missile, and enemies are all in their proper starting positions and the game is ready to play.

3- when reset.Click event 

The when reset.Click event is triggered whenever the player taps the Reset button.

The role of the reset.Click event is to restart the Fighter Game after it ends by calling the reset procedure, ensuring all elements return to their initial state for a new round of play.

3- when airplane.Dragged event 

The when airplane.Dragged event is triggered whenever the player touches and drags the airplane sprite across the canvas.

The role of airplane.Dragged is to let the player control the airplane’s movement horizontally with their finger, ensuring the missile stays aligned with the airplane before it is fired.

4- when missile_clock.Timer event 

The missile_clock.Timer event is triggered repeatedly at each time interval set in the missile_clock component. Its role is to animate the missile’s movement and control its interaction with the game.

It decreases the missile’s Y coordinate gradually, making it travel from the airplane toward the top of the canvas.

Once all the enemies are destroyed, the missile_clock.Timer event stops running and give the player the option to restart.

5- when enemy1_clock.Timer

Each enemy has its own clock (e.g., enemy1_clock, enemy2_clock, etc.) that controls the explosion animation when the missile hits it. The enemy_clock.Timer event is triggered repeatedly at the interval set in the clock component.

The role of enemy_clock.Timer is to animate the explosion of a hit enemy, hide it afterward, and stop the timer, ensuring smooth visual feedback when the missile destroys an enemy.

6- when missile.CollideWith event

The missile.CollideWith event is triggered automatically when the missile sprite touches an enemy sprite. Its role is to handle what happens when a missile hits an enemy.

The missile.CollideWith event is essential for collision detection. It triggers enemy explosion, hides the missile, and enables the enemy’s timer to remove the enemy from the game.

7- when missile.EdgedReached event

The missile.EdgeReached event is triggered automatically when the missile sprite reaches the edge of the canvas (typically the top of the screen). Its role is to reset the missile for the next shot and keep the game flow smooth.

The missile.EdgeReached event ensures that when a missile leaves the canvas without hitting an enemy, it resets to the airplane and is ready for the next launch, maintaining smooth gameplay.