Filters

Other

D

Your name is required for this document. It is only stored on this local computer and no where else. Please enter your name below:

Lesson 5Bouncing Ball Game

Knox badge
Lesson 5Bouncing Ball Game
  • How to animate a sprite
  • How to make a ball bounce in Scratch
  • What a variable is and how to use variables in Scratch
  • How to make our sprite move based on keyboard input
  • I will be able to make a sprite move using keyboard input
  • I will be able to implement variables into my game
  • I will be able to explain the difference between an animation and a game

In this lesson we are going to make a game where we bounce a ball into a certain part of the screen.

Finished product

You can see a preview of the finished game below:

Getting started

Follow these steps to get started with your game:

  1. Add a new ball sprite into your game
  2. Rename the ball from Ball to BouncingBall and the cat to Cat

Setting up the ball

The first step is to add your ball to your scene. One you have done that, make sure to select the ball.

We need our Ball to move around the screen whilst the game is running. To do this we need the following blocks to our Ball:

Try out what you have just created.

The table below explains what each of these blocks does.

Block Purpose
When clicked Runs when the green flag is clicked
Forever Keeps doing something forever, as long as the red stop button is not clicked
Set colour Makes the Ball move 10 steps in the direction it is facing
Set colour If the Ball is touching the edge of the scene, it will bounce back the way

Making the ball bounce when it touches the cat

The next stage of this is to make our ball bounce when it touches our cat. To do this, we need to add more code to our Ball. We need to add the code shown below:

The code to make the ball bounce

Once again, the following table explains what each block does.

Block Purpose
Forever Keeps doing something forever, as long as the red stop button is not clicked
If touching cat Checks to see if the Ball is touching the Cat sprite. If it is, the blocks inside this block are activated and run.
Play Boing sound Plays the Boing sound
Turn 135 degrees Turns the Ball 135 degrees
Set colour Moves the Ball 30 steps away from where it is, stopping it from getting stuck
Change your backdrop to something more interesting
Try out what you have just created.

Adding keyboard controls to our cat

The next part of the game is to make our cat move. To do this we need to add keyboard controls to it.

Make sure you are selected on the Cat sprite.

Find the when space key pressed Try block under the Events tab. Change the drop down from "space" to "up arrow" and then create one for each of the arrow keys so that it now looks like:

All keys

Next we are going to make our cat move when the user presses a key. Find the point in direction 90 and move 10 steps blocks under the Motion tab. Add these blocks so that they attach underneath the arrow keys as shown below:

All keys
Pay close attention to the directions for each arrow key and do not get them muddled up!
Try out what you have just created.

Stopping our cat going upside down

Did you notice that our cat went upside down when he was moving?

To fix this we need to change our cat so he can't go upside down by clicking Direction at the bottom next to where we name our sprite and selecting the option highlighted red below:

Stop the character going upside down

Developing our score system

Our score system requires us to save the number of points the player has. To do this we must use something called a variable.

A variable is like a container that can store data whilst a computer program is running. Variables are given meaningful names such as points or lives and are also given a value.

In Scratch, we create a variable using Variables tab on the left side. To create the variable select Make a variable and then give it a name, in this case we are going to use points as the name.

Variables
Variables

This variable will store our points as the game runs.

Variables can be set to a value or changed by a value. Now that you have created a variable you should see it at the top left of the scene.

How it should look now

Getting points

For this to become a game we need to add points when the player manages to get the ball into the right place.

For this to happen we are going to add an area on the screen where ball must go for the player to gain a point.

We are going to need to change our backdrop so that it has a red zone on it. Click on your backdrop at the bottom right-hand side so you get a screen that looks like:

How it should look now

Find the Fill tool on the screen and make sure it is set to red. Make sure to set Outline to nothing by clicking the button at the bottom on the Outline box as shown:

How it should look now

Now select the Rectangle tool which has been highlighted red below:

How it should look now

We are now going to draw a red rectangle on our backdrop so that it looks like the following picture:

How it should look now

When you have done that, click on the Ball sprite and make sure to click on Code at the top left:

How it should look now

Increasing points when the player scores

The next thing we need to do is make it possible for the player to gain points when they touch the red zone.

Add the following blocks (you will find the second one under the Variables tab):

How it should look now

Now change the blocks so that it looks like:

How it should look now

Click on the purple zone in the touching color   block you have just created so you get a colour selection box like below. Click on the colour picker:

How it should look now

Select the red bar we have just created in the backdrop.

Now to increase the number of points the player gets each time the ball enters the red zone we use the change points by 1 block.

How it should look now

Add it to your blocks so that they look like:

How it should look now
Try out what you have just created.

Stopping the ball getting stuck in the red zone

When the ball enters the red zone, you may notice that you get more than one point. To fix this, we need to change our code to:

How it should look now

What this will do is move the ball into the centre on the screen when it enters the red zone.

Try out what you have just created.

Ending the game

The game should have a way of ending it. In this game, we are going to make it end when the player gets 10 points.

Add the following blocks to your Cat or Ball – it doesn’t matter which:

How it should look now

Now find the   = 50 in the Operators tab and drag it into top part of the if block. Change the 50 to 10.

Find the points block in the Variables tab and drag it into the white circle in the previous block so that it looks like points = 10 block.

How it should look now

Finally, add the stop all block to the if block. Your final code should look like:

Try out what you have just created.
  • 1

    Upload your screenshot below:

  • 2

    Which word defines the difference between a game and an animation?

  • 3

    If the colour picker shown below was a slightly different shade of red, what would happen?

    Colour picker
  • 4

    What might happen if the goals for both players are both the same colour?

  • 5

    What might happen if the players are the same colours as the goal colours?

  • 6

    How well do think you completed this task?

  • 7

    What parts of this task, if any, did you struggle with?

If you finish the task, try these.

  • Add a purple zone where you lose a point if you enter it. Your code should be the same as before except you will need to change the colour and the points will now need to be -1 instead of 1. change points by -1
  • Add in a second player who is controlled with the WASD keys.
S1 Scratch Lessons
S1 Scratch Extension Tasks
S1 Scratch Assessment
Assessment
Provide Feedback

What did you think of this lesson?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually
Added the ability to lock and unlock DragonDocs

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number

25.02.2024
Added the 'matcher' feature to DragonDocs
Fixed an issue in which a closed section would retain it's original height within the document navigation
Added starters and the lesson review to the navigation on the side
The learning intentions and success criteria in teaching documents have now been redesigned to match my slides design

26.02.2024
All buttons are now on the right hand side
The accessibility button now has WAI under it

-- DragonDocs version 2.2 (Serengeti) --

26.02.2024
Code has been rewritten from the ground up to be object-oriented, making additional features easier to add

28.08.2024
Changed the look of grouped multiple choice buttons

06.03.2024
Added the new dragondocs_name feature and the requires_name property which allows names to be prepended to saved documents

09.03.2024
Added code so when the user types in their name and hits the enter key it will save that data and close the modal window
Added the new DragonShow and DragonDocs Link - a connection between both services that allows the presenter to communicate with users of DragonDocs from a DragonShow
Added the new timer option which is sent from DragonShows

04.04.2024
The matcher feature is no longer embed from jamiebalfour.scot but actually a feature of DragonDocs
Made DragonDocs 100% object-oriented, meaning much better management and better performance

05.04.2024
Made subtle changes to the interface to tidy it up a bit

06.04.2024
The multiple choice questions are now also part of the object oriented interface

09.04.2024
As requested, h3 elements are now included in the 'floating navigation'
The active navigation element now becomes bold and the left border has been retired

Time left

: