Colour Guessing Game – MIT App Inventor Tutorials

In this game, a RGB value will be generated randomly and player will need to select the correct colour based on the RGB value.

UI Components:
Label, Horizontal Arrangement, Button, Notifier

Blocks

Initialisation

In this project, we will break our code into two main functions:

generateQuestion – This function will generate the RGB values for the answer options, a random index as the correct answer, and the string for questionLabel
updateUI – This function will update the mobile app UI

When the main screen initialised, call the generateQuestion and updateUI functions

Generate Question

First, generate a number randomly between 1 to 3 and store it into the answer variable. This number will be the index of the correct answer.

Next, create a variable buttonColours to store the RGB values for all three buttons. Each RGB value is saved as a list with three numbers between 0 and 255, representing the intensity of red, green, and blue respectively. Essentially, buttonColours is a list with three lists.

Create a for loop that counts from 1 to 3. In each loop, generate an RGB value and push it into buttonColours. If the loop variable is equal to answer, generate a string with the RGB value and store it into the question variable.

Update UI

In updateUI function, update the background colour of all three buttons based on the value stored in buttonColours and the value of QuestionLabel.

Check Answer

Create a function checkAnswer to check if a user clicked the correct button. The checkAnswer takes a parameter and the argument is the index of button clicked. When the function is called, we first check if the clicked button index equals answer. If so, update the score. Else, reset the score to zero and display a dialog notifying the user the game is over. Next, call the generateQuestion and updateUI functions to start the next question. Finally, update the score label to display the latest score.

Complete Program

The Nim Game – MIT App Inventor Tutorials

Nim is a mathematical strategy game which two players take turn to remove any number from different piles. There are many variations of the game, in this tutorial, there will be three piles with number three, four and five respectively. The winner is the player who takes the last number.

UI Components:
Label, Horizontal Arrangement, Button, Notifier

Blocks

Start Game

Create three variables to keep track of the number in different piles and also a variable to keep track the player’s turn. This below example, updateButton procedure is created to update the text of all three buttons when any of the number changes. When RestartGameButton is clicked, reset the variables and UI.

Button Click

When user clicked any of the three buttons, we will use Notifier text dialog to ask for the number user will be taking away from the selected button. After user input a number, we will need to check for several invalid input conditions:

  1. Input number should be less than remaining number on the button
  2. input number should not be less than zero

If input is valid, we will then check for the winning condition. If the sum of all three piles is zero, then the player wins the game.

Above example shows only the logic for Button1, the same logic needs to be done for Button2 and Button3. If the winning condition is not met, update the isPlayerOne variable. We will also change the UI to indicate different player’s turn.

Complete Program

MIT App Inventor Generate QR Code Offline

This app will generate a QR code using string input by user. The QRCodeCreator extension was used for the QR generation. Add BarcodeScanner and File components to provide required dependency and permission for the app to function correctly.

Complete Program

Common Error

Failed resolution of: Lcom/google/zxing/ EncodeHintType

This error is caused by missing dependency. Solve this problem by adding the BarcodeScanner  component into your application

Error 908: The permission Write_External_Storage has been denied

Your application needs to ask for WRITE_EXTERNAL_STORAGE permission during initialization or runtime.

Permission name: android.permission.WRITE_EXTERNAL_STORAGE

If the access is denied even after permission is granted. Add the file component to allow storing and retrieving of files on your device.

Number Memory Game – MIT App Inventor Tutorial

memory-game-app-inventor

In this app, numbers will appear in a 4×4 grid for a certain amount of time. User needs to remember all the numbers and tap on the buttons according to number sequence from 1 to 16.

UI Components:
Label, Horizontal Arrangement, Button (lots of button 😱), Horizontal Arrangement, Clock, Notifier

Clock – Enabled (false), TimeInterval (5000)

Blocks

Generate Random Number Sequence

First, generate a list with incremental numbers from 1 to 16. Then, apply Fisher-Yates algorithm to shuffle the list to have random permutation.

Show Numbers when Game Start

When the start game button is clicked, generate the random number list and show the numbers on all 16 buttons from left to right.

Enable the clock when game start to start the timer. In this example, the time interval was set to 5000ms and once the Clock.Timer event called, disable the timer and hide all the text on buttons.

Finally, we need a variable to keep track of the button clicks and the number will be displayed using the top label.

Game Play

For each button click, increase the clickCount variable by one and check if the number on the button matches the number in our generated array based on its sequence. In below example, checkClick function will take in an argument which will be used as index to get the value in the generated list.

Complete Program

Drawing Canvas – MIT App Inventor Tutorial

Create a drawing canvas on app inventor that allows you to pick colour from all spectrum. In this app we will also add several drawing tools such as drawing straight line, circle, and rectangle. On top of that, you will be able to share your drawing through any other applications on your phone!

UI Components:
Horizontal Arrangement, Vertical Arrangement, Horizontal Scroll Arrangement, Button, Slider, Sharing, Canvas

All three sliders – Min value 0, Max value 255

Blocks

RGB Colour Mixing

All colours can be produced by combining red, green and blue. Each colour’s intensity is represented using a value between 0 and 255. In the project, three sliders are used to modify the intensity of each colour and when the value of any slider changed, we will display the resulting colour using the ColourButton and update the canvas paint colour at the same time.

Pen Tool

The variable tool is created to keep track of the drawing tool we are using so the functionality of each tool will not overlap. Update the tool variable when PenButton is clicked. When your user interacts with the canvas by dragging their finger on it, the Canvas.Dragged event will be triggered. Call the Canvas.DrawLine function if the tool in use is “pen”.

Eraser & Clear Tool

The clear button will clear the canvas which can be implement easily by simply calling the Canvas.Clear function.

In MIT App Inventor, there isn’t any function to erase paint on canvas. However, we can simulate the eraser effect by drawing lines with the paint colour set to the colour of your canvas.

Line Tool

Line tool is used to create a straight line on the canvas. First, use variables to store the coordinate when the user touch down on the canvas. When user release their touch on the canvas, join the coordinate at that point with the initial stored coordinate to form a line.

Circle Tool

To draw a circle using Canvas.DrawCircle function, we need to provide a value for circle radius. We will use the coordinate of touch down as the center of circle and the coordinate of touch up as the edge of circle. Then, calculate the radius by finding distance between two coordinates using formula below:

In this example, we created a function named calculateRadius, calculate the result and return it as an argument for the Canvas.DrawCircle function.

Rectangle Tool

Create a function named drawRectangle, that takes two diagonal points as arguments. We will able to create a rectangle using Canvas.DrawShape function by providing a list of all four points of a rectangle as below:

Share Drawing

When the function Canvas.save called, it will return the path where your drawing will be saved. We will then use the Sharing.ShareFile to share the file at the path.

Complete Program

Dungeon Whack – MIT App Inventor Tutorial

dungeon-whack-mit-app

We will build a game similar to the classic Whac-A-Mole game. The user will need to tap on the orc that shows up randomly on the screen within a limited time.

UI Components:
Canvas, Sprite, Label, Horizontal Arrangement, Button, Clock, TinyDB, Sound
Clock – Disable both clock by default

Assets:
Sprite image – https://csplayground.io/wp-content/uploads/2021/01/skull.png
Hit sound – https://csplayground.io/wp-content/uploads/2021/01/hit.wav

Blocks

Countdown Timer

The default value of CountdownClock’s time interval property is 1000, which means the event will trigger every 1000 milliseconds (one second). When the start game button clicked, we enable the CountdownClock to start the clock. Every time the clock event is triggered, update the countdown value on the screen and reduce the value of the counter. If the countdown value equals zero, disable the clock.

Moving the Sprite

Create a procedure and in the procedure, we move the sprite to a random X and Y position from 0 to the end of the canvas. Similar to the countdown timer, enable the MoveSpriteClock when StartGameButton click. In the MoveSpriteClock timer event, we call the moveSprite procedure. If the countdown equals zero, we stop the clock.

Updating Score

Create a variable to keep track of clicks on the sprite. Use the canvas touched event, check if the sprite is touched. If so, increase the value of the score and update the ScoreLabel. The touchedAnySprite parameter is a Boolean value.

Reset Game State

Create a procedure to reset the game states when prior to game starts.

Make Sprite Clickable Only During Gameplay

Create a variable with a Boolean value to keep track of the current state – started (true) or end (false). Add an if statement to the canvas touched event so that score will only be updated when the game has started. In the below example we used a compound operator AND to join two conditional expressions.

Update the game state when the countdown ends. Here, the code was refactored into a procedure.

Sprite Clickable Only Once Per Interval

Create a variable isHit to keep track if the sprite is hit within the time interval. Modify the canvas touched event so that the score will only be updated when all three conditions are satisfied.

Complete Program

To-do List – MIT App Inventor Tutorial

todo app

Create a to-do list app that can help you to get all the tasks out of your head and manage them on your phone anytime.

UI Components:
Label, Horizontal Arrangement, Button, ListView, TinyDB

Pseudocode:

Blocks

Initialization

First, create a variable named items to store our list of to-do items. We are not able to add or remove item from list stored in tinyDB, hence we will perform the operation on items variable prior saving the list into tinyDB.

When the app screen initialized, we will get first get the value stored in tinyDB and assign it to our items variable. If no value exists in tinyDB, we assign it with an empty list. Then, update the ListView with value of items.

Add Item

To add an item, first we add the user’s input in the textbox to our items variable. Then, store the value to tinyDB and update the ListView with the lastest list:

Remove Individual Item

To remove the selected item, we remove the item in items based on the index of selected item in our ListView. Then, we store the items to tinyDB and update the ListView:

Remove All Items

To remove all items in list, all we need to do is to set our items to an empty list. Again, we store the empty list to tinyDB and update the ListView:

Complete Program

Enhancement

  1. Ask for confirmation prior clearing all the items

Number Guessing Game – MIT App Inventor Tutorial

The app will pick a number randomly from 1 to 100. You will need to keep guessing numbers until you find the selected number. Each time you guess, the app will tell you if your guess was too high or too low

UI Components:
label, textbox, button

Pseudocode

Blocks

Complete Program