appinventor mit | Get the Gold app

  Previously, we learned how to program game applications through the run over a moleMash game, and we realized that this requires programming the touch screen using the ImageSprite component, and to complete the programming we use some other appinventor mit components such as the Clock and the Button that enables us to process events.


collect-the-gold


Get the Gold app

By creating the Get the Gold app, you'll practice adjusting screen visibility, using Clock components, timers, and detecting collisions, in the Appinventor mit. By programming a game that is a pirate ship, we will program it to collect all the gold scattered on the screen.

 

App Objectives

  • Use the Clock component.
  • Responding to touch-sensitive screen with (ImageSprite) component.
  • Use the Canvas to animate the ImageSprite.

 

App Tools

 

Tool #1: Canvas

Palette: Drawing and Animation

Name: Canvas1

Use: represents the background on which we will place the images.

 

Tool #2: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite

Use: This component will carry the pirate ship in the game.

 

 

Tool #3: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite2

Use: This component will carry a piece of gold coins in the game.

 

Tool #4: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite3

Use: This component will carry a piece of gold coins in the game.

 

Tool #5: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite4

Use: This component will carry a piece of gold coins in the game.

 

Tool #6: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite5

Use: This component will carry a piece of gold coins in the game.

 

Tool #7: ImageSprite

Palette: Drawing and Animation

Name: PirateSprite6

Use: This component will carry a piece of gold coins in the game.

 

Tool #8: Clock

Palette: Sensors

Name: Clock1

Use: Provides a timer to move the coins on the screen.

 

 

Tool #9: Button

Palette: User Interface

Name: ResetButton

Use: Reset the game to start playing again.

 

Adjust tool properties

Tool: ResetButton

Action: Set the (Text) property to “Reset”.

 

Tool: PirateSprite

Action: Change the (Speed) property to “6”. Upload a pirate ship image by setting the Picture property to the (pirateship) file.

 

Tool: PirateSprite (2, 3, 4, 5, 6)

Action: Upload a picture of the gold coins on each of them, by setting the Picture property to the (goldcoin) file.

 

Tool: Clock

Action: Reset (TimerInterval) to “2000”..

 

Steeps

Add the app components mentioned above, as in the following screen:


CollectTheGoldScreen 


Moving Pirate Ship

To move the PirateSprite, we want the user to be able to "fling" the ship in the direction they choose.

To do this, we will use the PirateSprite.Flung event handler.

 

Note that PirateSprite.Flung takes 6 attributes: x, y, xvel, yvel, speed, and title.

We want to reset the current address of PirateSprite to the address given to us from PirateSprite.Flung. This means that the user can now control the direction of the pirate ship with his fingers by jumping on the screen, by setting the next block.

 

PirateSprite-EdgeReached

 

To prevent the pirate ship from exiting the screen, we'll also use PirateSprite.Bounce when we reach the edge, by adding the following block.

 


 

Moving The Coins

In this step, we want the gold coins to move in random locations on the screen. We'll use that Clock1.Timer and ImageSprite's MoveTo method to do this.

 


 

Detecting Collision

Appinventor mit detects collisions by checking for an intersection between the surrounding rectangles of each ImageSprite. We call this rectangle-based collision detection.

We can use the PirateSprite.CollidedWith event handler to detect when a pirate ship collides with a gold coin.

Note that PirateSprite.CollidedWith enters into the argument. This argument is something PirateSprite bumped into.

 

 

Button Event Handling

 

 

App Blocks

 

 

App Preview

1. Choose Al companion command from the Connect menu.

2. Point the phone's camera at the code that will appear on the screen and press the (Scan QR code) button to launch the app on the phone.

3. Click on a screen near the Pirate ship trying to collect the gold.


 

App QR

 

app QR

 -----------------------

Read this post in Arabic

Comments