Here is a walkthrough video of the game – the step by step tutorial is further down the page.
Here is a downloadable pdf which includes the ScratchJr code blocks for each feature of the game.
Please email me on the contact details at the bottom of the page if you would like me to send you the ScratchJr file for this game – WordPress does not let me upload this file format here 🙂
Here is the step by step tutorial and resources to allow you to create and code your own Fairy Platform Game in ScratchJr on your mobile device.
Video transcript:
Intro
0:00[Music]
0:05[Applause]
0:06[Music]
0:12hello and welcome back in this video I’m
0:15going to take you step by step Click by
0:17click and show you everything you need
0:19to make your own platform game the story
0:22behind this game is that a fairy is
0:24collecting stars in an enchanted forest
0:27to power her magic wand in this video
0:30we’re going to customize the background
0:32we’re going to create a joyad that makes
0:34the fairy move left right and jump left
0:36and right and also move down we’re going
0:38to create stars that are collected and
0:40when they do they make a pop sound and
0:42get bigger we’re going to create an auto
0:45updating scoreboard every time you
0:47collect a star we’re going to create a
0:49countdown timer and when it’s up the
0:51game is over we’re also going to create
0:53two end screens one when you collect all
0:56your stars and a second one when your
0:58time is up all you need to achieve any
1:01of this is the free scratch Junior app
1:03on either your phone or tablet to get
1:05the best results from this video follow
1:07along on either a TV tablet phone or any
1:10screen which you can access YouTube and
1:12pause after each step I highly recommend
1:14you go through this video first step by
1:17step and actually make the game yourself
1:19then watch the video again with the
1:20child you’re teaching this will make it
1:22easier for you to guide them cuz you’ll
1:23be familiar with the steps this video is
1:25100% child friendly with no band
1:27language or inappropriateness I will be
1:29sharing this actual video with the
1:31parents carers and children in my class
1:33if you do need any extra help or have
1:35any questions please leave a comment
1:37below or via the contact details on my
1:39website email me and I will answer you
How to customise a background in ScratchJr.
1:42as quickly as I can okay let’s get
1:43started so the first thing we’re going
1:45to do is open up
1:46scratch and create a new project we’re
1:49going to delete kitten we don’t need
1:52them for this one and first job is to
1:55create the custom background so as our
1:58game is set in an enchanted Forest I’m
2:00going to select the jungle option then
2:03go to paint and we’re going to edit this
2:05slightly so if we take the scissor
2:08option we can start cutting out some of
2:11the bits that maybe we don’t
2:16need then press tick button and there is
2:20our custom background now we do need to
2:22do an extra bit of customization but
2:25first of all I just wanted to turn the
2:26Grid on so I can see how big I need to
2:29make the panel at the bottom of our
2:31background this panel is where we will
2:34house the joyad and in the advanced
2:37version of the game the scoreboard and
2:40the timer now I’m going to create a
2:43panel that goes up to five on the
2:46vertical axis so that’s five squares on
2:48the vertical axis so let’s go back into
2:50our
2:52background click on the one we’ve
2:54selected and already customized go back
2:56to paint and now we can add some extra
2:58customization features
3:00so I’m going to go to the um rectangle
3:03drawing function there I am now going to
3:06count 1 2 3 4 5 so I want to start my
3:09rectangle here go
3:13across and let go now I want to fill
3:17that so I’m going to fill that
3:20white and then press the tick button and
3:23there you can see now we’ve customized
3:25our background to have the Enchanted
3:28Forest what we’re going to create the
3:29top and a panel at the bottom where we
3:31can house our joyad and in the advanced
3:34version of the game our scoreboard and
3:36also our timer next I want to add our
3:38fairy character so I’m going to go to
3:40the plus character button scroll down
3:43and look for the
3:45fairy where are they where are they
3:48where are they there they are press the
3:51tick button and there is our fairy the
3:53next thing we need to do is shrink the
3:55fairy because it’s a bit big at the
3:56moment so I go to the purple um category
4:00go to the shrink shrink option and I
4:02want to shrink that three times I’m
4:05going to put the Grid on because with
4:07this one it’s really important that we
4:08have an understanding of size so there
4:11we go there is our fairy character
4:14shrunk and ready to go next we’re going
How to create and code a joypad in ScratchJr
4:16to create our joyad buttons so I’m going
4:19to go to my r+ character button there
4:22select the blank character and paint
4:24option so we can now create our own I’m
4:27going to select purple cuz that’s going
4:30to be our first button and I’m going to
4:33select the square function and I’m going
4:35to create a
4:40square there we go that’s close enough
4:43now I’m going to select my fill option
4:46and press on it so that we make a purple
4:49button I’m now going to press the tick
4:51and there is our button I’m going to
4:53drag that
4:54down to this area here cuz that’s where
4:57I want our joyad to be the purple button
5:01is going to be our jump left function or
5:04button so I want to create a jump right
5:06button so I’m going to add another
5:09character um this time I’m going to
5:11revisit our purple square that we’ve
5:13just made go to paint and fill it with
5:18green CU I want the jump right button to
5:21be green press this tick button and
5:24there it is I’m just going to drag it
5:25over to here we’re going to organize
5:27these buttons in a moment once we’ve
5:29create them
5:31all next I’m going to add the move left
5:36button so again I’m going to select the
5:37green button we’ve previously made there
5:40I’m going to press the paint option and
5:43I’m going to turn it blue and press tick
5:47there it is and I’m going to create now
5:50a move right button so I’m going to
5:52select the previous button with made
5:54there go to paint and I’m going to make
5:57this one red
5:59reusing the previous buttons means
6:01they’re all the same size just makes it
6:04look a bit neater um finally we need one
6:07more button and that’s going to be the
6:09move down button so again plus character
6:12button select the previous button we’ve
6:14created go to the paint option and this
6:16one’s going to be
6:18yellow and drag that
6:21down okay let’s just tidy up these
6:24buttons so they look a little bit more
6:27in order and it makes a bit more sense
6:32so there we go so we’ve got the move
6:36left button blue one move right button
6:40jump right button jump left button and
6:42the move down button at the bottom now
6:44we’re going to code the buttons so I’m
6:45going to start with the yellow button
6:47and I go to the yellow category I select
6:49the start on tap block and next I’m
6:52going to select the send start message
6:55block and I’m going to change that to
6:57Yellow so we’ve got the yellow button
6:59with the yellow
7:01message I’m then going to copy that
7:04over onto the red
7:06button go to the red button and change
7:09that to Red I’m going to do the same for
7:10the
7:13blue change it to
7:17Blue same with the green start it to
7:20Green scroll down and finally do the
7:25same with the
7:27purple and there are our initial codes
7:30for the
7:33buttons now we’re going to code the
How to code the Fairy to be controlled by the joypad in ScratchJr
7:35fairy so when the buttons are pressed
7:37the fairy moves in a given Direction so
7:39let’s go to the fairy let’s get rid of
7:42that let’s select the yellow category
7:45and now we want to select some message
7:50blocks these message blocks will
7:54translate or receive the message from
7:56the buttons and and execute a given
8:01ction so I like to organize them so
8:03they’re similar to how the actual Joy
8:06pad is set up so that it’s a little bit
8:08easier for me to follow so there are our
8:11left move buttons right move button
8:14downwards moving button and over
8:17here I’m going to add the
8:21purple we’re going to need two
8:23purples I’ll explain why in a second and
8:27two greens
8:31I think it’s really important to
8:32organize your code blocks in a logical
8:35way so it’s easier for you to follow so
8:37let’s start with the blue movement
8:39button so when the blue message is
8:42received I want the fairy to move left
8:47so and only one step so we add that
8:50block and then we want it to end so we
8:52use the end block there similarly when
8:55we want the when the red message is
8:57received we want the fairy
9:00to
9:02move right and again we add the end of
9:05code block there and when the yellow
9:08message is received we want the fairy to
9:11move downwards and again let’s end that
9:15so we’ve got our three basic movements
9:19there now we’re going to code our jump
9:21left and jump right buttons so when the
9:24purple message is received I.E we ask
9:27the fairy to jump left what we want two
9:30things to happen we want the ferry to
9:33jump
9:35up
9:38up and then come
9:43down and also we want the fairy to move
9:50left and stop so when the purple message
9:53is received those two actions will be
9:56triggered at the same time now because
9:58this is a platform game we want the fery
10:01to jump up onto a platform so we want
10:04the fery to go up two and then down one
10:07because it would be going up onto a
10:10platform we also want the fairy to move
10:13across two when it’s jumping so it
10:16essentially moves diagonally we’re going
10:18to do exactly the same now with the
10:20right jump but it will be um moving
10:24right and not left
10:36and again we want the vary to jump up
10:38two and come down one and oh I’ve made a
10:41mistake
10:44there there we go we want to move right
10:47not left and again that’s going to be
10:52two there is our code to translate the
10:56buttons being pressed on the joyad to
10:58the fairy moving so now let’s test it
11:01let’s go full screen and let’s try and
11:03move the fairy across that’s the left
11:05button works the right button Works
11:09let’s try to jump left fantastic jump
11:12right fantastic and downwards excellent
11:14stuff the buttons
11:16work so let’s make that smaller and go
11:18back to our editing screen next we want
How to create the platforms in ScratchJr
11:20to create the platforms where the stars
11:22will be that the fair will jump up to
11:24collect them to do this we’re going to
11:25use the actual font function because we
11:28don’t want the platforms being objects
11:30and triggering any of the other codes so
11:32if they’re font then they’re just there
11:35and they’re not they don’t interfere
11:36with any of the code so I’m going to use
11:38um
11:41this shape here I’m going to do 10 of
11:43them two three four five 6 8 9 10 and
11:48I’m going to do it to the second
11:50smallest size I’ve had a bit of a play
11:52with this and use trial and error and
11:53this seems to be the best
11:56size so again through trial and error I
11:58found eight eight platforms is best to
12:00fit everything in and each platform will
12:03go up
12:04one square on the vertical axis this
12:07reflects the code we’ve added here for
12:10the left and right jump I’m now going to
12:12add another seven platforms to join this
12:14one to make eight I’m going to speed
12:16this up in the
12:21edit okay so that’s all the platforms
12:23made now let’s give it a little test to
12:25see that when the ferry jumps they land
12:28on on the platform in a way that looks
12:32realistic so along we
12:37go think that one can move down and
12:40touch
13:04it’s pretty
13:07good fantastic so let’s reset that now
How to add the stars and code them in ScratchJr
13:11we’re going to add the stars that the
13:12fair is going to collect as they jump
13:14from platform to platform so we’re going
13:16to go to our plus character button
13:19scroll down and find a
13:23star I’m going to choose that one there
13:26and press the tick button and then is
13:29the star fantastic so let me move that
13:32onto the platform now we’re going to
13:34code the star and then we’re going to
13:37add the others so what we want the star
13:39to do is when the fairy touches them we
13:43want the star to make a pop sound and
13:46then we want it to increase in size then
13:50disappear and also at the end just to
13:53prepare us for making our scoreboard if
13:55we choose to add one we’re going to add
13:57a send orange message so let’s go to our
14:00yellow category start on bump we’re then
14:04going to go to our audio category and
14:06add the pop sound next we’re going to go
14:10to the purple category and we’re going
14:13to want the star to increase in size I’m
14:16going to change that to a 10 and then
14:19what we want is we want the star to
14:21disappear finally as I said we’re going
14:23to add the start on send message block
14:26and keep it as orange because we have
14:28not used orange
14:31yet so let’s test it so we’re going to
14:33move the fairy
14:37across get them to jump
14:40up fantastic let’s reset that let’s try
14:43again move
14:47across brilliant so let’s reset and add
14:51some more stars so where is our star
14:54they’re at the bottom I think somewhere
14:56there they are
14:59okay let’s put that onto this
15:01platform let’s add another
15:07one let’s put them onto this
15:11platform and another
15:18one this one another one
15:32another
15:41one two more
15:59there we go now as they all do exactly
How to copy the code for the star to the how stars
16:02the same thing we are just going to add
16:04the same code to all of them and we can
16:07do that by copying so we’ll go to our
16:10first star there it is copy across onto
16:14the second
16:17star then on to the third
16:20star
16:26fourth fifth
16:30the
16:34sixth
16:36seventh and then on the
16:39eighth now we are going to slightly edit
How to code and create a winner’s end screen in ScratchJr
16:42the code for the eighth star because we
16:45want it to change to a different screen
16:47I the winner screen so we’ll remove that
16:49for now let’s add another screen let’s
16:53get rid of cat we’re going to add our
16:56background we’re going to go to the
16:58customized background we previously made
17:00and we’re going to go to our scissors
17:02and we’re going to remove the bottom
17:04panel cuz we don’t need it for this one
17:07so there it is next we’re going to add
17:10our
17:14fairy they will be at the
17:16bottom and we’re going to add a
17:23star now this star we want to make a bit
17:27bigger so we’ll go to our increase
17:32size make that as big as we
17:45can there we go and let’s add some
17:50text
17:53winner so we
17:55can try and get that in the middle of
17:58the
18:00make that a bit
18:03smaller lovely and what we want to do
18:06the start to do is we want when we come
18:09to this
18:10screen we want the star to spin
18:16around great so let’s go back to our
18:20previous screen so our eighth star we’re
18:24going to take away the send message
18:26block and add a change screen block
18:31there and so now what should happen is
18:33when the ferry collects the eighth star
18:36we should move to the winner screen and
18:40that’ll be the end of the game so let’s
18:42go full
18:43screen and let’s try so off we go so we
18:46go
18:53across ah so we’ve we can see there we
18:56accidentally collected two there on the
18:58jump so we need to move that SEC that
19:01third star slightly let’s keep going cuz
19:04we can then test the others as well see
19:05if that happens
19:11again it does but let’s see if we can
19:13get to that winner
19:17screen fantastic so the code Works let’s
19:21stop that and make it small reset go
19:24back to our initial one and reset we
19:26need to move some of these Stars around
19:27so let’s move this St star slightly that
19:30way this
19:32one slightly that way actually it’s put
19:36over
19:37here that should do it let’s also turn
19:40up the
19:41sound so we can hear that pop so let’s
19:43give that another
19:46go off we go
20:05great the Cod still works we’ve just got
20:07to try and move those around a little
20:11bit so let’s actually make these Stars
20:14slightly
20:17higher that should do
20:25it okay let’s try that again one more go
20:46okay let’s stop that let’s reset so this
20:50one’s
20:52still let’s put that there
21:10fantastic brilliant
21:16job and there’s your basic game well
21:19done everyone congratulations you’ve now
21:21made the basic version of the game where
21:23you’ve got a joyad that you’ve coded
21:25that moves the fairy and allows you to
21:26collect the stars on the screen
21:29next let’s look at the advanced version
21:31where we can add a scoreboard and a
21:33countdown timer next let’s make our
Hoot create and code a scoreboard in ScratchJr
21:35scoreboard so first thing we’re going to
21:36do is go into the text function to our
21:39emojis and
21:42find a star fantastic and then what I’m
21:46going to do
21:47is do eight eight of these
21:51two
21:533
21:544 5 6 7 seven eight so we’re going to
22:00create a scoreboard with arrow points to
22:04the Stars every time we collect them
22:06space is are really important and also
22:08we need
22:10it the
22:12second the second smallest font size
22:17that allows it to fit nicely in here and
22:19almost be one square per star so again
22:22this was a bit of trial and eror for me
22:24and I found this is the best size to
22:26make the scoreboard look as effective as
22:28possible next we need to create an arrow
22:30character to point to the stars as we
22:33collect them so I’m going to go to the
22:34add character button go to our blank
22:37character and go to paint I’m going to
22:39use the triangle function and I want it
22:40in Black to create the top of the arrow
22:45and then the rectangle
22:49function don’t quite like that it’s not
22:51quite in the middle let’s try
22:52again that’s better and then I’m going
22:55to fill that
22:58there’s my arrow I press tick and I’m G
23:01to bring it down to here it’s a bit big
23:04at the moment so let’s make it a bit
23:12smaller now we need to code this Arrow
23:14now if you remember previously Our Stars
23:17we added an orange send message block at
23:20the end of it so what we want to add
23:22here is go to our yellow category our
23:25orange don’t that orange received
23:27message and when the message is received
23:30we want the arrow to move along I think
23:33two squares so it points to the
23:35different stars as they
23:38collected let’s move that across so it
23:41starts on zero stars and give it a test
24:00okay I think if we make the Stars
24:02slightly
24:09smaller and
24:12reset see if that makes a difference
24:29that’s better now we need to create our
How to create and code a timer in ScratchJr
24:31timer so this timer is going to be a
24:33countdown timer and when it expires the
24:35game will end and we’ll show a times up
24:38screen so let’s
24:40add a character let’s go to our blank
24:43character and paint we want a circle I’d
24:46like a red
24:48circle so let me make that now fantastic
24:52and let me fill that great now I want
24:56that to go over here
24:59now I want to add an arrow that spins
25:01around like a hand on a clock so I could
25:04use that previous one I’ve already
25:11made let’s make it a bit
25:21smaller now I want to code it so I’m
25:23going to go I’m going to code the arrow
25:25cuz that’s a bit that’s going to
25:26actually do something the red circle is
25:27just going to be be there so when I
25:30press the green flag I want that to
25:32start the timer so that’s going to start
25:33the game I want the clock sorry the hand
25:38of the clock to rotate I want it to
25:41rotate one and there’s 12 rotations
25:44available before it makes a full circle
25:47and I want it to wait now each one of
25:50these are a tenth of a second so I want
25:52this to be about 24 seconds so I’m going
25:54to make that 20
25:58then what I’m going to do is I’m going
25:59to put that inside of a repeat
26:05block there we go and I want
26:10that to repeat 12 times strain
26:15up and then I want it to go to a a end
How to create and code a ‘time’s up’ end screen in ScratchJr
26:19screen so let’s create the end screen
26:21for the Times up so let’s take that off
26:25I’m going to use again I think our
26:27current
26:29screen I’m going to add
26:33this as part of the clock I want to make
26:35that
26:39bigger we go and also I’m going to add
26:44another character which is
26:46our
26:48Arrow again make that
26:53bigger also going to add some text
27:13there we go let’s make that as big as we
27:16can fantastic and let’s also code this
27:20so there’s a bit of
27:21movement so on the green flag I want
27:24that just to rotate and I want it to do
27:26it forever
27:28fantastic let’s go back to our code here
27:32let’s add that as the end
27:36screen now let’s test it so I I press
27:38the green
27:40flag you can see that it’s
27:43moving doesn’t look great I think if I
27:46stop that let’s reset let’s put that
27:48more in the
27:49middle I think that’ll be a little bit
27:51more effective let’s try again oh there
27:53we go
27:59it’s nice when you watch the code being
28:02executed in this screen you can see the
28:03blocks actually being activated here we
28:06go we’re nearly
28:19there brilliant there we go fantastic so
28:22let’s stop that go back to our screen
28:25reset Let’s test the whole game on full
28:28screen so we’re ready to go green flag
28:31to start and off I
28:49go Victory okay let’s try that
28:53again this time let’s all reset
28:55everything this time we will
28:57intentionally go over time so let’s
28:59start
29:00again off we
29:04go take our time of
29:11it scoreboards working well Auto up
29:15updating as we go
29:17along okay I’m going to just hang out
29:19here for a bit see what
29:21happens going to run out of
29:26time time is up
29:29fantastic once again obviously we can
29:31stop that go back to our editing screen
29:35if we want to change anything including
29:36if it’s too easy we can make the time a
29:37bit shorter well done everyone great job
Outro
29:40congratulations and well done on making
29:41your own platform game using scratch
29:44Junior on your mobile device please
29:46share with me any modifications you’ve
29:47made to make it even better if you do
29:50need any extra help or support you can
29:52find my contact details on my website
29:54and also dedicated page with extra
29:56resources I’ll add add the link in the
29:58description once again well done I hope
30:01you enjoyed the video and I look forward
30:02to seeing you next time bye
30:05[Music]
Mr Vullo - Alternative Education 