Project Name : Shooting Target Project

Level : 5

Step 1 : Go to MIT App Inventor and create a new project Shooting Stars game.

Step 2 : Add background image 1 change properties of screen1.

i) scrollable-> yes, Theme-> classic.
Step 3:
i) Add canvas and rename it by splash_animation_area.
ii) Then add one background image “back_img_2”.
iii)height->80% and width -> Fill parent..

Explanation :
Canvas

A two-dimensional touch-sensitive rectangular panel on which drawing can be

done and sprites can be moved.
The ​BackgroundColor​, ​PaintColor​, ​BackgroundImage​, ​Width​, and ​Height​ of the
Canvas can be set in either the Designer or in the Blocks Editor. The Width and
Height are measured in pixels and must be positive.
Step 4 : Add one ball . rename it by -> bullet_two, paint color-> yellow

Step 5 : add one imagesprite . Rename it by explosive_two. Add one gif file as
shown in img. Placed it in canvas.
Explanation :

Imagesprite :
A ‘sprite’ that can be placed on a ​Canvas​, where it can react to touches and
drags, interact with other sprites (​Ball​s and other ImageSprites) and the edge of
the Canvas, and move according to its property values. Its appearance is that of
the image specified in its ​Picture​ property (unless its ​Visible​ property is ​false​.

Step 6 :
i)add one ball and rename it by bullet_six.. Change properties : x->227 , y->324.
ii) add another ball and rename it by bullet_eight.. Change properties : x->299 ,
y->335.
iii) add another ball and rename it by bullet_eight.. Change properties : x->54 ,
y->333.
Step 7 :
i) add one image sprite. Change height and width by 30 pixel, add blast gif file.
ii) Rename it by -> explosive_4
iii) same for explosive_6
iv) same for explosive_8
Step 8 :Add one label and add text “Press shooting to the stars game”.

Explanation :
Label 

Labels are components used to show text. 

Step 9 : Add one button change properties as follows: font size->30%, font
color-> Red bgcolor-> none

Explanation :
Button 

Button with the ability to detect clicks.  

Step 10: add player and clock..

Explanation :
Player

Multimedia component that plays audio and controls phone vibration.

Clock

Non-visible component that provides the instant in time using the internal clock
on the phone. It can fire a timer at regularly set intervals and perform time
calculations, manipulations, and conversions.
Step 11 : add new screen winner and add gif file.
i) Align horizontal-> center 3, align vertical -> bottom3

Step 12 : Add two labels and font size for both -> 25% text for first label ->
SCORE, text for second label -> 0
Step 13:
i)add one horizontal arrangement
ii) height-> automatic, width-> fill parent, align horizontal-> center3, align
vertical-> top1.. iii) add two buttons in the horizontal arrangement.
iv) rename button 1-> Restart, rename button 2-> Exit game.
v) Change button color.
vi) add sound claps.mp4

Explanation :
HorizontalArrangement

Use a horizontal arrangement component to display a group of components laid

out from left to right.
Step 14: Add new screen-> game_screen.
ii) align horizontal-> center3, Align Vertical-> top1, scrollable, title -> game_screen

Step 15:
i)Take one horizontal arrangement. Do not change any property of it.
ii) Then add two labels in it.
iii) Rename label1 -> score_label and text-> SCORE :
iv) Rename label 2 -> value_label and text-> 0

Step 16 : Add canvas and rename it by -> play_area.

ii) Upload background image. height-> 600pixel, width -> fill parent..
Step 17: add one ball and rename it by bullet. paint color-> green, speed-> 25,
X->182 ,Y->450.
Ball

A round ‘sprite’ that can be placed on a ​Canvas​, where it can react to touches and
drags, interact with other sprites (​ImageSprite​s and other Balls) and the edge of
the Canvas, and move according to its property values.

Step 18 :
i)add one image sprite . and rename it by army_ship.
ii) height-> 120pixel, width-> 80pixel add image-> without_bg_png...
Step 19 : add one imagepicker. Rename it by alien_ship, height-> 50pixel, width->
50pixel, upload image.
ImagePicker :

A special-purpose button. When the user taps an ImagePicker, the device’s image
gallery appears, and the user can choose an image. After an image is picked, it is
saved, and the ​Selection​ property will be the name of the file where the image is
stored. In order to not fill up storage, a maximum of 10 images will be stored.
Picking more images will delete previous images, in order from oldest to newest.
Step 20 : Add horizontal arrangement. Height -> automatic, width-> fill parent.
Rename it by -> player_control...

Step 21 :
i)add one button and rename it by left_btn
ii) upload image add one dummy label remove text from that label.
iii) Then add one button . rename it by right_btn.
iv) Upload img also.

Step 22: add one button and rename it by reset_btn. Height -> automatic, width->
250 pixel.

Step 23 :
i) add two clock rename it by alien_clock and bullet clock.
ii) Add one sound also.

Step 24: Now we will do coding for screen 1.

ii) Go to variables and select procedure.
iii) give procedure name speeding_bullets.
iv) click on bullet two and select set bullet_two. Speed to block.
v) Duplicate it for bullet_four, bullet_six and bullet_eight. As shown in img.

Explanation :
A procedure is a sequence of blocks or code that is stored under a name, the name of 
your procedure block. Instead of having to keep putting together the same long 
sequence of blocks, you can create a procedure and just call the procedure block 
whenever you want your sequence of blocks to run. In computer science, a procedure 
also might be called a function or a method.
Step 25 : go to math and select zero block and edit by 20, 25, 30, 35…
Explanation :
Can be used as any positive or negative number. Clicking on the “0” in the block will 
allow you to change the number.

Step 26 : Duplicate this speeding_bullet module.

ii) edit procedure name by heading_bullet.
iii) edit speed by heading. So our set block is set bullet_two. Heading to block.
iv) Then edit math block by 90 as shown in the image.

Step 27 : click on screen 1 and select when screen 1. Initialize block .

ii) go to the procedure block and select call speeding_bullets and call
heading_bullets.
Explanation :
To initialize the block.
Step 28 : Click on button 1 and select when button1.click do block.
ii) click on player1 and select call player1. Stop block.
iii) go to control and select open another screen screen Name.
iv) then click on the text block and select empty string.
v) Then type screen name game_screen.

Explanation :
When you create a procedure, App Inventor automatically generates a call block and 
places it in the Procedures drawer. You use the call block to invoke the procedure.
Step 29 : click on bullet two and select edge ridge block.
ii) select set bullet_two. paint color to block.
iii) go to color block and select make color block.
Explanation :
make color​ takes in a list of 3 or 4 numbers. These numbers in this list represent 
values in an RGB code. RGB codes are used to make colors on the Internet. 
Step 30 :
i) Go to the math block and select the random integer block.
ii) Duplicate it twice and place it as shown in image.

Explanation :
Returns a random integer value between the given values, inclusive. The order of the 
arguments doesn’t matter.
Step 31 : click on control block . select if then block do like this.
Explanation :
Tests a given condition. If the condition is true, performs the actions in a given 
sequence of blocks; otherwise, the blocks are ignored.

Step 32 : Place this if block below the set bullet_two paint color block.
ii) move the arrow on get edge word then it will show the edge block. drag it as
shown in image.

Explanation :
get 

 
This block provides a way to get any variables you may have created. 

Step 33 :
i) go to the math block and select zero block edit by 1
ii) click on bullet_two and select set bullet_two. Visible to block
iii) go to logic and select false block.
iv) click on explosive_ two and select explosive_two . visible to block.
v) then go to logic and select true block.
vi) click on player and select player1. Start block.
false 
  
Represents the constant value false. Use it for setting boolean property values of 
components, or as the value of a variable that represents a condition. 

Step 34 :
i) Duplicate the get edge block which is present in if block.
ii) edit 1 by -1.
iii) click on bullet_two block and select set bullet_two . visible to block
iv) Go to logic and select true.
v) set explosive_two . visible to false.
vi) click on player 1 and select call player1. start.
Step 35 :
i)Click on bullet_two and select set bullet two. Speed to block.
ii) select zero block from math and set as 40.
iii)click on bullet_two and select bullet_two. Bounce edge block.
iv) move the arrow on edge and select get edge block.

Explanation :
When you create a procedure, App Inventor automatically generates a call block and 
places it in the Procedures drawer. You use the call block to invoke the procedure.
Step 36 : Duplicate this whole block for bullet_four, bullet_six and bullet_eight.

Step 37: Now we will do coding for the winner screen.

Step 38 : click on variables and initialize global scored to 0.
Explanation :
​initialize global name to 

 
This block is used to create global variables. It takes in any type of value as an 
argument. Clicking on n​ ame​ will change the name of this global variable. Global 
variables are used in all procedures or events so this block will stand alone. 
Step 39 :
i) click on screen 2 winner and select when winner. Initialize do block.
ii) click on player 1 and select call sound. Play.
iii) go to variables and select get global scored
iv) click on control and select get start value.
v) click on label 2 and select set label2. Text to block… then go to variables and
select get global scored.
Step 40 : click on the restart button and select when restart. Click do block.
ii) go to control and select the open another screen block.
iii) click on the text block and select empty string and edit by screen1.

Explanation :
(string block) 

 
Contains a text string. 
This string can contain any characters (letters, numbers, or other special characters). 
On App Inventor it will be considered a Text object. 
Step 41: click on the exit button and select when exit. Click do block.
ii) go to control and select the close application..

Explanation :
open another screen 

Opens the screen with the provided name. 

close application 

 
Closes the application. 
 
Step 42: Now we will do block coding of game_screen.

Step 43 : go to variables and select initialize global SCORE TO BLOCK… 2) set 0

Step 44 :
i) click on alien clock and select when alien_clock. Timer block.
ii) click on alien ship and select set alien_ship. X to block
iii) go to the math block and select the addition block.
iv) again click on alien_ ship and select alien_ship. X .
v) go to the math block select zero block and set as 30 .

Explanation :
+ 

 
Returns the result of adding any amount of blocks that have a number value together. 
Blocks with a number value include the basic number block, length of list or text, 
variables with a number value, etc. This block is a m
​ utator​ and can be expanded to 
allow more numbers in the sum. 
Step 45 : click on bullet and select when bullet collided with other block.
ii) click on sound 1 and select following block
iii) set math block zero by 50 as shown in image.
iv) go to variables and select set global score to block.
v) go to math block and select addition block.
vi) put the following blocks in addition block.
vii) click on score value btn and select set score_value. Text to block.
viii) select get global score block
ix) click on bullet and select set bullet. Visible to block.
x) go to logic and select false block.
Step 46 : go to control and select if then block.
2) select block as shown in img.

Step 47 : click on left_btn and select left_btn . click block.

2) click on army_ship and select set army_ship. X to block.
3) go to the math block and select the subtraction block then select 20 value.
4) click on bullet_clock…. And select bullet_clock timer block.
5) click on bullet and select set bullet. Y to block.
6) select the subtraction block and place it as shown in img.

Step 48 : complete the block as shown in image.

Step 49 : click on the right button and select when right_btn. Click block.
ii) click non army_ ship block and select set army_ship. X to block.
iii) then go to math block and select addition block then go to army_ship block
and select following block.

Step 50 :
1) click on bullet and select bullet . Edge ridge block.
2) select set bullet. Visible to block.
3) go to logic and select false block.
Step 51 : click on the reset btn and select when reset_btn . click block.
2) go to variables and select set global score to block. Go to math block and
select 0 block.
3) click on the score value label and select set score value. Text to block .
4) go to variables and select get global score value block.
Step 52 :
i) click on alien ship and select alien ship. EdgeReached block.
ii) then select set alien_ ship . X to block and go to math block and select zero
block Edit by 20.

Step 53 : You have completed the design part and block coding part!! Now you
run your project!!