Build  

a  balloon  pop  game!    

Part  1
An  MIT  App  Inventor  tutorial  

Feat. Tim the beaver

 App  overview:  Build  a  balloon  pop  game!
When  you  are  done  you  and  your  friends  will  be  able  to  use  this  app  to  play  a  fun  
game  of  pop  the  balloon!  
•  We  will  use  Image  Sprite  components—programmable  moving  images—to  create  
balloons  that  drop  from  the  sky  
•  The  player  will  have  to  “pop”—that  is,  click  on—the  balloons  before  they  reach  the  
boBom  of  the  screen  
•  In  this  simple  version  of  the  app,  nothing  will  happen  if  the  balloons  reach  the  
boBom.  In  “Build  a  balloon  pop  game!  Part  2”,  we  will  add  a  “Game  over”  message  
and  restart  buBon  that  appear  when  this  happens.  

Let’s  get  
started!  
 Step  1:  Signing  in  to  App  Inventor
Click  the  “Create  apps!”  buBon  in  the  menu  bar  at  the  top  of  the    
MIT  App  Inventor  Hour  of  Code  page.  
 
 Step  1  con<nued
You  can  either  ConMnue  
with  an  Account,  and  you  
will  be  given  a  Revisit  Code  
to  return  to  the  site  if  you  
wish.  

Or  you  can  sign  in  if  you  

have  a  Google  account.    
Your  projects  will  be  saved  
with  your  account  id.  
 Step  2:  Crea<ng  a  new  project
Click  “Start  a  new  project”  in  the  upper  leR  corner…  
 
For  this  tutorial  
  you  can  call  
your  app  
  “BalloonPop”  
 
…give  it  a  name  and  click  “Ok”  to  get  started!  
 
 Step  3:  Familiarize  yourself  with  the  designer  window  

ProperMes:    
Set  component  
PaleBe:     properMes  
Choose  
components   Viewer:    
Arrange  
components  

Components:  
View  an  
organized  list  of  
components  
 Step  4:  Add  components!
To  build  this  app  you  will  need  five  components—a  canvas,  three  
image  sprites,  and  a  clock.  Find  these  components  in  the  PaleBe  and  
drag  and  drop  them  onto  the  Viewer.    

x3
Note  that  ImageSprites  must  be  placed  
Components  
ON  the  canvas.   are  the  
building  blocks  
of  App  Inventor  
apps!    
Your  screen  should  now  look  like  this:  

Make  sure  to  drop  

the  Image  Sprites  
inside  the  Canvas!    
Step  5:  Upload  media  files
To  complete  this  app  you  will  need  to  download  a  picture  of  a  balloon  
for  your  sprites  from  here.  Then  you  will  need  to  upload  it  to  the  App  
Inventor  server  by  clicking  the  upload  file  buBon  under  “Media”  
You’re  
doing  
great!  

Before  upload   ARer  upload  

 Step  6:  Set  proper<es
Now  we  will  change  some  component  properMes  to  start  truly  building  our  app!    
To  view  and  change  a  component’s  properMes,  find  it  in  the  “Components”  list  and  click  on  it.    

1.  Click  on  Canvas1  and   2.  Click  on  

set  both  the  Height  and   Clock1  and  set  
Width  to  “Fill  parent…”   TimerInterval  to  
500    
Step  6  con<nued
Now  lets  set  the  properMes  of  our  Image  Sprites!  First,  we  want  to  set  their  X  
properMes  so  that  they  spread  out  across  the  canvas.  Set  the  X  value  of  ImageSprite1  
to  10;  the  X  value  of  ImageSprite2  to  100;  and  the    X  value  of  ImageSprite3  to  190  

Now  we  need  to  set  some  properMes  that  are  the  same  for  all  three!  The  example  to  
the  right  shows  ImageSprite1,  but  all  three  Image  Sprites  should  have  the  same  
properMes  set.  
•  Set  Heading  to  270  
•  Set  Height  to  80  pixels  
•  Set  Width  to  80  pixels  
•  Set  Picture  to  Balloon.png  
•  Set  Speed  to  25  
•  Uncheck  the  boxes  for  Enabled,  Rotates,  and  Visible  
 
Your  screen  should  now  look  like  this:  
Step  7:  Switch  to  the  blocks  window  to  write  code!
Now  that  all  components  have  been  added  to  the  app,  we  will  write  code  to  tell  
the  app  what  to  do  with  them!  To  do  so,  switch  to  the  blocks  window  by  clicking  
the  “Blocks”  buBon  in  the  upper  right  corner.  
 
 
Step  7  con<nued:  Get  to  know  the  blocks  window

Built-­‐in  blocks:    
Viewer:  
These  are  always  
Where  you  
available  and  handle  
assemble  the  
things  like  math,  text   An  example  of  two   blocks  into  a  
logic,  and  control   assembled  blocks   program  

Component  blocks:      
These  correspond  to  
the  components  
you’ve  added  to  
your  app  
 Step  8:  Start  coding!
Every  half  a  second  (or  500  milliseconds),  Clock1’s  Mmer  will  go  off—that’s  because  we  set  the  TimerInterval  
property  to  500!  When  this  happens,  we  would  like  one  of  our  three  Image  Sprites  to  appear  and  begin  falling  to  
the  boBom  of  the  screen.  To  do  this,  we  have  to  choose  a  Sprite,  and  we  would  like  that  choice  to  be  random.  App  
Inventor  lets  us  do  this!    
 
1.    click  on  Variables  in  the  Blocks  menu  and  drag  out  a  block  that  looks  like  this:  
First,  
2.  Change  “name”  to  “randomNumber”  
3.   Click  on  Math  in  the  blocks  menu  and  drag  out  a  block  that  looks  like  this:  
4.  Change  “0”  to  “1”  and  then  click  it  onto  the  “iniMalize  global  name”  block  

Variables  
store  
Your  final  result  should  look  like  this:  
informaMon
—like  a  
number!  
 Step  8  con<nued
1.  Next,  click  on  Clock1  and  drag  out  a  block  that  looks  like  this:  

2.  Click  on  Variables  again  and  drag  out  a  block  that    looks  like  this:  

3.  Choose  “global  randomNumber”  from  the  drop-­‐down  list  

4.   Click  on  Math  again  and  drag  out  a  block  that  looks  like  this:    

5.  Change  “100”  to  “3”  and  lock  the  block  into  place  with  the  “set  global  randomNumber”  block  to  
get  this:  

6.  Snap  these  two  into  place  inside  the  “when  Clock1.Timer”  block    
Your  final  result  should  look  like  
this:  
 Step  8  con<nued
We  would  like  the  app  to  do  different  things  depending  on  which  number  was  chosen  by  App  Inventor
—because  we  asked  it  for  a  random  number  between  one  and  three,  it  could  have  given  us  a  1,2,  or  3.  

1.  Click  on  Control  and  drag  out  a  block  that  looks  like  this:    
2.  Click  on  the  “if,  then”  block’s  selngs  buBon—the  square  blue  one  in  the  corner  
3.  Drag  out  an  “else  if”  and  an  “else”  block  from  the  leR  and  lock  them  into  place  in  the  “if”  block  on  
the  right.  The  “if,  then”  block  should  now  look  like  this:  
   

Make  sure  
your  “if  
then”  block  
looks  exactly  
like  the  one  
shown  
 Step  8  con<nued
Now  we  need  to  fill  in  our  “if,  then”  block.  If  App  Inventor  has  given  us  the  number  1,  we  want  to  make  
ImageSprite1  appear;  if  it  has  given  us  the  number  2,  we  want  to  make  ImageSprite2  appear;  otherwise,  
it  must  have  given  us  the  number  3,  and  so  we  want  to  make  ImageSprite3  appear.  

1.  Click  on  Logic  and  drag  out  a  block  that  looks  like  this:    

2.   Click  on  Variables  and  drag  out  a  block  that  looks  like  this:    

3.  Choose  “global  randomNumber”  from  the  dropdown  list  and  then  click  this  block  into  place  in  the  Logic  

block’s  first  space.  

4.  Click  on  Math  and  choose  a  block  that  looks  like  this:  

5.  Change  “0”  to  “1”  and  click  it  into  place  in  the  Logic  block’s  second  space    
Your  final  result  should  look  like  
this:  
 Step  8  con<nued
You  have  wriBen  code  that  checks  if  the  randomNumber  variable  is  equal  to  1.  With  just  a  small  
tweak  it  will  be  able  to  check  if  randomNumber  is  equal  to  2.  
1.  Copy  and  paste  the  block  of  code  you  just  created.  To  do  so,  right  click  on  it  and  choose  
“Duplicate  from  the  drop-­‐down  list”  

2.  On  the  duplicate  block,  change  the  “1”  to  a  “2”  

Your  final  result  should  look  like  

this:  
 Step  8  con<nued
Now,  click  the  two  blocks  you’ve  just  made  into  place  in  the  “if,  then”  
block,  posiMoned  as  shown  below:  
 
 Step  8  con<nued
Now  we  will  tell  the  app  what  to  do,  depending  on  the  random  number  that  is  selected.  

1.  Click  on  ImageSprite1  and  drag  out  a  block  that  looks  like  this:    
2.  Click  on  Logic  and  drag  out  a  True  block.  Click  it  into  place  with  the  “set  ImageSprite1.Enabled”  
to  get  this:  
3.  Duplicate  the  block  as  you  did  before,  by  right  clicking.  For  the  duplicated  block,  replace  
“Enabled”  with  “Visible”  by  clicking  on  the  second  dropdown  list.  
4.  Lock  the  two  blocks  together.    
    Your  final  result  should  look  like  this:  
 Step  8  con<nued
1.  Take  the  group  of  two  blocks  and  duplicate  it  twice  (so  that  you  get  three  copies).  
2.  Keep  the  original  as  it  was,  but  change  “ImageSprite1”  to  “ImageSprite2”  in  one  of  the  copies,  
and  to  “ImageSprite3”  in  the  other.  

Your  final  result  should  look  like  this:  

 Step  8  con<nued
Now  piece  it  all  together!  Place  the  three  groups  of  blocks  you  created  in  the  
previous  slide  inside  the  “if,  then”  block  as  shown  below,  and  put  the  “if,  then”  
block  inside  the  “when  Clock1.Timer”  block.    

Double-­‐
check  to  
make  sure  
everything  is  
in  the  right  
place  
The  code  you  have  wriRen  so  far  should  look  like  this:
 Great  job!  You  just  wrote   Step  9:  Tes<ng!
code  in  App  Inventor!  But  
does  your  code  do  what  we  
want  it  to?  To  find  out,  
we’re  going  to  have  to  
learn  how  to  test  our  app…    
 Step  9  con<nued:  Connect  to  your  phone
In  order  to  test  your  app,  you  will  need  an  Android  phone  with  the  MIT  AI2  Companion  app  
installed.  To  download  the  Companion  from  the  app  store,  scan  the  QR  code  below  or  
search  directly  for  “MIT  AI2  Companion”  on  the  Google  Play  Store,  
hBps://play.google.com/store.    
 

NOTE:  If  you  do  not  have  an  android  phone,  or  if  you  are  unable  to  download  the  Companion  app,  you  can  sMll  use  App  Inventor  using  
an  emulator.  Visit:  hBp://appinventor.mit.edu/explore/ai2/setup.html  and  follow  the  instrucMons  under  OpMon  2.  
 Step  9  con<nued
To  connect  to  the  AI2   A  QR  code  and  6-­‐leBer  
Companion  app,  first  choose  “AI   code  will  pop  up.  
Companion”  from  the  “Connect”  
drop  down  menu  in  the  App  
Inventor  site.    
 
Step  9  con<nued:  Open  the  Companion  app
Open  the  AI2  Companion  app.  You  can  then  either  input  the  6-­‐leBer  
code  or  scan  the  QR  code  to  connect.    
 
 Step  10:  More  coding!
Okay,  great,  we  have  balloons  that  appear  randomly  and  fall  to  the  boBom  of  the  phone,  but  we  
would  like  for  something  to  happen  when  we  touch  them.  

1.  Click  on  ImageSprite1  and  drag  out  a  block  that  looks  like  this:  
2.  Also  under  ImageSprite1,  click  on  a  block  that  looks  like  this:  
3.  Duplicate  it  twice  to  get  three  copies,  and  click  them  together  to  form  a  stack:  
 
 Step  10  con<nued
When  each  balloon  is  touched,  we  want  to  return  it  to  its  original  state.  This  means  reselng  its  Y,  
Visible,  and  Enabled  properMes.  
1.  Grab  the  stack  of  blocks  you  made  in  the  last  slide.  Change  the  Y  of  one  block  to  Visible  using  
the  dropdown  menu,  and  the  other  Y  to  Enabled.  
2.  Set  ImageSprite1.Y  to  10,  and  ImageSprite1.Visible  and  ImageSprite1.Enabled  to  False.  
3.  Click  this  stack  into  the  “when  ImageSprite1.Touched”  block.  

Your  final  result  should  look  like  this:  

 Step  10  con<nued
The  app  should  do  the  same  thing  when  ImageSprite2  or  ImageSprite3  are  touched.  That  means  we  
can  reuse  the  same  stack  of  blocks  and  just  change  the  sprite  name.  

1.  Duplicate  the  when  ImageSprite1.Touched  group  of  blocks  twice  (to  get  three  copies)  

2.  For  one  of  the  group  of  blocks,  change  all  menMon  of  “ImageSprite1”  to  “ImageSprite2”  

3.  For  the  other,  change  all  menMon  of  “ImageSprite1”  to  “ImageSprite3”  
The  code  you  have  just  added  should  look  like  this:
 Step  11:  Tes<ng  and  debugging!
Awesome!  You’re  all  done  coding  your  app.  Open  the  App  Inventor  
Companion  app  and  make  sure  everything  is  working  properly.  
Remember,  your  app  should:  
•  Reveal  a  new  balloon  at  the  top  of  the  canvas  every  half  a  second  
•  Have  that  balloon  drop  to  the  floor  
•  Remove  the  balloon  if  the  user  clicks  on  it  

If  you  want  to  keep  

building,  check  out  ways  
to  extend  this  app  in  
Balloon  Pop  Part  2!  
 Thanks  for  coding  with  us!  
You’ve  done  a  great  job.  Check  
out  more  tutorials  at  
hBp://appinventor.mit.edu/
explore/hour-­‐of-­‐code.html