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.
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.
You can download the AIA file for this project.
You can also watch the video tutorial:
Comments
Post a Comment