For this project, I created a virtual version of wall tennis. 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 infinite, I controlled the distance the ball traveled by confiding it to the canvas size (600,600).
Then, I made sure that the paddle 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.
My area of conflict was making the ball bounce from the wall and not have it go on to infinity. I tried applying the same rule of bouncing the ball on the paddle to the wall, but them I remembered that the wall is stationary.
https://editor.p5js.org/cguiran1/sketches/YiiIKQmgj