Making PONG step by step.

Below are a set of worksheets, inspired by and Scratch cards, that will guide you through making the classic arcade game PONG, step by step, using Processing.

You will need to repeat and adjust some steps to complete the game, as these instructions show how to program a version of PONG with just one bat, ball and score.

Any feedback on the usefulness of these worksheets will be gratefully


Click on the images to view the worksheets in your browser.

Click on the link below the image to download as a .pdf

Click on the sketchpad link to view an example of the sketch on the online Processing-like editor Sketchpad.

01 Set up a sketch.pdf

01 demo on Sketchpad

02 set size.pdf

02 demo on Sketchpad

03 set the background colour.pdf

03 demo on Sketchpad

04 Reference code repeatedly.pdf

04 demo on Sketchpad

05 Position a dot.pdf  ,this isn’t necessary to create PONG, but is useful to know.

05 demo on Sketchpad

06 Position a rectangle of ellipse.pdf

06 demo on Sketchpad

07 Randomize colours.pdf ,this isn’t necessary to create PONG, but is useful to know.

07 demo on Sketchpad

08 Move shapes using variables.pdf

08 demo in Sketchpad

09 Have something happen if something else is true.pdf

09 demo in Sketchpad

10 Make a shape change direction.pdf

10 demo in Sketchpad

11) Detect the edge of a shape.pdf

11 demo in Sketchpad

12 Create the PONG bat.pdf
12 demo in Sketchpad

13 Keyboard controls for the bat.pdf

14 constrain shapes movement.pdf

14 demo in Sketchpad

15) Simple detection of intersections.pdf

15 demo on Sketchpad

16 Vary the balls speed.pdf

16 demo on SketchPad

17 more complex detection.pdf

17 demo in Sketchpad

18 point of bat detection.pdf

18 demo on Sketchpad

19 set a variable to keep the score.pdf

20 Show the score onscreen.pdf

21 Scale the sketch for any device.pdf

22 Simplify your code with functions.pdf

23 move bat with mouse or fingertouch on Android.pdf

24 import images.pdf

Prototyping on Android

Here is a great video tutorial from the ‘Fun Programming’ blog, demonstrating how to prototype Processing sketches onto Android Phones.

Exploring multitouch

The guide to using multitouch code is a bit more involved and so wouldn’t fit onto a single worksheet, so I have given these guides entire posts in their own right.

Multitouch drawing tool

You can find a guide to creating a multitouch paint tool here.

Multitouch Pong Bats

You can find a guide to using multitouch to have up to 5 users control 5 bats here.

Trackbacks / Pingbacks

  1. Liverpool Processing Meetup | Re-Dock - June 1, 2012

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: