{"id":5387,"date":"2024-12-27T16:23:37","date_gmt":"2024-12-27T16:23:37","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5387"},"modified":"2026-08-28T16:35:28","modified_gmt":"2026-08-28T16:35:28","slug":"balloon-pop-game-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/balloon-pop-game-in-mit-app-inventor\/","title":{"rendered":"Best Balloon Pop Game in MIT App Inventor"},"content":{"rendered":"\n<p class=\"has-medium-font-size wp-block-paragraph\">Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/1_snake20game.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Open up MIT App Inventor to start our Balloon Pop Game in MIT App Inventor project.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Start a new project. Call it BalloonPopGame.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Make screen orientation: portrait.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Upload media for balloon image, balloon pop sound, background music, and background image. Following are the links for this media:<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Balloon:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"https:\/\/www.freepik.com\/free-vector\/cute-colorful-decorative-balloons_2271294.htm\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freepik.com\/free-vector\/cute-colorful-decorative-balloons_2271294.htm<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Background:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"https:\/\/www.freepik.com\/free-vector\/park-outdoor-scene-with-flower-field-blank-meadow_16845812.htm\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freepik.com\/free-vector\/park-outdoor-scene-with-flower-field-blank-meadow_16845812.htm<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Balloon pop sound:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"https:\/\/pixabay.com\/sound-effects\/search\/balloon\" target=\"_blank\" rel=\"noopener\">https:\/\/pixabay.com\/sound-effects\/search\/balloon<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Background Music:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"https:\/\/incompetech.com\/music\/royalty-free\/index.html?isrc=usuan1400011\" target=\"_blank\" rel=\"noopener\">https:\/\/incompetech.com\/music\/royalty-free\/index.html?isrc=usuan1400011<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Give credit to the background music in the following away in your MIT App Inventor Balloon Pop Game if you publish it:<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Monkeys Spinning Monkeys Kevin MacLeod (incompetech.com)<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Licensed under Creative Commons: By Attribution 3.0 License<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"http:\/\/creativecommons.org\/licenses\/by\/3.0\/\" target=\"_blank\" rel=\"noopener\"><strong>http:\/\/creativecommons.org\/licenses\/by\/3.0\/<\/strong><\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Drag and drop a canvas component from the Drawing and Animation palette onto the viewer.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Make the background image the picture that we uploaded in media for background.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Make height 80% and width fill parent.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Drag and drop an image sprite component from the Drawing and Animation palette onto the canvas. Rename it to balloonSprite. These are the balloons that will be appearing in the MIT App Inventor balloon pop game.  Make height: 167 pixels and width: 75 pixels.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Choose the uploaded balloon image as the picture.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Keep it enabled. Make heading 90, which means that it will move towards the top of the screen.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">It is very important that you uncheck the&nbsp;<strong>rotates<\/strong>&nbsp;checkbox. And, we will change the speed in our code.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Select the balloonSprite and press&nbsp;<strong>Ctrl + C and Ctrl+ V<\/strong>&nbsp;on the keyboard for Windows OR&nbsp;&nbsp;<strong>Command + C and Command + V<\/strong>&nbsp;on the keyboard for MacOS. Drag the balloon to a new position. We will give it the actual position in the code.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Do it as many times as you want. I believe 5-6 is a good number.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Drag and drop a horizontal arrangement below the canvas.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Make align horizontal and align vertical both center.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Drag and drop a label inside this horizontal arrangement. Rename it to scoreLbl. Make font bold and font size 20<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Change text to Score: 0.&nbsp;<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Change text to Start.&nbsp;<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">The screen design is done for the MIT App Inventor Balloon pop game so let\u2019s go to the blocks section.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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\u2019t need to write the \u201cpop\u201d code for each balloon separately.&nbsp;<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Don\u2019t 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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/uRHJuTvWYLocEuVv20XHJOeJrSuhAX6Vy1kX1e4tPGKks8RbQVsOvpdyfNdRPvgAkEghHIAJgTD7bDd1lwkKUDaqhnrCBI__qkYWR8vlTMYeV9PkPKr7GviSiO8EJvwMfnD7icDFnDDirOd_cfk1I-g.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">When the screen is initialized, we have to start background music and add the balloon sprites to our balloonList.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/pPunw0_t4A5NYy3bga5n_X82gLsbdmjotIKD6elvGUmLk_Kqz5CmP-mMfASwAC3oop9se7KZkzeXOGw1ucSGRhuxf7y92FGJLAB6R7Sn9kxxmZgLP4fK3Y8yyXMnJ4JjgCvwdX3LdmCzjG3OyRoeB3M.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/IpKra3LkXmpoSRqeA5Y-ZMULFAvstAsQEWFTNUwh0SSsG0sk5zauJ8ZUnx5HoR3PDoZ8x3xOHIU4YB4T4NCCVAZOA7qhl2reT4_ZNE8MdkBe4jwTmYziwBQqG9woPgko_71-_ob3bz8Z8U2yR19ta24.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">So, make a custom procedure where the input is a balloon sprite.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Give it a random X position between 10 and (canvas.width-10)<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Give it a Y position of canvas.height + 150<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">And give it a random speed between 2 and 5.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/ptUh1rHjv2GSkUsFClZ5bSqTPHUfKnleLKDj6ehnqpxsB6ADn-jz_s_fB7lJKJK3zq_InjR6yzhj8qzJ5yvIKQRS2tqLrhseB8Un5SvzYSC-xQeMdZHqDHUdNPrf9dH58JS9tBamHH_s6U7S0-AGY-k.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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&nbsp;<strong>For each item<\/strong>&nbsp;block from&nbsp;<strong>Control<\/strong>&nbsp;and call the custom procedure for each item which is actually a balloon imageSprite.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/J0Om0exCP5NNFE1RISciQ4ZHmrY13oGE2qxrkgRviCCkQMDTveIwKUOKa6A6uQByEMEt-0cY7VXuMRnVYh4sqNiUyFlXNnKriElWJWKjkrIN-e6JUKwuqK-PVlTUm8ksLvf3JamIqq3O7OvvO9OQSA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Now, you will see the further power of abstraction. If we hadn\u2019t 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&nbsp;<strong>when any imagesprite<\/strong>&nbsp;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)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/SGRx0wtgB1JfTBUe0cNpqNqCj3Z-F2MhVlZ6z8W9pt3lKSwrkdRn2w3UVlkQbgdZwap976cJYKH82N3vc6425TorEEfg89QCre4MmubUTUG9IE3x6Bx-LL-NU9jJq_E-a1TxlUL81wFCehWW_TreKGY.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/6Bom8_b7E_GcJQq_iTaxiVe8c3C4uFkBdNIAPY6U_uyPGX46HQgB_uLV_cfkHT8oZDWTatEbpsitO99Din_Lko3zmbAZbj0FNmbgANRi02t_W-gmxmM4nnczM64N6akvvJNH0lpfQDXiTQqnf4YgqHk.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">And this cute and easy balloon pop game in MIT App Inventor is done.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">I hope you liked this tutorial.&nbsp;<strong>Happy Coding!<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">If you like my tutorials, please consider supporting me:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/obsidiansoft.gumroad.com\/coffee\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"196\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1.png\" alt=\"\" class=\"wp-image-5381\" style=\"width:258px;height:auto\" srcset=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1.png 372w, https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1-300x158.png 300w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">You can also have a look at the video tutorial for this Balloon Pop Game in MIT App Inventor:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Balloon Pop Game in MIT App Inventor | MIT App Inventor Balloon Pop Game #appinventor #poptheballoon\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/clLq7G2xKBQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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\u2019t miss any of the great projects I have planned for you.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><a href=\"https:\/\/www.youtube.com\/c\/obsidiansofteducation\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/c\/obsidiansofteducation<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Please like my social media pages for more educational resources and tips.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Facebook:<a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.facebook.com\/ObsidianSoft\/<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Instagram:<a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.instagram.com\/obsidiansoftapps\/<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Pinterest:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-pinterest wp-block-embed-pinterest\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oceanwp-oembed-wrap clr\"><iframe loading=\"lazy\" title=\"Obsidian Soft\" src=\"https:\/\/assets.pinterest.com\/ext\/embed.html?grid=obsidiansoft&#038;src=oembed\" height=\"900\" width=\"450\" frameborder=\"0\" scrolling=\"no\" ><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">For links to free educational apps, have a look at the&nbsp;<a href=\"https:\/\/obsidiansofteducation.com\/index.php\/mobile-apps\/\">educational apps page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 to start our Balloon Pop Game in MIT App Inventor project. Start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5387","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/comments?post=5387"}],"version-history":[{"count":3,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5387\/revisions"}],"predecessor-version":[{"id":7072,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5387\/revisions\/7072"}],"wp:attachment":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/media?parent=5387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}