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.
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:
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.
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
Read this post in Arabic