1. MOM! Phineas and Ferb are … Aims:
Students to begin working with pygame.
Students to understand working with graphics.
ALL: Make a simple application using pygame.
MOST: Understand how to do simple animation.
SOME: Apply these skills to making a simple game.

2. We are going to start working with Pygame.
Pygame is Python library that allows us to make animations and games.
The first program we are going to look at simply draws a graphics window and changes the colour of the background when we click the mouse.

3. After we import pygame, we must get the pygame engine going using pygame.init().
Next we set up the screen. It's helpful to have the size of the window as a tuple as well as separate values for width and height.
We use display.set_mode() to make a screen and then we make a pygame “rect” based on that. This “rect” object step makes it easier to control aspects of the screen.
Finally we set a caption (similar to the titles we made for the GUI programs).

4. Here we define some colours. Each colour is a list of three values.
The three numbers represent how much Red, Green and Blue we want.
Each number can range from 0 to 255.
Next we make a list of all the colours. We are going to cycle through this list in the main loop of the program. We will also need the length later on, so we put that in cLen.
Finally, we initialise a counter (c), a “done” flag and another flag that will check if the mouse button has been released. As we know, Python will treat those zeros as “False”s.

5. The pygame application is basically just a “while” loop
The pygame application is basically just a “while” loop. Each time through, we are going to check to see if the mouse has been pressed and then update the screen colour if we need to.

6. The “while” loop will keep running until done becomes “True”
The “while” loop will keep running until done becomes “True”. First, we fill the screen with the colour that is item c of the list “colours”.
Then pygame checks for any “events” that have happened during this cycle of the “while” loop. Then it walks over the list of events.
If the user has clicked the cross in the top right of the window (the “pygame.QUIT” event type), we simply set “done” to True which will cause the “while” loop to stop.

7. If the user has clicked the (left) mousebutton and the “flag” is “False”, then we set the flag to “True” and increment c, using the modulus operator to make sure we never get a value that is greater than cLen. This will cause the screen colour to change when we get back to the start of the loop next time.
The next event we check for is whether the mouse button has been released. When it has been released, we set the flag back to “False”, ready for the next press.
This is important, if we do not to this, the program will change the window's colour several times for each mouse press.

8. We use pygame.display.flip() to update the display.
The last line sits outside the “while” loop. This is important as it makes sure that pygame stops properly once the loop has finished.
Task
Type this in and have a play with the code.
Try changing the size of the graphics window and its title.
Then add some other colours and make sure they are displayed properly.

9. Our next program is going to be a simple “bouncing ball” demonstration.
We will learn how to animate using pygame.

10. The first part is very similar to what we did last time.
Set up a graphics window and define some colours.

11. The “ball” is actually going to be a red circle draws onto a black square.
These lines set up some variables. The size is a tuple that specifies the square's height and width. We will use ballRad for the ball's radius.
Finally the xSpeed and ySpeed will be how many pixels the ball moves right or left and up or down each time through the loop.

12. We need to make a pygame “Surface” object
We need to make a pygame “Surface” object. We can draw our “ball” onto this and then “move” it around the screen.
We also need to make a “rect” object based on the ball Surface, as this allows us to do useful things like know where its center is.
Next we make a tuple that represents the center of the rect and use this to draw our “ball”.
The pygame circle drawing method takes a surface, a colour, a pair of co-ordinates and a radius.
Now we are almost ready to enter the main loop and get the ball moving.

13. This line makes the mouse pointer invisible in the pygame window.
Here, we set done to “False” and enter the loop. To give the illusion of animation, we fill the screen with black each time through the loop and draw the “ball” in its updated position.
You can also see the familiar block of code that allows the user to quit the program.

14. The rect we have created has a built-in move() method
The rect we have created has a built-in move() method. We just pass in the “speed” values we defined earlier.
Then we have two “if” clauses that flip the x and y speed values if the ball is heading off screen. Once again, the “rect” object is handy as it has built-in attributes like “top”, “bottom”, “left” and “right” that we can use here.
Next, we “blit” the ball onto the sceen. We pass in the “Surface” (which has the ball drawn on it) and the “rect” (which defines its position). The “blit” command will draw the image on the screen, but it will only appear after we use flip().

15. Here's the entire loop, plus the pygame
Here's the entire loop, plus the pygame.quit() command that you need to have outside of it.

16. Tasks:
Once you have got the code running, experiment with changing the size of the ball and the window.
Try some different values for the x and y speeds.
Comment out the line that fills the screen with black and see what happens when you run the code.

17. Now we are going to explore how to make a simple bat and ball game.
Once you have done this, you will be able to design your own games.

18. Here, we are just initialising some variables.
We are going to set up a pygame clock so that you can control the speed at which your game runs. FPS will hold the value for “Frames Per Second”.

19. You have seen all this before ...

20. It's easier to make a bat than a ball
It's easier to make a bat than a ball. Just make a rectangle and fill it with a colour. We need to get the “rect” so we can control it later.
I've set the “colorkey” of the ball so that the black background of the square on which the ball is drawn stays transparent. We didn't need to do this in “bounce.py” as we were blitting the ball onto a black screen.
The last line positions the bat's rect in the middle of the screen, 50 pixels from the bottom.

21. I want the program to say “Game Over
I want the program to say “Game Over.” if the ball falls off the bottom of the screen.
First I need to choose a font and a size. By passing in “None”, I just get the default font.
Then I create my text object. I pass the message, “True” because I want anti-aliasing and the colour to the font object's render method.
Then, as usual, I am going to need a “rect” object so that I can position my text on the screen. I set the rect's center to the center of the screen.

22. The only new thing here is the simple command that creates a pygame clock .

23. The pygame.mouse.get_pos() tells us the mouse's position as a pair of co-ordinates. We only need to use the x co-ordinate to calculate the new position for the center of the bat.
As with the bouncy ball program, we add the x and y speeds to the ball's co-ordinates. Here I have used the left edge and the top rather than “centerx” and “centery”.

24. I have used very simple collision detection here.
The first if statement checks whether the ball overlaps the bat along the horizontal plane.
The second checks to see if the ball's bottom is at the same height as the top of the bat. If so, we reverse the ySpeed.
There are more sophisticated ways to test for collision in pygame, but this is the simplest way to implement it.
If you test the game a bit, you'll notice that the ball sometimes carries on when it looks as if it should have bounced.

25. In this game, we only bounce the ball if it hits the top, left or right walls.
If it drops out the bottom, we display the “Game Over.” message.

26. The last few commands blit the bat and ball to the screen.
The clock.tick() command only advances the program when the correct amount of time has passed.
Then we update the display with flip().
As usual, the pygame.quit() command sits outside the “while” loop.

27. Tasks
Add a score counter. Use the same process as for the “Game Over.” object to make your counter.
Create a variable that gets one added to it every time the ball bounces off the bat.
Update the text object and blit it to the the screen.