Balloon Pop Game in MIT App Inventor

Hello friends and welcome to Obsidian Soft,

In this tutorial, I will teach you how to make a very easy but cute balloon pop game in MIT App Inventor. We will be using image sprites on a canvas.

Open up MIT App Inventor.

Start a new project. Call it BalloonPopGame.

Make screen orientation: portrait.


Upload media for balloon image, balloon pop sound, background music, and background image. Following are the links for this media:

Balloon:

https://www.freepik.com/free-vector/cute-colorful-decorative-balloons_2271294.htm

Background:

https://www.freepik.com/free-vector/park-outdoor-scene-with-flower-field-blank-meadow_16845812.htm

Balloon pop sound:

https://pixabay.com/sound-effects/search/balloon/

Background Music:

https://incompetech.com/music/royalty-free/index.html?isrc=usuan1400011

Give credit to the background music in the following away in your app if you publish it:

Monkeys Spinning Monkeys Kevin MacLeod (incompetech.com)

Licensed under Creative Commons: By Attribution 3.0 License

http://creativecommons.org/licenses/by/3.0/


Drag and drop a canvas component from the Drawing and Animation palette onto the viewer.

Make the background image the picture that we uploaded in media for background.

Make height 80% and width fill parent.

Drag and drop an image sprite component from the Drawing and Animation palette onto the canvas. Rename it to balloonSprite. Make height: 167 pixels and width: 75 pixels.

Choose the uploaded balloon image as the picture.

Keep it enabled. Make heading 90, which means that it will move towards the top of the screen.

It is very important that you uncheck the rotates checkbox. And, we will change the speed in our code.

Select the balloonSprite and press Ctrl + C and Ctrl+ V on the keyboard for Windows OR  Command + C and Command + V on the keyboard for MacOS. Drag the balloon to a new position. We will give it the actual position in the code.

Do it as many times as you want. I believe 5-6 is a good number.

Drag and drop a horizontal arrangement below the canvas.

Make align horizontal and align vertical both center.

Drag and drop a label inside this horizontal arrangement. Rename it to scoreLbl. Make font bold and font size 20

Change text to Score: 0. 

Drag and drop a button next to this label. Rename it to startBtn. Change the background color to orange. Make font bold and font size 20

Change text to Start. 

Drag and drop a sound component from the Media palette onto the viewer. The sound component is for sound effects so choose the balloon pop sound as the source.

Drag and drop a player component from the Media palette onto the viewer. The Player component is for playing longer music files so choose the background music as source. Check the loop checkbox for the player component. This will repeat the music when it ends. 


The screen design is done so let’s go to the blocks section.

Instead of coding the behavior of each balloon separately, we will use abstraction to reduce the amount of code that is repeated for each balloon sprite. Instead of repeating code 5-6 times, abstraction allows us to initialize and set the behavior all at once when the game is started. Also, we don’t need to write the "pop" code for each balloon separately. 

Don’t be overwhelmed. Once you understand abstraction, you can reduce the size of your code substantially and code change will also become easier. For this, we need a global list of balloons. So, make a balloonList and a score variable and initialize the score variable to 0.

When the screen is initialized, we have to start background music and add the balloon sprites to our balloonList.

Now, we need a custom procedure for giving a random position to our balloon towards the bottom of the canvas and also a random speed between 2 and 5. We will use abstraction here and use any component blocks that you can find in the following way:

So, make a custom procedure where the input is a balloon sprite.

Give it a random X position between 10 and (canvas.width-10)

Give it a Y position of canvas.height + 150

And give it a random speed between 2 and 5.

When the start button is clicked, we have to reset the score variable to 0 and make sure that the scoreLbl also shows 0 again. Now, we have to make all our balloon sprites reset too using our custom procedure so use the For each item block from Control and call the custom procedure for each item which is actually a balloon imageSprite.

Now, you will see the further power of abstraction. If we hadn’t been using any component blocks, we would have had to write touched and edge reached code for all our balloon sprites but now we have to do it only once using when any imagesprite event blocks. So, when any image sprite is touched, we play our pop sound effect, optionally vibrate the device for 200 milliseconds, increase the score, update the score on the screen using the scoreLbl and also give a random position to the balloon popped so that it will look as if it actually popped and disappeared (in reality it will just appear at a different place)

Last but not least, we will use when any image sprite edged reached event from Any component to check if the component (balloon) has floated up to the top of the canvas (edge =1) and we will just call our custom random position procedure for that balloon i.e. component.

And this cute and easy balloon pop game is done.

I hope you liked this tutorial. Happy Coding!

If you like my tutorials, consider supporting me by buying me a cup of coffee by pressing the button below:

You can also have a look at the video tutorial for this app:


Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.

Please like my social media pages for more educational resources and tips.
Pinterest:
For links to free educational apps, have a look at the educational apps page

Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more