Grey overlay









Developing Programming and Development (learning strand), specifically:

  • Understand the concept of selection, i.e. using if-else, if-elif, to branch the flow of action
  • Understand that variables can be changed to reflect/keep track of the state (position, colour etc) of a game object
  • Understand that game animation is implemented using repetition and game object states changing.

Move it!

Download It

Learn It

  • Previously, we looked at drawing simple elemental shapes.
  • In this lesson, we are going to look at ways to draw shapes, then animate them.
  • We will will need to perform the following steps:
    • Setup variables to store x and y coordinates for our graphic.
    • Draw the a shape over at player1X, player1Y
    • Change the variables a bit.
    • Repeat the draw/change process repeatedly.
  • If you get stuck today, a walk-through of the steps described below can be seen here:

<iframe width="650" height="393" src="" frameborder="0" allowfullscreen></iframe>

Try It

  • At the end of the game setup area of the code, underneath the gameState = running line, create a variable player1X and assign it the value of 0.
  • This line of code will happen once when the program first starts up.
player1X = 0
  • It should look like this:


  • Next, we'll need to add some code to the main game loop. Expressed as pseudocode, we'll be doing:
    Draw a small square at coordinates: player1X, 200.
    Add 4 to the value of player1X
  • Add the following lines of code to draw our player in the game loop and increment the X position by 4 pixels every time the game loop runs.
  • Place the following lines of code immediately under the #your code starts here line.
  • NOTE: You must ensure you use the tab key to indent these lines of code, otherwise it won't run.
player1 = pygame.draw.rect(screen, green, (player1X, 200, 20, 20))
player1X = player1X + 4
  • When done, this will look like this:


Document It

  • Did this work as expected? Discuss what you think has happened?

Try It:

  • Perhaps this line can help - It fills the whole screen with solid colour, which would cover any previous images we've drawn.
  • You'll now have something like this:
  • 2-3.PNG
  • See if you can add this in the right place in our game loop to create a green square that drifts across the screen.
  • Can you make it move more slowly? Faster? Render as a different colour?
  • Could you change the code to make it move down instead of up?
  • What about to move diagonally down and right across the screen?
  • What about making it start in the bottom-left corner and making it travel up and to the right?


Learn It

  • Selection is one of the three basic logic structures in computer programming. The other two logic structures are sequence and iteration
  • In a selection structure, a question is asked, and depending on the answer, the program takes certain courses of action, after which the program moves on to the next event
  • Humans might see selection like this:


  • Computers see things like this:


  • We are going to use value of the player1X variable to determine if player1 has moved off the screen. This translates into python code as if statement.

Try It

  • Modify your code in the game loop to say this:
player1 = pygame.draw.rect(screen, green, (player1X, 200, 20, 20))
player1X = player1X + 4

# selection: depending on the outcome of this comparison, 
# player1X will be set to 0 or not
if player1X > SCREENWIDTH:
    player1X = 0
  • Your code should look like this:


  • Run your code. What do the new lines do?
  • Could you make the square move right to left instead?
  • How about repeatedly moving in diagonal lines?

Code It

  • Using conditionals (IF statements) will allow us to make far better graphics.
  • For instance instead of making the player reappear repeatedly on the same edge, lets make him bounce from edge to edge.
  • We will need to create a variable to hold the speed and direction of the player – this must be done before at the loop, in the game setup section of the page at the top of the program. Put it directly underneath where you initially wrote the player1X = 0 line at the start of this page. You should end up with:
player1X = 0
player1XSpeed = 4
  • Your code should look like this:


  • We will also need to change the player1X = player1X + 4 line and if statement slightly in the game loop:
player1 = pygame.draw.rect(screen, green, (player1X, 200, 20, 20))
player1X = player1X + 4

if player1X > SCREENWIDTH:
    player1X = 0
  • …needs to be changed to say…
player1 = pygame.draw.rect(screen, green, (player1X, 200, 20, 20))
player1X = player1X + player1XSpeed

if player1X > SCREENWIDTH:
    player1XSpeed  = player1XSpeed * -1 
  • It'll look like this:


  • Which two lines have changed? Why?
  • What is needed to make the shape bounce off the left-hand edge of the window too?
  • Can you change the size of the window?
  • Can you make the square travel only half-way accross the screen before reversing direction?
  • Can you make the square bounce up and down?
  • Does it have to be a square?
  • Could it be green travelling one way, but red travelling the other?

Badge Tasks

  • Silver: Add comments to all of your code, and upload for marking.
  • Gold: Make a piece of animation. Create a circle that:
    • Appears at x = 100, y = 100
    • Moves to x = 100, y = 700
    • Re-appears at x = 100, y = 100 (hint: use selection to decide if the circle has reached 700 at y direction)
  • Platinum: Make a shape move diagonally and bounce off all the sides of the screen.

Badge It

  • For this lesson’s assessment you are marking your own work. This will allow you see your own progress. This process is often used for online training programmes and is called the ‘honour’ or ‘trust system’. Obviously the key to these systems is being honest. Your teacher will randomly check some students work to moderate their marking.
  • Once you have done above tasks and tested they are working as intended, click here for the self assessment.