Make the Pong game with p5.js

Game, p5js

191017 PongWithTwo.jpg


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(), 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?


Pong for Two


Animation, Blockly, Blocks, Game

Scratch is a block based programming language. You do not need to type code, but you just assemble projects with blocks of different functionality and configure those with simple entry of numbers and text. Scratch runs on a web browser and you can also interface it with some hardware. But where to start with Scratch?

The Code Club is a UK charity that promotes computer science for young people as yourself.  They offer very comprehensive and detailed project tutorials, from small animations to a more complex  RPG(*) game.

Here is the link to the site:

Code Club Project Create your own world

(*) A role-playing game (sometimes spelled roleplaying game;[1][2] abbreviated RPG) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting, or through a process of structured decision-making regarding character development.[3] Actions taken within many games succeed or fail according to a formal system of rules and guidelines.[4] [Source: Wikipedia]

p5.js – Get to know it better

Animation, Game, GetToKnow, p5js

Some Resources to proceed with your learning:

This is a copy of a book introducing P5JS covering all basic features.

I suggest that you have a look, copy and paste some code snippets into the editor to execute them and then try to understand what is happening. The text will help you further with that.

In the coming two lessons we will focus on the content in Chapter 7 (images) and 8 (sound). To try out the projects, you need to download the images and sound files provided.  They are in  media (images, sounds, etc.), you can download them from this Github Repository.

If you are not too comfortable yet with p5js, I encourage you to start with the earlier chapters first and try to get deeper into programming.

Flappy Bird

Here is a video describing an implementation of the Flappy Bird game with P5JS.


This is a link to another Github repository with the source code for the game. You need to open the files, copy and paste the content into files with the same name that you created in your p5 editor. To create the files pipe.js and bird.js, select “Sketch” in the editor’s menu and then “New File”. Enter the file name with extention. For sketch.js and index.html just replace the content of the existing files.

More coding with p5.js, about conditionals

Game, GetToKnow, p5js, Uncategorized

Here is a cheat sheet summarizing the most important methods P5JS provides to create graphics.

The following video introduces you to the concept of conditionals. They allow a program to branch, to do different things depending of the evaluation of the condition. Example:

If an object reaches the border of the canvas, then reverse its moving direction.

In Javascript they are of the form

if ( Boolean Expression ) { do something }.

A Boolean Expression is an expression that returns either True or False. If the expression gives true, the part following inside the curly brackets is executed, otherwise the program continues aftere the curly bracket.

In order to get True or False, you can apply different types of operators, normally on a combination of fixed values and variables. Today we will use relational operators.

A relational operator is of the form <, >, <=, >=, ==, ===, !=. They compare two values of same type, if the result is correct, the operator returns True, otherwise False. Here are two examples for relational operators:

(5 < 10) gives True. Another example: (5 > 1000) gives False.

Conditionals are used with variables. These can contain different values, and depending on their actual value and another fixed or also variable value, the operator returns True or False.

Here is the video:

There is another family of operators used frequently, logical operators. They work on boolean values. The most common operators are AND (in JS “&&”) and OR (in JS “||”).

Example for a logical expression within a conditional:

IF the ball is touching the upper border of the canvas AND at the same time touching the right border of the canvas, THEN do something.

This would express in Javascript as follows assuming that you have defined a vector object ball with the coordinates x and y. You can get its x coordinate with ball.x, the y coordinate with ball.y. Furthermore you need to know that the upper border has the y value 0 and the right border the x value width. Then you could write:

if (ball.x > width && ball.y < 0) {do something}

You can describe the result of a logical AND operator depending on two input values in a table as follows:

Value 1  Value 2   Result

True     True      True

True     False     False

False    True      False

False    False     False

The other important logical operator is the OR operator. It can be described with the following table:

Value 1  Value 2   Result 

True     True      True 

True     False     True 

False    True      True 

False    False     False

Following are some exercises you can open, modify and then save in your account. You will need to manipulate colours, the website below allows you to determine the three integer numbers to choose a colour:


Now you can apply your knowledge about conditionals, Here is a code snippet you can work on and some tasks you can try out:

CodeSnippet Conditional 1

The tasks:

  • Draw a vertical line at x=150, give the line a thickness of 10 units and then make the colour of the background change when you pass the line from left to right.
  • Change the background colour when you go beyond the bottom of the canvas.
  • Change the the background colour when you reach the top right corner. You will need to use a logical operator together with two relational operators.
  • Change the colour of the background to the left of the vertical line x=150 to red when you move the mouse beyond the line. You may need to use a big rectangle to achieve this.
  • Copy the code and make a new project with it. Create a rectangle in the middle of the canvas. When the mouse is hovering over the rectangle, it should change its colour.

Revisit the Snake Game

Here is another full implementation of the snake game. Once you have opened the editor, you need to click on the small flash on the top left of the editor to open the file menu. The full code for the game is in the files script.js and snake.js.

Snake Game V2

Do the following modifications to the game:

  • Change the size of the canvas and see what happens.
  • Change the colour of the food
  • Change the size of the food in order to get a bigger playground.
  • Change the speed of the game
  • Reassign different keys for moving the snake.
  • Use the mouse to control the snake, not the keyboard.

Once you have opened the link, make sure that you have logged into your account. Once you have made changes to the code, you can save them as your own under “File”, “Save”. Don’t forget to give the project a suitable name.

Modify a clock

Here is a video showing how to create a “analog” dial clock with P5JS.

You may look in the References section of to learn more about the methods transform(), rotate, push(), pop() as well as arc(…).

The “%” operator gives the remainder of a division on an integer number. Ex.: 23 % 12 = 11, 4 % 2 = 0, 5 % 2 = 1.

the map() function is defined in the p5js reference as follows:

Re-maps a number from one range to another.

In the example given in the reference, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). So you do not need to do the calculation yourself.

Here is the code for this clock:

p5js Clock


Have a look and modify the clock. Here are some ideas:

  • Change the colours of the indexes.
  • Change the way the time is shown (no index, maybe coloured arcs? Have a look in the video.
  • Create a 24 hour clock.

Micro:bit – Accelerometer, the Game Blocks and a Catch Game Part I

Blocks, Game, micro:bit, Uncategorized

For this game we need to use the accelerometer to sense the orientation of the micro:bit. This sensor is comprehensively described in the documentation. You find it under “Reference”.


Let’s have a look at one sensor, we choose the accelerometer. It measures acceleration, caused by gravity and sudden movements. Here is a sketch explaing about the three coordinates it uses to put the acceleration into numbers. You can measure the acceleration in on direction (x, y, z) at a time. The values change between -1023 and 1023.


Here is the link accelerometer so that you can have a look.

The documentation is interactive, so you can also upload a sketch to the IDE and run it there. Furthermore, you find examples that you can also easily transfer to the editor, no need to rebuild the projects.

Get to know sensors and how to program them.

Get the examples running on the simulator and your micro:bit. As a next step find the documentation for the magnetic sensor and implement a compass.

Game module

In the micro:bit editor under Advanced you find the category “Game”. It contains blocks to make small games.

The small display of the micro:bit contains 5 x 5 LEDs. In the game module you can address each LED with its coordinates (x, y). You may know coordinate systems from school, they have their origin (0,0) always at the lower left corner. In computer science we normally put the origin at the upper left corner.


Create your first game

Following you find the beginnings of a small game. At the beginning of the game a LED will light up at a random location. Then the player needs to move the other LED to that location using the buttons A and B. When he reaches the final position, the display shows “Win!”. The button A is already coded, try to understand what is happening when you press the button. Then finish the game by coding the functionality for button B.


let dir_x = 0
let sprite2: game.LedSprite = null
let sprite1: game.LedSprite = null

sprite1 = game.createSprite(2, 2)
sprite2 = game.createSprite(Math.random(5), Math.random(5))
dir_x = 1

basic.forever(() => {
if (sprite1.isTouching(sprite2)) {

input.onButtonPressed(Button.A, () => {
if (sprite1.isTouchingEdge()) {
dir_x = dir_x * -1
sprite1.change(LedSpriteProperty.X, dir_x)

input.onButtonPressed(Button.B, () => {

Above is the code in Javascript, open the micro:bit Javascript editor, select “{}Javascript” and then copy and paste the code into the editor. Next, select “Blocks” and the code will be converted into the Block language. Here you can now

  • try out the program,
  • figure out what is happening when you press  Button A and
  • then add the missing functionality for button B.