Scratch 3.0: How I created my first game in it.

This is my first blog in CS50 Series. I am so much excited to take you on this amazing learning journey of CS50. In this blog, we will learn about a programming language Scratch.

Credit: https://scratch.mit.edu

What is Scratch?

Scratch is a free educational programming language that was developed by the Lifelong Kindergarten Group at the Massachusetts Institute of Technology. It geared towards kids ages to 8–16 but people of all ages use it. Users program in Scratch by dragging blocks from the Block palette categories and clipping them to other blocks like a jigsaw puzzle in Code Area. Structures of multiple blocks are called Scripts. The computer pictures in scratch which will follow our commands are called Sprites. This method of programming (building code with blocks) is referred to as “drag-and-drop programming”. The output of code is displayed on Stage Area. Below stage area, there is Sprites pane area where you can add/delete sprites, modify their size etc. Beside Sprites pane area, you can add a backdrop to the stage from Backdrop Library.

Scratch 3.0 Editor

“Hello World!” in Scratch

To create our first program i.e. To make Scratch say “Hello World”. We will drag “when green flag clicked” block from events and will clip it to the “ Say Hello” block to it. In the “Say Hello” block, we can replace ‘Hello’ by ‘Hello World!’. Our Program is ready. When we click the green flag. Scratch will say “Hello World.”

We can make Scratch ask the user’s name and then say hello to the user. Clip “ask ‘what is your name? ” block from Sensing category of blocks to the “when green flag clicked” block. It will ask the user’s name and will provide dialogue box at bottom of stage for to input answer (name).

Now select answer block from sensing category and put it in join block in operators category. Now, clip this join block to say block from Looks category. When this combined block is clipped below “ask ‘what is your name? ” block, our program is ready and will say “Hello (Name)” output as below.

Scratch Project for CS50

I got introduced to Scratch in Harvard’s CS50: Introduction to Computer Science & Art of Programming Course’s Week 0. I learned how to use variables, conditional statements & loops in Scratch. At the end of Week 0, I was supposed to make one project in Scratch with compulsory use of

• at least two sprites, at least one of which must resemble something other than a cat.
• at least three scripts total (i.e., not necessarily three per sprite).
• at least one condition, one loop, and one variable.
• at least one sound.

The Unicorn Game

I decided to make a Unicorn game with 3 sprites.

• The Unicorn
• The Heart
• The Snake

The game has a flying Unicorn, who is collecting Heart appearing repeatedly at a random place and gliding from the front edge of the game to back edge with uniform speed. Also, there is Snake which appears at a random place on the front edge and directly glides towards Unicorn to bite him. Snake glides with different speed each time. More the Hearts Unicorn collects, the score will increase, He has to avoid snakebite otherwise game will be over. User can control unicorn and make him fly in four directions (Up-Down, Front-Back) using arrow keys.

Making of The Unicorn

We need to go to Scratch Environment and select create at the top to start a new project. We can also download IDE in our PC from here. To make flying Unicorn, we need to go create a sprite option at the bottom right corner of the IDE. Then Search for Unicorn and chose a unicorn running.

Now if you go to the costume tab above block palate, you can see that it has six costumes which if made to display one after other, it will appear that unicorn is moving. In costume, you can also change the look of a sprite using in build paint window. In Programming, if we want to perform some task repeatedly, we use Loops. Here we will use forever loop block from the control category to repeatedly display all costumes one after other. We will attach the next costume block from looks category in forever loop and then we will clip this combined block below “when the green flag clicked” block. when we click green flag, our program is running and our moving unicorn is ready.

Now we need controls of Unicorn to move it in all four directions. For that, we will drag “When space key pressed” block from the events category and will clip it with “change x by 10 ” block from the motion category. We can replace space key to right arrow key by selecting it from the drop-down menu in “ When space key pressed” block. Now when we will press the right arrow key, the unicorn will move 10 pixels forward. In the same way, we can code for backward motion by selecting the left arrow and setting “change x by -10”. Similarly by using “change y by 10” & “change y by -10” block from motion category for up and down direction respectively. We can add suitable (Blue sky) backdrop from backdrop option in Sprites pane to change stage background. Now we can fly our Unicorn in Blue Sky.

• Making of Heart

Next step is to make a heart sprite which moves from one end to another end of the stage and disappears when it is touched by Unicorn, increasing the score by one. The stage in Scratch 3.0 is 686*510 pixels, so we can move 343 pixels from the centre in the horizontal direction and 255 pixels from the centre in the vertical direction. We want heart repeatedly move from one end to another end.

So go to add new sprite, search for heart in the library, select it and set it to a suitable size. Now drag forever loop from control category of blocks and clip it to the “when the green flag is clicked” block. Now drag “go to random position” block from motion and clip “set x to 343” block below it. This means that the heart will appear at any random position but only on Right edge of the stage(x=343).

Now we want to make it move towards the left edge with a certain speed, for that, we have to repeatedly decrease x by -5, means it will go on moving towards the left edge of the screen by 5 pixels each time. so drag the “change x by ” block and set it to “change x by -5”. To do it repeatedly, clip this block inside “repeat 100” (100*5 > 343) block from control category and clip this below “change x by -5”. Thus our heart is moving from right edge to left edge with uniform speed.

Now we want to add one to the score when Unicorn collects (touches)heart each time. For this, we will use conditional if statement from events category which executes code inside it only when the condition is fulfilled. For that go to a variable category and create new variable “Score”. Now drag If block from control category, drag “touching mouse pointer ” block from sensing and put it in if block condition. Replace mouse pointer by unicorn running. I want three events to take place when the heart touches the unicorn,

1. The heart should disappear and appear at any random position on the right edge
2. The score should be increased by 1
3. Some sound should be played indicating heart is collected

So in if block, first add “hide” block from looks, then drag “change my variable by 1” block from variable and replace my variable by score. At last, go to sounds category, add the sound ‘collect’ from the sound library and then drag “play sound collect until done” block from sounds category and clip it below “change my variable by 1” block. At last, clip this whole if block inside repeat block below “change x by -5” block. Also, add show block from looks category above repeat block to make heart appear again.

• Making of Snake

I want to add a sprite which will act as a villain. So I decided to make a snake which will try to bite the unicorn. The snake will appear at the right edge of the stage at any random position and will move directly towards unicorn repeatedly. For that again we will use the forever loop. Also, I want to make it move with different speed each time it appears, to add little difficulty and element of surprise in the game.

So go to add new sprite, search for the snake in the library, select it and set it to the suitable size. Now drag forever loop from controls and clip it to “when the green flag is clicked” In forever loop, similar to what we did in the heart sprite. first clip “go to random position” and then clip “set x to 343” below it so that snake will appear at the right edge. Now to make it move toward Unicorn chose “glide 1 sec towards random position” from motion block. It will move sprite towards a given position in given seconds. We want to choose time randomly for every time, so go to operators category and drag “pick random from 1 to 10” and insert it at time’s place in glide block. 10 sec is a very large time and will make snake movement very slow, set the random time from 1 to 5 sec. Also, replace random position by Unicorn running position. Now clip this “glide (pick random from 1 to 5 seconds) towards unicorn running position” block inside forever block at the end. Now our snake is ready to bite the Unicorn.

I want the following events to take place when a Snake bites the unicorn.

1. Play some sound indicating bite
2. Snake to say game over
3. Hide the snake
4. The Snake should go to the right edge in a hidden condition
5. Stop the game

So drag if block from controls, drag “touching mouse pointer ” block from sensing and put it in if block condition. Replace mouse pointer by unicorn running. In if block, first, add “play sound oops until done” from sounds. ‘Oops’ sound can be added from the sound library. Below it, clip the “say game over for 1 sec” block from looks. next is to hide the snake by clipping hide block from looks. Take snake to the right edge by clipping “set x to 343” and finally clip “stop all” block from controls to end the game. Now clip this whole if block inside forever blocks, below glide block. The hidden Snake should appear at the start of the game, so clip show block below “when the green flag is clicked” block. Then Snake should wait for some time in order to give some time for a unicorn to settle. So below show block, clip “wait for 1-sec” block from events and set time to 3 sec. Thus the Villain of our game is ready.

• Some Last Finish

To make the game more interesting and interactive I want the following events to take place when the user starts the game.

1. Instructions for new user to start and to avoid snake
2. Bring the Unicorn to left position of the stage
3. Set score to zero from previous play score

4. Play background music throughout the game.

To make it happen, drag two “say hello for 1 sec” blocks from looks category and clip it in the already existing script in between “When the green flag is clicked” block and forever loop block. In first say block, replace “hello” by “It’s time to fly” indicating the start of the game and in the second block replace “hello” by “Just need to avoid Snake” as a warning for the new user. I made snake wait for 3 seconds to give time for the user to read the above instructions.

I have to make another script by dragging “When the green flag is clicked” block so those remaining events will not be delayed by 2 seconds. Now clip “set x to -150” below it to bring Unicorn to the middle position. Now drag “set my variable to 0” block from variables and replace my variable by score. It will set the score to 0. Now go to sounds category and select suitable background music from the library. I have selected ‘Video Game 1’. In the music category, drag “play sound until done” block, set the sound to ‘Video Game 1’ and clip this block in forever block. Now clip forever block below “set score to 0” block. Now our game is ready. Let’s play!!!

Conclusion

I enjoyed a lot while making this game. I hope you will give it a try. It will be a nice Infotainment for you. This series of blogs on CS50 will continue. You can find my next blog here. Thank you very much for your patient reading. Leave a comment below if you have any suggestions, queries or corrections. You can connect with me on LinkedIn or by visiting my website on Medium. Happy Learning.