top of page

Interactive Wall Tennis

For this project, I created a virtual version of wall tennis using p5.js. Essentially, there is one player, one ball and a wall. When the player serves, the ball bounces to the wall and back to them. If the player misses the ball, a number will be added to the score board.

 

The first step I took was creating the paddle, ball and wall. After, I created a variable to keep track of the balls movement, ballX and ballY. Seeing that the ball would bounce off the screen to infinity, I controlled the distance the ball traveled by confiding it to the canvas size (600,600).

 

Then, I kept track of the paddle and made sure it was moving up and down using the up and down arrow on the screen. I created a statement in which when button "UP Arrow" is clicked, move the paddle up and vise versa for down.

 

This game can intensify if the player wants to change the speed of the ball which can be down by changing the xSpeed variable to a larger number.

 

To make this more enjoyable, I add a score board to show the player how many times they missed. I made a condition saying if ballX is less than zero, increase score board and put the ball back in the middle of screen to restart the game.

bottom of page