PROCEDURE

SETTING UP THE BACKGROUND

1. In the DESIGNER
set the screen orientation to landscape. Change both AlignHorizontal and
AlignVertical to center. Go to Layout and drag the horizontal arrangement out to
the viewer. Change both its AlignHorizontal and AlignVertical to Center. Change its
both its height and width to fill parent. Go to Drawing and Animation and drag out
canvas. Set the canvas height and width to fill parents. In the Drawing and
Animation tab, drag out eight ImageSprite to the canvas. Import the images
needed for this project.
2. In the BLOCKS
go to Variable and drag initialize global name to. At the List, drag out make a list
and fit it to inside initialize global name to. At the Text, drag out eight blank blocks
and name it square.png, square2.png, square3.png, square4.png, square5.png,
square6.png, square7.png, and square8.png respectively fit it all to make a list.
Go to Variable and drag initialize global name to and name it imageSpritesList.
Drag out a make empty list and fit it to initialize global name. In the Procedure,
drag out to procedure do. And name it makingBuildings.. At Canvas, drag out set
canvas1.BackgroundColor and fit it inside to do. At Colors, drag out make color and
fit it to canvas. Change the value of the makelist block (which is attached to make
colors) to 200,200 and 60 respectively. Go to List, and drag out add items to list
block and fit under make buildings. Do it eight times. Add eight items slots in the
add items to list and name it form 1-7. Ex; imageSprite1, imagesprite2 and
imageSprite3.
Go to Controls and drag out for each item and fit it to make buildings block.
Duplicate get.globalbuildingSprites and fit it to for each sprite in list block. Get an if-
then block and fit it under make buidings block. Click the if-then block then type
not, then fit it to the if-then block. Then click again the if-then block and type is the
list empty and drag and fit it to the not block. Fit a getglobalbuildingimages into the
is the list empty block.
In the Any component, select any ImageSprite and drag out set ImageSprite.picture
and fit it to the if-then block. Fit the get.spriteImages and pick a random item list to
the if-then block. Fit a get.globalBuildingSprites to pick a random item list block.
Select a remove list item list index under List and fit it to the if-then block. Duplicate
get.globalBuildingImages and fit it to the remove item list index block. Find index in
list thing block in the List and fit it to the remove item list index block. Fit a
 ImageSprite.picture of component and get globalbuilding block to index in this list
block. Fit get sprite in the imageSprite.picture block.
Set a value of 1 in About screen property and see what happens in the ai
companion.
Go back to BLOCKS; select Any ImageSprite and drag out set ImagesSprite.width.
Fix it under the if-then block. In the Math section, select a division block and attach
it under set ImageSprite. Click Canvas and place it inside the numerator of the
division operation and place 8 on the denominator.
3. In the BLOCKS
On the Variable section, drag out initialize global.to and rename it to
buidingHeights. In the List, drag out the make a list block and attach four math
values to it namely, 0.3, 0.45, 0.6 and 0.75.
Drag a set ImageSprites.height and fix it under set ImageSprite width. Attach a get
sprite and a multiplication operation on ImageSprite.height. Place a pick a random
item list on the numerator and attach a global buildingHeights block to it and a
canvas.height block on the denominator.
In the any ImageSprite section, drag out call ImageSpriteMoveTo block and attach it
to the if-then block. Attach a get sprite block to the imageSpriteMoveTo block. On
the x variable, attach a get global distance block and Canvas1.Height on the y
variable.
Produce a set global distance to and attach it under set canvas1.BackgroundColor to
block. Attach an addition operation to the set global distance block and place a get
global distance block in the 1st addends and place a multiplication operation in the
2nd addends. Place a canvas1.width block on the multiplicand and 0.25 on the
multiplier.
4. In the Designer;
Drag a new ImageSprite and rename it heliBomber. Then on the picture
properties, select the picture for a helicopter. Click screen3 and deselect show
status bar.
Change the heading to 180 and deselect rotates button.
5. In the Blocks;
Drag out a set heliBomber.x and set helibomber.y and attach it to a procedure called
to heliStart do. Drag out two multiplication operation and place canvas1.height and
canvas1.width block to each multiplicand and place 0.045 and 0.75 in the
multiplier respectively. Attach the two operations to the set heliBomber.x and set
helibomber.y respectively.
Produce an initialize global to block and rename it to power and attach a false
logic block to it. Produce an event block canvas1.Touched and attach an if-then
 block to it. Place a logic equation block in the if side of the if-then block and place
a get global power block and a false logic block on the other side. Produce a set
global power to block and attach it to the then side and at the same time, attach a
false logic block to it. Get a set heliBomber.speed to block and attach it the the
then side and at the same time, attach a value block of 0.10 to it.
Create an event when heliBomber.EdgeReached block and put an if-then block
under it. Inside the if-then block, put a math operation with an equals sign on the
if side. Inside the math block, place a get edge block on its left side and -3 on its
right side. Place a set heliBomber.X block with a canvas1.width attached to it in the
then side. Again, place a set heliBomber.Y block on the then side. Place an
addition operation on the heliBomber.Y block and place heliBomber.Y to its first
addends and a multiplication operation to its other addends. The multiplication
block has canvas1.Height for its multiplicand and 0.15 for its multiplier.

SETTING UP THE BOMB AND THE REST

1. In the Designer;
Drag out a new ImageSprite and rename it to bombSprite. Upload the
designated picture (bomb) then change its size to 32 by 16 pixels. Uncheck the
rotation box and change its interval to -90. Uncheck the visible box. Set the z
value to another higher value.
Drag out the sound at the media properties and import the sound it will make
once it reaches the edge of the screen.
2. In the Block;
Drag out an initialize global to block, rename it as isBombReady and attach a
logic true block to it. Produce an if-then block and attach it under the when
heliBomber.EdgeReached event block. Drag out a set bombSprite. Enabled block,
set bombSprite. Visible block, set bombSprite. Speed block, set bombSprite.X
block and set bombSprite.Y block. Attach two true logic blocks, one variable
block with a value of 20 in them, a heliBomber.X block and an addition
operation block respectively. At the additions block, place heliBomber.Y block on
the 1st addends and heliBomber.Height on the other. Fit these five set
bombSprites to the then side. Place a logic equation block in the if side and
put get global isBombReady on the left side of the equation and a true logic
block on the other side of the equation. Place a set isBombReady to block under
the when heliBomber.EdgeReached block and attach a false logic block to it.
Create a when bombSprite.EdgeReached block and attach an if-then block to it.
Inside the if-then block, attach a math quality block to the if side and put get
 edge on the left side and -1 on the right side. Create a procedure and rename
it to resetBomb attach a set global is BombReady block that has a true logic
block attached to it. Place a set bombSprite.Enabled and set bombSprite.visible
under the procedure to resetBomb with a false logic block in each attached.
Produce a call resetbomb block and attach it under the if-then block. But also
produce a call sound1. Play block and attach it under the same if-then block.
Create an initialize global counterDestroyedBuildings to block and a procedure to
gameOver block. On this block, attach a for each block. Duplicate the set
ImageSprite.Height block in the previous procedures and attach it to do.
Attach a get global buildingSpriteList to the side of this for each block. Attach a
set ImageSprite.Y block to the for each block and attach a get sprite and
Canvas1.Height block to it. Attach a call resetBomb and call heliStart block under
the for each block
Drag out a when bombSprite.CollidedWith and attach a for each block to it.
Rename it sprite and attach an if-then block to it and add an else to it .
Attach a call gameOver block the the then side. On the if side, attach an
equality block to it and fit a get globalcounterDestroyedBuildings block to the
right side and an 8 on its left side. Attach and if-then block to the else side.
Attach an equality block to the if side and fit a call ImageSprite.CollidingWith
block on its right side and a true logic block on its left side. Attach a get sprite
and a bombSprite block to it. On the then side, attach a call Sound1.Play block,
call resetBomb block and set ImageSprite.Height block. In this block, attach a get
sprite block and a subtraction block to it. In this block, put an ImageSprite.Height
block on its minuend and attach a get Sprite block to it. On its subtrahend, attach
a multiplication block. In this block, put a Canvas1.Height block on its
multiplicand and .15 on the multiplier. Under the set ImageSprite.Height block,
attach a set ImageSprite.Y block to it and attach a get sprite block and a
Canvas1.Height block to it.
PROCEDURE: DESIGNER PANE

PROCEDURE: BLOCKS PANE

 OUTPUT

The helibomber goes from right to left dropping bombs on the buildings

Destroyed a part of the building

It goes down by a level after it reaches the end

.and explodes if it collides with a building. The game will be reset shortly
 REFLECTION

At first I thought making a game on app inventor seems to be hard. Well, I was not
wrong; it is indeed hard because you have to make something out of nothing or from scratch.
Not to mention the constant search for errors and to where the block went wrong, it is all quite
taxing. However, whats special about the app inventor is that any changes one makes on the
browser it can be immediately seen on the phone. In this way, I can see what parts of the code I
did not like and change them at will. I get used to the functions of the blocks more easily
because of constant error fixing and ultimately, I get more motivated seeing how my work is
slowly taking shape.

To sum it up, first, app inventor is a very simple yet brilliant way to make people like me
who are not all familiar to coding and the likes, to like programming. All I needed to do was
drag and drop the blocks and upload some pictures or sounds to use them. Like putting all my
ideas on a large box, you can take or put anything in it. Second, the site offers many cool
tutorials so its not that hard to grasp the concept. And lastly, in this activity, I learned to have
patience, and when I say patience I mean a load of them.