I thought programming would have been really hard, but this wasn’t

Activity 2b – Creating a Pong clone

• 
  Login to your TouchDevelop account.
  
• 
  Select the “Create Script” button & select “physics game starter” which creates a basic game script that we can use as a template to save a bit of time.
  
• 
  Name the script “PONG” and select Create.
  
• 
  Go into the Main action and set the gravity to (0, 0).
  
• 
  Add a line of code to set the game board to have a black background (as shown opposite).
  

• 
  Next we will create a ball for the game. Enter the lines of code below into the main action, which will create a white ball in the middle of the screen and assign it a random speed. Use the comment button to enter the comment on the first line. In any program language it’s important to comment your code. Comments are just descriptions to explain what different bits of code do, to make it easier for someone else looking at the code to understand it. Comments in touchdevelop are colour coded in grey. Remember when you want to create a global variable such as the ball below, you must first create a variable, rename it and then promote it to data. In the first line of code below we create a global variable called ball and create a 20 by 20 ellipse (filled in circle) for the ball. Next we set the position of the ball to the middle of the game board, by dividing the game board width & height by 2 and assigning those values to the x & y positions of ball. Then we randomly create the x & y speed for the ball, by setting the x speed to 100 + a random value between 0 & 99 (100 to 199) and the y speed to 50 + a random value between 0 & 99 (50 to 149). Then we use an IF statement to set the x speed randomly to negative, by checking if the result of a random command gives us 1. We repeat this process for the y speed.
  
  
• 
  Run the script and check that a white ball appears in the middle of a black board and that the ball moves in a random direction.
  
• 
  In pong the ball bounces back off the top and bottom walls and goes through the left and right sides and reappears at the opposite side. We need to check for the ball hitting the four walls and make it respond accordingly. We will use IF statements for this in the gameloop, however when doing this we must consider that in sprites the position is the centre of the sprite, as shown in the diagram opposite. If we take this into consideration, then depending on which side of the sprite we want to check, we will need to add or subtract half of the width or half of the height, from the centre point to get to the edge.
  
• 
  We will need to re-fire the ball sprite when it leaves the left or right sides of the screen, so let’s extract the code which does this in the main action, into its own action called fireball.
  
  

• 
  Enter the following lines of code below into the gameloop event.
  

• 
  The first IF statements checks for the ball hitting the top of the screen by subtracting half of the ball height from the ball y position (to get the top of the ball) and then checks if this position is less than or equal to zero. If it has hit, we use a Math absolute function to set the y speed to positive, which will make the ball move downwards. The reason we don’t just reverse the speed is because this sometimes causes a bug in pong where the ball gets jammed against the top or bottom of the screen, as the speed keeps reversing back and forward.
  
• 
  The second IF statement checks for the ball hitting the bottom of the screen by adding half of the ball height onto the ball y position (to get the bottom of the ball) and checks if this position is greater than or equal to the board height. If it has hit, we negate the absolute value of the y speed to force it to be negative, which moves the ball upwards.
  
• 
  The third IF checks if the ball has fully left the left hand side of the screen, by checking if the ball x position plus half of the ball width is less than zero. So basically we are checking if the right hand side of the ball leaves the screen on the left. If this occurs we re-fire the ball from the centre of the screen with a new random speed.
  
• 
  Run the script and make sure the ball bounces off the top and bottom and re-fires from the middle when it leaves either side of the screen.
  

• 
  Go back into the Main action and add two bats, as shown below. We are setting one bat to red and placing it 80 pixels in from the left side and putting it at half the board height vertically. We are making the other bat yellow, bringing it in 80 from the right hand side of the board and also placing it at vertically in the middle. I’m suggesting we bring the bats in 80 from each side to give room for a player to put their finger behind the bat when playing on a touch screen device.
  

• 
  In gameloop add the following lines of code which check for the ball hitting either bat. If the ball does hit a bat then this will change the x speed to make the ball move in the correct direction, so that it appears to bounce off the bat. We are basically forcing the x speed of the ball to be positive when it hits the left hand side bat and negative if it hits the right bat.
  

• 
  Also in gameloop add the following code, which allows the user to control the first bat by touching the screen and sets the yellow bat to move up and down itself depending on whether the bat is above or below the bat.
  

• 
  Run the script and check that it works. If you are using a mouse, simulate touch by holding the LMB down and moving the mouse up and down.
  
• 
  To make the game more interesting I suggest you add the following lines of code, which gradually increase the speed of the ball over time and will make the game more competitive. We do this by multiplying the x and y speed properties of the ball by a new variable called acceleration. Put this into gameloop and run the script and test it.
  

• 
  We need to add score and lives to make our script into a game. Go back into main and declare the following global variables for score and lives, also declare 2 text sprites to display the score and lives.
  

• 
  At the top of gameloop add in the following 2 lines to update the text sprites with the current score and lives.
  

• 
  Let’s add in an action called ENDGAME like we did in the previous game we created.
  

• 
  Change the 2 lines of code which check for the ball leaving the left and right sides, into 2 separate IF statements, which also assign points if the player scores a goal and subtract lives if the computer controlled bat scores a goal. It also contains an IF which checks for lives reaching zero and calls the endgame action when it does.
  

• 
  Run the script and test the game as you should now have a working game.
  
• 
  The original pong had special “game physics” which weren’t really representative of real world physics, but nevertheless make the game more interesting, as it allowed you to aim the ball. Basically when the ball hit near the top of the bat the ball it went upwards and when the ball hit near the bottom of the bat it went downwards. The farther away from the centre of the bat the ball hit, the more it would change direction vertically. Apply the following lines of code marked in red to do an approximation of this effect. The first line uses maths to calculate the magnitude of the speed. We then work out the difference between the ball position and the bat position when they collide and multiple this difference by the magnitude of the speed to set the new speed on the Y axis.
  

• 
  Run the script and check that it works.