Hello friends,
Welcome to Obsidian Soft. As Christmas is close, I thought that I should teach you a festive game in which we have a sack and we have to catch gifts falling from the sky. We also have to avoid the coals.
So, let’s begin.
Open up MIT App Inventor and start a new project. Name it “GiftCatcherGame”.
Upload media by selecting and dragging files onto the media section. You need an optional background image, a picture of an open sack, a gift image, a coal image, optional background music, a success sound effect, and a fail sound effect.
Resources used in this project:
Background Image: https://www.freepik.com/free-vector/realistic-winter-instagram-stories-collection_33745192.htm
Background Music: Up on a Housetop Kevin MacLeod (incompetech.com) Licensed under Creative Commons: By Attribution 3.0 License http://creativecommons.org/licenses/by/3.0/
Success sound: https://pixabay.com/users/freesound_community-46691455/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=6297 Fail sound: https://pixabay.com/users/universfield-28281460/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=144746
Coal Image: https://www.freepik.com/free-vector/coal-icons-collection_1065769.htm
Santa sack and gifts: https://www.freepik.com/free-vector/gift-boxes-christmas-bag_33620988.htm
Don’t use huge images. I have edited the coal and gift image to be not more than 50 pixels in height and width and the sack is double the size around 100 pixels in height.
In screen1’s properties, make the screen orientation portrait. Turn off the status bar.
Drag and drop a Canvas component onto the viewer from the Drawing and Animation Palette. Make background the image that I just uploaded. Make font size: 35. Make height 80% and width: fill parent.
Drag and drop an image sprite from the Drawing and Animation palette onto the canvas. Rename to sackSprite.
Change its picture to the uploaded sack.png.
Drag another image sprite onto the canvas. Rename to gift1. Change its picture to the gift.png. Make heading 270 so that its direction is down. Make sure to turn off the rotates checkbox. Select the gift component and duplicate it by pressing Ctrl + C & Ctrl + V on the keyboard on Windows OR Command + C & Command + V on the keyboard for MacOS. I will just add two gifts and one coal. So, duplicate the gift again but rename it to coal and change its picture to coal.png.
From the Layout palette, drag and drop a horizontal arrangement below the canvas. In its properties, make align horizontal and align vertical both center. Make width: fill parent and height: 15%
Drag a label from the User interface palette onto this arrangement. Rename to scoreLbl. Make font bold, font size 20, and change the text to “Score: 0”. Drag a button on the right of this label. Rename to startBtn. Change the background color to red. Make the font bold, font size 20, change the text to Restart, and make the font color white.
From sensors drag an Accelerometer Sensor onto the viewer.
Again, from the sensors, drag a Clock sensor onto the viewer. Turn off timer always fires and timer enabled checkboxes and change the interval to 30000 which means 30 seconds. This is how long the game will run during which we have to catch as many gifts as possible.
You can customize it to a shorter or longer time. Remember that the interval is in milliseconds.
Add a player from the media. Make it loop and change the source to the background music. Make the volume low around 20.
Add a sound component from the media. Rename to successSound. And update its source.
Add another sound component from the media. Rename to failSound. And update its source.
The Screen design is done so let’s go to the blocks section.
Make a global variable for the score.
When the screen is initialized, we need to put the sack in the middle of the screen toward the bottom.
Our sack moves right when the phone is tilted right and vice versa. For this, we will use the Accelerometer’s acceleration changed event.
If xAccel is greater than 0.8, we will move left by 10 pixels. However, we will check if the new move will move it out of the canvas, so in that case, we will just make sackSprite’s X=0.
Similarly, if xAccel is less than -0.8, we move right, but we check if we are going outside the canvas by comparing it with the canvas’s width. If yes, then we will just make the sack’s X = canvas width.
Now, let’s make a procedure for our gift and coal sprites. This will give a random x and y=0 i.e. top of the canvas position to all our falling sprites and make their speed random between 3 and 6 and make them visible.
Next, we will make a reset procedure that will be called not only when game is started but whenever the restartBtn is pressed.
In it, we will give a use our custom random position procedure on all our falling sprites i.e. all items in our image sprite list which is not a sack.
We will reset the score to 0. Update the scoreLbl accordingly. Enable our 30 seconds timer. Make the sack visible as it might be invisible after game over. Clear the canvas and start the music.
Remember to call this resetGame procedure from both the screen initialized event and restartBtn click event.
Now, what happens when our sprites fall and touch the sack? If they are gifts, we will play the success sound and increase score, and in the other case, we will decrease the score and play the fail sound. This will all happen in sackSprite’s CollidedWith event. We also have to give a new position to the caught sprite by calling our custom random procedure on it.
In the end, we update the scoreLbl with the new score.
What happens when our falling sprites touch the bottom edge? The bottom edge means -1 and we also check that the component isn’t the sackSprite. Then, we call the random position procedure for it so that it again starts falling from the top.
Last but not the least, our game over condition i.e. when the timer fires for our 30 seconds clock sensor.
We disable the clock. We make all our sprites invisible and make their speed 0. And in the end, we write on the canvas the score. We also stop the player.
So, this is done. Have fun coding this game and playing this game with friends.
I hope you liked this tutorial. You can also have a look at the full video tutorial on my youtube channel:
Please like my videos and share it 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.
https://www.youtube.com/c/obsidiansofteducation
Please like my Facebook page and Instagram page for more educational resources and tips.
Facebook: https://www.facebook.com/ObsidianSoft/
Instagram: https://www.instagram.com/obsidiansoftapps/
Pinterest: https://www.pinterest.com/obsidiansoft/
For links to free educational apps, have a look at the educational apps page