Feature:   Making Pong

imageFeatureMaking Pong
Unit Overview

Students use the Animation Design Worksheet to decompose a 2-player game of Pong, and implement it in Pyret.

Product Outcomes:
  • Students create the first stage of a game of Pong, including a game board and two paddles

  • Students build interactivity into the game, allowing each paddle to be controlled by keypresses.

  • Students extend their pongState data structure to include a ball, tracking both its position and direction

  • Students add collision detection, allowing the ball to bounce when it hits a wall or paddle.

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

  • BS-DS.1: The student is able to read data blocks

    • BS-DS.2: The student is able to solve problems using data structures

      • BS-R: The student is able to write interactive programs using the ’Reactor’ construct

        Length: 95 minutes

        Materials:
        • Pens/pencils for the students, fresh whiteboard markers for teachers

        • Class poster (List of rules, language table, course calendar)

        • Language Table (see below)

        • Animation Design Worksheet

        Preparation:

          Types

          Functions

          Number

          + - * / sqr sqrt expt

          String

          string-append string-length

          Image

          rectangle circle triangle ellipse star text scale rotate put-image



          Setting up the paddles

          Overview

          Students begin creating a game of Pong

          Learning Objectives

            Evidence Statements

              Product Outcomes

              • Students create the first stage of a game of Pong, including a game board and two paddles

              • Students build interactivity into the game, allowing each paddle to be controlled by keypresses.

              Materials

              • Pens/pencils for the students, fresh whiteboard markers for teachers

              • Class poster (List of rules, language table, course calendar)

              • Language Table (see below)

              • Animation Design Worksheet

              Preparation

              Setting up the paddles (Time 45 minutes)

              • In Unit 3, you practiced decomposing simple animations into their data structures and functions. Let’s consider how a 2-player game of Pong works: There are two "players", each represented by a paddle on either side of the screen. Each paddle can move up and down, as long as they remain on the screen. There is also a ping-pong ball, which moves at any angle and can be on or off the screen. Let’s start out by adding the paddles, making sure they can move up and down, and then we’ll add the ball later.

                Using a blank Animation Design Worksheet, figure out how the paddles behave throughout the game, and decide what Data Structure you’ll need to represent those behaviors.

                Students should realize that each paddle is simply a y-coordinate, since neither paddle can ever move left or right.

              • Here is one possible structure that we could use to model the two players:   We can imagine a few sample pongState instances, in which the paddles are at different locations on the screen. If you haven’t already, it would be a good idea to define a sample state for when the game starts, and maybe two other states where the paddles are at other locations.

              • We’ll need to answer some questions, in order to write our draw-state function.
                • What will the paddles look like?

                • What does the background look like?

                • How wide is the background? How tall is it?

                • Define the function draw-state, and try drawing your sample PongState instances to make sure they look the way you expect them to.

              • The paddles don’t move on their own, so right now there’s no next-state-tick function. However, they DO move when a user hits a key! That means we’ll need to define next-state-key, and answer a few questions in the process:
                • What key makes paddle1Y increase? Decrease?

                • What key makes paddle2Y increase? Decrease?

                • How much does each paddle move when it goes up or down?

                • What happens if some other key is pressed?

                • Use the Design Recipe to write the code for next-state-tick

                Have students discuss their answers to these questions, before moving on to next-state-tick.

              • At this point, we know how to change the pongState in response to a keypress and how to draw that pongState as an image. Let’s build a reactor, which uses a pongState instance as the starting state and hooks up these functions to the on-tick and to-draw event handlers.   When you run this reactor with interact(pong-react), you should see your initial instance drawn on the screen, and the paddle positions should change based on the keys you press! Do all four keys do what you expect them to do? What happens if you hit some other key?

              • Right now, what happens if you keep moving one of the paddles up or down? Will it go off the edge of the screen? We should prevent that!

                Take a few minutes and discuss with your partner: what needs to change to stop the paddles from going offscreen? You can use an Animation Design Worksheet if you want to be precise. Once you have a strategy that you feel confident about, take 15 minutes to try it out!

                Give the class 2-3 minutes to discuss, and then have different teams share back before they start to implement.

              Adding the ball

              Overview

              Students extend their program to add a bouncing ball

              Learning Objectives

              Evidence Statements

              Product Outcomes

              • Students extend their pongState data structure to include a ball, tracking both its position and direction

              • Students add collision detection, allowing the ball to bounce when it hits a wall or paddle.

              Materials

              • Pens/pencils for the students, fresh whiteboard markers for teachers

              • Class poster (List of rules, language table, course calendar)

              • Language Table (see below)

              Preparation

                Adding the ball (Time 45 minutes)

                • Now that we’ve got our paddles set up, it’s time to start thinking about the ball. What do you notice about the ball?
                  • When does the ball move? On its own, or only when a key is pressed?

                  • Does the ball’s position change? If so, by how much?

                  • What do we need, to keep track of the ball’s position?

                  • Does the ball’s direction change?

                  • What do we need, to keep track of the ball’s direction?

                  • When does the ball’s direction change?

                  Suggestion: don’t show the class these questions to start. First, have students volunteer lots of observations, and write them on the board. Only add the other questions to spark discussion if students run out of ideas.

                • Fortunately, we don’t need to think through everything all at once! What would be a good place to start?

                  Use an Animation Design Worksheet to add one part of the ball’s behavior to your game.

                  Students may want to start just by having the ball appear on the screen, moving in one direction. They don’t need to worry about bouncing, changing direction, or going off the screen right away!

                • Did your pongState change as a result? Chances are, you needed to add ballX :: Number and ballY :: Number fields to your State, to make sure the ball could move in any direction. Did your draw-state function need to change? What about next-state-key? Did you need to write next-state-tick? If so, what did you do?

                  Some students will hard-code numbers for moving the ball. That’s okay! Once they start thinking about changing direction, those numbers will have to become fields in pongState, which change in response to paddle collisions.

                • Now the game is starting to come together! We’ve got two paddles moving up and down, and we make sure they stay on the screen. Meanwhile, we have a ball that can move in any direction...but so far the ball doesn’t know how to bounce! It’s time to plan out what bouncing will look like, and wire it all together.
                  • How do you know when the ball has hit the top or bottom wall of the screen?

                  • Write is-on-wall, using the Design Recipe to help you.

                  The goal of this activity is to have students get their collision-detection working, in preparation for the bouncing behavior.

                • Of course, we don’t want the game to end when the ball hits a wall! Let’s re-examine our observations...
                  • When a ball is moving up and to the right, what is happening to ballX and ballY?

                  • When that ball hits a wall, what should happen?

                  • How does the ball’s direction change after it hits a wall?

                  • After it’s changed direction, how does the ball’s position change?

                  • Use the Animation Design Worksheet to plan out the bouncing behavior

                  Warning: this activity is pretty sophisticated! You’ll want to make sure there are plenty of visual scaffolds for students, or (even better!) have them generate these diagrams themselves.

                • By now, you may have noticed that the direction of the ball itself needs to change, which means it needs to be added to our pongState structure. There are lots of different ways we could represent direction: it could be a String (e.g. "north", "southeast", "west", etc), or it could be a pair of Numbers that represent how much the ball is moving in the x- and y-direction from frame to frame.

                  What other ways could you represent direction? What are the pros and cons of each representation?

                  Note: the pair-of-numbers representation is deeply aligned to physics, in which the pair represents a vector that translates the ball’s position over time.

                • Here is one example of a way to represent this, during Numbers to keep track of direction:   When the game begins, we can start out with moveX and moveY being specific numbers that move the ball up and to the right. We can change these later, or even make them randomized every time the game starts!

                • Before we worry about the paddles, let’s start by thinking about the top and bottom walls of the game screen.
                  • What should happen if the ball hits the top of bottom of the screen?

                  • How would you detect a collision with the top or bottom wall?

                  • Make the ball bounce off the top and bottom, using the Animation Design Worksheet and the Design Recipe to help you if you get stuck!

                • Now let’s make some sample instances for when the game begins, when the ball is about to hit a paddle, and then immediately after:   The ball starts out moving up and to the right, but once it hits a wall the direction needs to change. Instead of moving up (adding 10 each tick), it’s now moving down (adding -10 each tick) after bouncing off the wall (it’s still moving up the screen by 10 each time, so we leave that unchanged). Note: Once the ball hits the wall, its y-position needs to change! If the ball stays where it is, it will still be considered to have "hit" the wall on the next tick. This will cause the ball to jitter back and forth, as it constantly hits the same wall over and over.

                  Change next-state-tick so that it generates the next pongState using the ball’s previous position and the move fields. Then, add conditionals to next-state-tick so that it will change the direction of the ball when it’s hit a walll

                  Some students may ask about having the ball change angle based on where the it hits the paddle. This is a terrific question, and students should be encouraged to think about this behavior after they’ve implemented the simpler behavior.

                • Let’s walk through our new next-state-tick function, and make sure we understand it:   If a collision occurs, we need to do two things. First, we need to move the ball to it’s next position, and make sure that new position is far enough away from the paddle so that it won’t be considered another collision. Second, we need to flip the y-direction so that the ball is moving in the opposite direction. This is easy to do, by multiplying the moveY by -1.

                • Now it’s time to start thinking about a different kind of collision: what happens when the ball hits a paddle?
                  • How do you know when the ball has hit paddle1? paddle2?

                  • Write hit-paddle1 and hit-paddle2, using the Design Recipe to help you.

                  • Change next-state-tick so it checks for a paddle collision in addition to the wall collision.

                Closing

                Overview

                Learning Objectives

                  Evidence Statements

                    Product Outcomes

                      Materials

                        Preparation

                          Closing (Time 5 minutes)

                          • You’ve got the beginnings of a very nice Pong game! What are some features you might want to add?

                            Let students brainstorm ideas. Some suggestions: keeping score, a game-over event, a splash screen...