Make the Pong game with p5.js

Game, p5js

191017 PongWithTwo.jpg

Introduction

The game is derived from the video Codetrain: pong game. The coding is broken down into different phases, implement each phase, do the testing and then proceed. Have fun!

We are using object oriented programming to make our game.

Object oriented programming (OOP):

So far we have made simple programs with procedural programming. We were putting all the code in one file, sketch.js.. In this paradigm, one line is executed after the other, loops and conditionals (if statements) control the flow of the program. We “outsourced” repetitive tasks into functions, these we could call whenever we needed their functionality.

Objectoriented Programming is different as we are modelling our problem into parts or objects. These objects have properties and methods and are interacting via their methods.  What does this mean, how does this apply to our game?

In a pong game we have two types of objects, the puck (ball) and the paddles to play the puck. The objects are defined within a class, that is a sort of template defining the properties (for a puck location, speed and size) and what it can do (show itself, change its location, react when been hit by the paddle, etc).

191016 PongObjects.jpg

Phase 1: Get the puck

Objective: Get a puck that launches in the middle and then moves towards the borders of the canvas.

The class Puck is defining the properties and actions what the puck can do.

The puck has five properties, location (with its coordinates x, y), its speed (also broken down into two components, speed in x direction vx and in y direction vy and its radius (size) r.

Inside this first version of the class Puck,we have four methods. The constructor() is creating a new puck, it also defines variables for its size, location and speed and puts some initial values to those.

The methods update() and show() change the location of the puck and show it on the canvas.

The method reset() is defining the location, direction and speed of a  new ball. We will use it later in the game whenever a point has been made and the puck needs to reappear.

To create a puck, we are calling puck = new Puck() in the setup() function. puck is then the name of the object. Methods of an object are executed with the syntax OBJECTNAME.METHODNAME(…). Example, in order to change the location of the puck, we call puck.update(), puck.show() will then draw the puck. These commands are inside the function draw that is bascially a loop.

191017 Pongp5jsPhase1.jpg

 

Phase 2: Create the paddles

Objective: Get two paddles, located at the left and right side of the canvas.

Now we create a new a class Paddle describing the “racket” to play the puck. As a first step we only create two static (i.e. fixed) paddles. The constructor has this time a variable isLeft. It can take two values, true or false. If it has true, we create the left paddle when called, if it is false it creates the right paddle.

191017 Pongp5jsPhase2A.jpg

Then create the two paddles by calling the constructor in the setup() function, we show them by using the update() and show() methods. Add the highlighted lines to your exisiting functions:

191017 Pongp5jsPhase2B.jpg

Phase 3: Move the paddles

Objective: Move the paddles with the keyboard.

Now we add an event loop. Event loops are checking the status of events, i.e. mouse buttons pressed, keyboard entries. We will use the keyboard to control the paddles. First, only enter the function keyPressed(). How do the paddles behalf?

Then add the keyReleased() method and see if the paddles are easier to handle.

IMPORTANT: After starting your sketch, you must click the mouse once inside the canvas for the events to reach your program.

191017 Pongp5jsPhase3.jpg

Phase 4: Let the paddles hit the puck

Objective: The puck is reflected from the paddle.

The following two methods allow the puck to be hit by the paddle. Add them inside the class Puck.

191017 Pongp5jsPhase4A.jpg

In order call the new methods, add the highlighted code inside the function draw().

191017 Pongp5jsPhase4B.jpg

Phase 5: The puck recognizes the borders of the canvas

Objective: The puck is reflected from the upper and lower edge of the canvas, it disappears when passing the left or right border. Furthermore, in the later case a new puck appears in the middle and starts moving.

191017 Pongp5jsPhase5A.jpg

Here is the addition to the function draw(). Make sure that the methods are called in the same order as shown here. You may need to rearrange their order.

191017 Pongp5jsPhase5B.jpg

Phase 6: The complete game:

Here is the complete game with the counter. You need to add the declaration of the two variables to count (i.e. leftscore and rightscore, line 4 and 5 in the main function. Line 31 to 33 show the counter on the canvas.

Inside the class Puck, you add the counter to the method edges(). leftscore++ and rightscore++ add 1 to the counter whenever the puck passes the left or right border of the canvas.

The main function:

191017 Pongp5jsSketch.jpg

Class Puck

191017 Pongp5jsPuck1.jpg

191017 Pongp5jsPuck2.jpg

Class Paddle

191017 Pongp5jsPaddle.jpg

Further things to do:

  1. Change the size of the puck.
  2. Change the paddle size, where do you do it? Do the changes apply for both paddles and why?
  3. Change the colour of background, puck and paddles.
  4. Can you control one paddle with the mouse, what do you need to add/change and where? The paddle should only move on the y axes, irrespective on the x location of the mouse.
  5. Add a second puck. You only need to make changes in function draw(), adding six lines of code will do the job. Do you have an idea how to do it?

Program:

Pong for Two

Leave a Reply

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

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.