Space Invader Game in MIT App Inventor

Hello friends and welcome to Obsidian Soft.

This tutorial is about making a very cool Space Invader Game in MIT App Inventor. You can have a look at the demo on my YouTube channel.

First of all, we need some nice images for our game to look attractive. I am using the following images and sound effects.

Rocket ship: https://www.clipartmax.com/download/m2i8i8G6m2Z5G6b1_juegos-de-ni%C3%B1os-cute-rocket-ship-clipart/ Space background: https://unsplash.com/wallpapers/nature/space UFO/Alien Ship: https://www.clipartmax.com/middle/m2i8G6m2A0i8A0Z5_cartoon-ufo/ Laser sound: https://pixabay.com/sound-effects/search/laser/ Explosion Image: https://toppng.com/show_download/168966/explosion-png-hd-transparent-explosion-hd-explosion-clipart-transparent/large

Explosion sound: https://pixabay.com/sound-effects/search/explosion/

Download the above assets and open up MIT App Inventor.

Create a new project Space Invader. In the media section, upload rocket ship, UFO, explosion, and space background images. Also, upload the two sound effects: laser and explosion sound.

For Screen1 properties, change the title to Space Invaders. Set orientation to portrait mode.

Drag and drop a canvas from Drawing and Animation onto the viewer. Make its width fill parent and height 80%. Make its background the space background image that you uploaded earlier.

Drag and drop two image sprites from Drawing and Animation onto the viewer. Rename one to rocketShipImg and rename the other to alienShipImg.

Set picture property of rocketship image sprite to the rocketship.png and set height to 100 and width to 80 pixels. This looks good for me but if you are using some other rocket ship image, you will have to adjust your height and width accordingly. Similarly, set the picture property of the alien ship to the ufo image and set the height to 90 and width to 120 pixels.

Add another image sprite for explosion. Rename it to explosionImg. Set the source to the uploaded explosion imagethe . Make its width and height 100 pixels. 

Drag and drop a ball sprite from drawing and animation onto canvas. Make the color orange and make radius=8. This will be our bullet so rename it to bulletImg.

Add a clock from the sensor. Set the timer enabled to false and set the timer interval to 1000. This is in milliseconds (ms) so 1000ms means 1 second.

Add one horizontal layout with width fill parent and height 15%. Make the color of the layout green.

Add a score label and another label for containing the actual score. add a reset button. Put empty labels between them for space.

Score Lbl: 20%

Lbl 1: 5%

Score : 20%

Lbl 2: 10%

Button: 35% Rounded, black with green text that says Reset. Rename the button to resetBtn.

From Media, add two sounds for laser and explosion. Rename both sound effects appropriately and link the source to the relevant sound effects that you uploaded earlier.

The screen has been designed so let’s work on the blocks section now.


Our rocket ship is always near the bottom of the canvas. So make sure that it is given the correct position when screen  is initialized.


Next, we want to move the rocket ship anytime the user taps on the canvas anywhere to that position’s x point. But we need to calculate that in terms of rocket ship image sprite because if we just change rocket’s X to getX, rocket will move too half width towards right so we will reduce half of the rocketship’s width so that our rocket goes exactly to the point where we touched.

And we also want to hide our explosion image sprite and show it only when an alien ship is destroyed so hide it too when the screen is initialized. Similarly, our bullet should also be hidden when the game starts so our screen1. Initialize event now looks like this:


There are several features we want our bullet to have in this game. We want it to shoot from the rocket, collide with the alien ship, and be invisible after the collision and before being shot. Also, we want to make sure that the bullet appears again when we shoot from the rocket. 

The first thing is that when we touch the rocket, we want the bullet to start heading toward the alien ship. We will do this by using RocketSprite.Touched event handler. When the rocket is touched, we not only want to set the bullet to be visible, but we also want to set the speed and heading of the bullet. Heading is a value from 0 to 360 that indicates what direction the sprite should be moving towards. 0/360 is to the left, 90 is up, 180 is right, and 270 is down. The speed is measured in pixels/sec.

The last thing we need to program is what happens when the bullet hits the alien ship. We will use the Bullet.CollidedWith event handler. This event is called whenever the bullet collides with another sprite. Since our rocket sprite is locked into a Y at the bottom of the screen, the bullet will never collide with the rocket and only with the alien ship. On collision we want two things to happen. 1. The score should increase by 1. 2. The bullet should become invisible. We could have made a variable for score but as work can be done using a label so there is no need.


Also, we want to make sure that the bullet always starts from the rocketship as it is firing from there. So let's add a move to block to rocketship touched code. Also, play fire/laser sound when the bullet is fired.


You may have noticed that if you miss the alien ship, the bullet moves to the top of the screen and gets stuck there until you try shooting again. To make the bullet disappear when it hits the top edge of our canvas, we need to use the Bullet.EdgeReached event handler.

To continue the game, we need to make the alien ship change its position after being destroyed.

After the bullet collides with the alien ship, let’s play our explosion sound, and hide the alien ship for a while so we need to enable the 1000 ms (1 second) timer clock. And also show the explosion image in place of alien ship.

When the timer goes off, first disable the timer, give a random x position to the alien ship, and then make the alien ship visible and make the explosion invisible.

Also, add code for the reset button to reset the score to 0.


Thank you for reading this tutorial. If you like my work, please support it by buying me a cup of coffee. Just click on the following link:

You can download the AIA file for this project.

SpaceInvaders.aia

You can also watch the video tutorial:

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:
https://www.pinterest.co.uk/obsidiansoft/_created/
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