Here is a short walk through video of the Space Invaders Shooting Game, made with ScratchJr on the iPad:
The full tutorial on how to make this is below, however you may also want to download and print this pdf ‘cheat’ sheet to help you:
I have also made a series of quick tip videos for using ScratchJr which might be of help:
How to create & code a basic joypad (up, down, left, right) in under 2 minutes
How to create & code an advanced joypad (jumping & shooting) in under 4 minutes
How to create and code a countdown timer in ScratchJr in under 1 minute
How to rename, save, share via email & airdrop a ScratchJr file in under 1min
Please email me via the contact details at the bottom of the page if you would like me to send you the ScratchJr file for this game – WordPress will not let me upload it here 🙂
Here is the full, step by step, click by click following along video tutorial which shows you everything you need to do to make this Space Invaders Shooting Game on the iPad with ScratchJr.
Video Transcript:
Coming Intro
0:00 [Music]
0:05[Applause] [Music] [Applause] [Music]
0:12 hello and welcome back in this video I’m going to take you step by step Click by click and show you everything you need
0:18 to do to create a Space Invaders game using scratch Jr on your tablet or phone
0:25 we’re going to create a custom background we’re going to build an army of aliens and code them them so they
0:30 move together and descend down onto Earth we’re going to create a rocket that fires a laser bolt we’re going to
0:35 create a joyad that moves the rocket left and right and also shoots this laser bolt we’re going to build a
0:40 scoreboard that also updates every time that your laser bolt hits an alien we’re
0:45 also going to create two end screens one if you’re successfully able to defend
0:51 the Earth and destroy all the aliens and a second one if unfortunately the aliens
0:57 land on Earth all you need to achieve any of this is the free scratch Junior app on either your phone or tablet toWhat you need and how o get the best from this video
1:04 get the best results from this video follow along on either a TV tablet phone or any screen which you can access
1:10 YouTube and pause after each step I highly recommend you go through this video first step by step and actually
1:16 make the game yourself then watch the video again with the child you’re teaching this will make it easier for you to guide them cuz you’ll be familiar
1:23 with the steps this video is 100% child friendly with no band language or inappropriateness I will be sharing this
1:28 actual video with the parents carers and children in my class if you do need any extra help or have any questions please
1:35 leave a comment below or VI the contact details on my website email me and I will answer you as quickly as I can okay
1:42 let’s get started so let’s open up scratch on our iPad create a new project
1:47 and let’s delete kitten so that we’re starting with a blank page the first thing weHow to create a custom background
1:54 want to do is create our background so we go to the background button go to the
1:59 blank op option and press the paint option so that we can create our own so
2:04 basically what we want here is a black background so we’ve selected black cre
2:10 press the paint pot button there for fill and fill the background black so
2:16 that’s going to be essentially space we want a section at the bottom where we can add our joy pad and our scoreboard
2:22 so what I’m going to do is I’m going to change to a white color select the create square or rectangle function
2:29 there go three squares from the bottom
2:34 and start in the corner drag it all the way across and all the way down to the very bottom of the screen and let go
2:40 then I’m going to fill that in white and that should be enough space for us press the tick button and there is our space
2:48 background with a white strip at the bottom for us to add our joyad scoreboard and anything else we want to
2:54 add next we’re going to create our aliens so we’re going to go to the plus character button there there we’re goingHow to create an alien
3:00 to scroll down and we’re going to find our friend Tac now we’re going to select
3:06 Tac and then we’re going to press the paint option and we’re going to modify
3:11 Tac so they look a little bit more like an alien so I want to go for the classic green alien so I have selected the paint
3:18 pot fill function there I’m going to go for that green there and I’m just going to press on
3:26tack so that they turn green I’m now going to press the tick button and there is Tac I’d like to make Tac a bit
3:33 smaller so I’m go to purple category select the shrink block and
3:40 press it twice now I want to put the Grid on so I want to have 10 aliens so
3:48 I’m going to move tack to the middle of the screen next
3:56 what I’m going to do is add some more aliens so I got back to the plus button
4:02 I’m going to click once again on the modified Tac press the tick button and
4:07 there you go I’m going to again use the shrink block press it twice and move
4:14 that one next to the first tack that we did I’m going to continue doing this
4:21 until I have 10 aliens
4:35 now you’ve got your 10 aliens you might want to try to line them up um as best
4:40 you can the idea is that they’re going to move as a unit so if you can get them
4:47 as in line as you can that’ll be really really useful now we’ve added all our aliens and they’re as in line as we wantHow to code the aliens to move down the screen together
4:53 them to be we’re going to start to code them so scroll back up to the first
4:58 alien and we’re going to start to drag some blocks down to build the code so
5:03 first of all I’m going to go to the green flag block I’m going to move this
5:08 shrink block out of the way for now we don’t really need it next I’m going to go to the orange category and get a
5:16 weight block how we want the aliens to move is we want them to wait move across right wait go down wait and then left so
5:25 they’re going to progressively get closer and closer to the bottom of the screen so I go to the blue category
5:32 select a right block then again select the white
5:37 block back to the blue category because now we want them to go
5:45 down then we’re going to go back to the weight block again and then we want them to go back
5:52 to the left and we want this pattern of movement to go on forever so we’re going
5:59 to use the continue forever block also what we want the aliens to do
6:06 and we’re preparing a little bit for the future now is we want them to disappear when they are bumped by the laser when
6:13 it hits them so what we’re also going to do is go to the yellow category select
6:18 the start on bump block go to the purple category and
6:24 select the disappear Block in addition to this we do want the score Ballard to
6:29 move even if you don’t add a scoreboard initially you may want to in the future so it’s worth building the code so it’s
6:35 ready so what I’m going to do is go to the um yellow category and select the send message
6:44 block and we’re going to leave it as orange because that’s going to signal to the scoreboard to increase by one when
6:52the alien is hit by the laser so we’ve created the code now and now we can copy
6:58it across onto the other aliens cuz they’re all going to do exactly the same and have exactly the same code so what
7:03we do is we click onto the um code hard press on it drag it up and then let it
7:10go same with the second piece of code we’ve made so then when I go to the second alien you can see they’ve got
7:17exactly the same code the hide block is hiding a little bit behind there sorry the resized block is hiding a little bit
7:23there and we’re going to do the same again so to the third alien hard press and drag the code on to
7:30there and there you can see it once again so again hard press to the full
7:36alen and we just keep going I like to click on the alien I’ve
7:43done to make sure it’s copied across properly and we haven’t missed anything
8:10so we’ve added code to all 10 aliens okay now let’s test the aliens and see if they move correctly together as a
8:17unit so I’m going to press the green flag and you can see we’ve missed adding
8:26the code to one of the aliens the good news is that the the bump function is
8:31working and the um aliens are disappearing when they touch something so that’s great so let’s stop that reset
8:38who’s this guy okay so there’s the guy that doesn’t have any code added to them so let’s drag that onto there fantastic
8:48let’s check they’ve got their code brilliant so let’s try that again they all should move now when I press the green
8:54flag they wait down cross fantastic and you can see on screen the blocks are
9:02highlighting as they are being activated so that’s a really nice way of understanding what the blocks are doing
9:07and you can see it working real time that is pretty cool next we’re going to
9:12add our rocket so let’s go to the plus character function again scroll down
9:18let’s find the rocket select it and then press the tick
9:23button fantastic now it’s really really big so let’s make that smaller um get the shrink block again
9:31and notice how the aliens are moving when they’re touching the rocket let’s go one more oh is that a
9:38bit small a bit small let’s make that bigger there you go fantastic so now let’s get rid of these we’ve got our
9:45rocket in position so next we have to code the Rockets but before we do that I just want to make the aliens appear
9:51again so I’m just going to just going to hit the reset button there so we’re now going to code the rocket we want theHow to code the rocket to move
9:57rocket to do two things move left and move right so we’re going to go to our yellow category we’re going to select
10:03the start on message block and we’re going to select one to
10:09be green and the second one to be
10:15blue we’re then going to add the movement we want the rocket to make when it receives the green or blue message so
10:23for green we want it to move left and for blue we want it to move right
10:31now we need to start to make our joyad that will allow us to press a button that sends a message to the rocket toHow to create and code a joypad and buttons in ScratchJr to make characters move
10:38move so we need two buttons first of all a green one and a blue one so we go to
10:43our add character button we’ll go to our blank character go to the paint option
10:49and we’re going to draw ourselves a button I like Square buttons so I’m going to select the green option first
10:58of all and the
11:06square so there’s our green square I’m going to fill that now by selecting The
11:12Fill option and press on I’m then going to press the tick button and there it is
11:18I’m going to bring this down to here in our joyad area so there’s the green
11:25button that’s going to be our move left button and I want to create our blue move right button now as well so again I
11:32go to the plus option I’m going to click on the previous green button we’ve made
11:38click on the paint option go to Blue fill that with blue and then press the
11:44tick this ensures that both buttons are the same size not 100% necessary but
11:51makes it look good now we need to Cove these buttons so I’m going to go to the green button first of all and what I
11:56want the green button to do is when I tap it I want it to
12:02send send a green message to the
12:08rocket this green message if you remember when received by the rocket
12:14will make the rocket move left next I’m going to go to the Blue Button exactly
12:19the same select the start on press button and then select the send message
12:27and make sure that that is blue so when I press the blue button it
12:34will send a blue message to the rocket and that blue message will make the rocket move
12:40right so let’s test
12:47it fantastic and there’s a good point there be careful when you’re pressing your
12:53buttons cuz they do move similarly if you hard press on them you could delete
12:59one and lose all your code and that’s really really upsetting so let’s read
13:10that and recode it there we go so we’ve coded our left
13:17button and our right move button on our joyad next we need to add to our joyad aHow to create and code the button to fire the laser
13:22button that allows us to fire the laser so again I’m going to go to the plus character button I’m going to select the
13:29same button previously but edit it in the paint function and I’m going to
13:34change it to a red color using the F option I’m going to press the tick button and I’m going to move this to the
13:41left hand side of the screen and that’s going to be our fire laser button
13:46similar to how we coded the left button and the right move button I need to add code to this so I’m going to again go to
13:53the yellow category press the start on touch block
13:59select the send message block and I’m going to change that to
14:05Red next we need to create a character that represents the laser so I’m goingHow to create and code the laser bolt
14:10to go to my plus character button again once again to the blank character option
14:17and press the paint now I’m going to draw myself a laser bolt or beam
14:22whatever you prefer I’m going to make mine yellow I’m going to use the free draw option
14:30and I’m going to make it look a bit like that I’m now going to fill it and there we go I’m going to press the tick button
14:39and there is my laser beam or bolt it’s really important that we make this as
14:45small as we can and make sure it’s just wide enough to be realistic in
14:54being shot from the rocket so that’s perfect now we need to to code the laser
14:59beam or laser bolt so first things first we’re going to code so that when it
15:05receives the red message it firstly
15:13appears then what we want it to do is to move up towards the aliens now I’m going
15:20to turn the Grid on so we can see how far we want it to go so it’s currently
15:26at 9 the top of the screen on the vertical axis is 15 so if we ask it to
15:33move five then it will stay on the screen we then want
15:40the beam or bolt to disappear and then we need to reset it
15:47back in its original position so we’re going to use a down arrow that is also
15:52five so it goes back to its original
15:57position so what we can do is give that a
16:05test fantastic so you can see that it appears when we press the red
16:10button moves forward five disappears then comes back fantastic and once again
16:16we’ve tested the aliens there once they get touched they disappear so let’s
16:22reset and add the next part of the code of the laser beam because we want the laser beam to look like it’s coming out
16:29of the rocket when the red button is pressed it’s really important that we keep the laser beam or laser bolt in
16:37line with the rocket at all times so what we want to make sure it does it reacts exactly the same as the rocket
16:43does to the blue or green button being pressed therefore we go back to the
16:49yellow category again and we select
16:55two act on message blocks one that is green and turn one to blue and then we
17:02go to our movement blocks and make sure that they are set up exactly the same as
17:09the rocket so what we want to happen is when we press the green button both the
17:15rocket and the laser bolt move left and when we press the blue button both the
17:21rocket and the laser beam move right let’s give it a test fantastic
17:30fantastic so when we press the buttons green or blue both the rocket
17:35and the laser beam or laser bolt behaving exactly the same way fantastic now we’ve successfully made all the
17:41elements to make a basic space invader game so let’s give it a test so I’m going to turn the grid lines off let’s
17:48go full screen press the green flag to start the aliens and then we’re going to be moving around our rocket and shooting
17:56with our laser so let’s go
18:07fantastic so let’s stop it there go back to our small screen and reset couple of
18:13modifications we can make we can move the rocket down slightly and the laser beam down
18:20slightly so that there’s a little bit more space we don’t want the rocket and
18:26the laser beam touching because we’re going to add an end of
18:31game screen which will involve the rocket being touched and that resulting
18:37in US changing screens now we’re going to add a scoreboard and if you remember if we go back to the code on ourHow to create and code a scoreboard in ScratchJr
18:44aliens now they’ve all got an orange send message Block in their code so what
18:49we want to happen is when that is received the score increases so first
18:55I’m going to create the representation of the score that goes on the scoreboard so I’m going to go to my add text
19:01function I’m going to go to my emoji on my keyboard and I’m going to go and find
19:09something that’s appropriate you can choose whatever you want I like a green
19:15circle CU I think it sort of represents the alien so I’m going to so I’m going to add 10 circles with a space in
19:24between them that’s two
19:40now that’s too big so I’m going to go back into there and select the size let’s see the next size down what does
19:47that do still a little big
19:53perfect perfect and what’s nice about using
19:59reset that a little bit what’s nice about using the text for this is it’s not an object so if anything touches it
20:06it doesn’t interfere with any of the other code what I need to add now is something to point to or represent how
20:13many aliens have been hit so I’m going to go to the plus character function
20:19again again to the blank one and use the paint function and I’m going to create an arrow so I’m going to use Black start
20:27with triangle then use the rectangle option that looks in the
20:35middle then go to my fill option and there is my arrow I’m going to press sck
20:41to add it and bring it down to here I’m going to make it a lot
20:49smaller
20:54perfect there it is so now I want to code this Arrow so
21:00I’ll go to my y The yellow section go to my receive message
21:06function go to the move category and every time it receives an orange letter
21:12it will move across one the orange letter will be sent once
21:18one of the aliens is hit and disappears let’s just test that now
21:30fantastic so if we just stop that a second three aliens have been touched and the arrow has moved along three nextHow to create and code a ‘victory’ end of screen when 10 aliens are destroyed
21:37we want to code a change of screen when the arrow gets to the 10th green circle
21:43so first of all let’s reset and there’s everything back in its original position what I want to do is I
21:50want to code the arrow so that when it is bumped to start on bump it moves to a
21:59second screen so let’s add our second screen here let’s
22:04delete cat let’s
22:11add the previous background we’ve
22:16made and now let’s add a
22:23victory message victory
22:30seems like a good idea let’s make that really
22:35big um I quite like the green what does that look like yeah pretty cool and then
22:42what we can do is go to our car add character option again the blank one to
22:50paint let’s create a circle and we can have a photo of
22:55ourselves or me in this case celebrating so let’s press that onto
23:03there there we go happy Victory face let’s make that a bit bigger CU
23:11we’re celebrating and there we go fantastic so
23:18we go back to our first screen go to our Arrow
23:24character and we’ve already got the start on bump block there let’s add the
23:29change screen option there so when the arrow
23:34bumps it will change screens to Victory signaling that we’ve shot 10
23:42aliens we now need an object in there for it to bump against it may bump against the green button there but I
23:49think we can be a little bit more sophisticated than that so let’s go to here again that’s once more go to our
23:56buttons that we’ve already used that let’s edit them them in the paint option
24:02let’s make it if we make it white and there it is and smaller we can
24:09then move it just below that 10th
24:17one and it should bump into the arrow to
24:23signal that the program needs to change to the victory screen so let’s try so
24:29green to
24:50start yes it worked fantastic so let’s go back to our original screen reset
24:57everything and there we go the final thing we want to do is add a screen if unfortunately the aliens do land so howHow to create and code an ‘aliens have landed’ screen
25:05are we going to do this what we can do is if the rocket is touched by one of
25:12the aliens that will trigger the program to switch to the aliens of landed screen
25:18this is also the reason why we have the laser bolt in front of the rocket and
25:24not behind it so let’s go to our rocket
25:32let’s add a start on bump block we now
25:38add a third screen we’ll delete the
25:43cats again let’s use our background we’ve already used fantastic and let’s
25:50add some text
25:55the aliens
26:00have
26:07landed again let’s turn that green does that look
26:14like fantastic so let’s go back to our original screen there to our rocket
26:20code change screen okay let’s give that a test
26:32here they
26:48come fantastic so when the rocket touched the alien the Allies landed essentially the game was over and we
26:54switched to this screen fantastic I think it’ll be quite nice if if we add one of the aliens here so let’s do that
27:02let’s uh make them a bit
27:08bigger there we go and let’s add the green flag which you don’t need to press
27:15the green flag but what it means is when we move to the screen it will automatically start and let’s give the
27:22alen some
27:28movement blocks there so they Shuffle around a bit let’s give that a test
27:34amazing look at that happy is anything to be here so let’s reset that go back reset
27:43again let’s go full screen Let’s test
27:57that move across slightly so that the alien actually touches
28:03the
28:10rocket fantastic great
28:16stuff so let’s test it now full screen here we go so green to
28:22start let’s get some of these aliens score balls looking good oh ah
28:29okay so what happened
28:36there so the rocket can you see it’s tail fire touched the button and that
28:46signaled the program to trigger and go to the final screen so what we need to do is move these down
28:54slightly let’s move that one down as well so it’s in line great so let’s try that
28:59again here we go green to start let’s
29:05go let’s move all the way across
29:13fantastic I’m doing well Victory fantastic great
29:21stuff let’s made that small go back to our initial thing and reset just beforeSome things that can go wrong and how to avoid them
29:28we finish just a couple of things to consider and be wary of when doing this so if you do hard press on something
29:36there is an opportunity if you delete it if you delete it you lose all the code there’s no reset from that similarly
29:43just to be aware even in the full screen you can move and hard press on objectsOutro
29:52congratulations and well done on building your Space Invaders game using scratch junr I hope you enjoyed the
29:57process and enjoyed the video please share of make any modifications you make to this game to make it even better if
30:04you need any extra support or help I’ll add a link to my website in the description so that you can access
30:10additional tools including a cheat sheet and the downloadable file once again thanks for your time and I’ll see you
30:16next time bye
Please click here if you are looking for more ScratchJr Tutorials or Projects.