# Infinite Pong

http://itp.jscottdutcher.com/pong3/

This was a frustrating project. I wanted to accomplish more with it than I did, and I know that they are things I can do but I eventually just ran out of time. A lot of that is leaving things to the last minute, which stops me from being able to get the project help that I need. I guess that’s something to be mindful of for the future.

Anyway, I guess this is something of a v1 of this project that I will continue to update.

I started out by looking at someone else’s pong game. I found a simple version written in processing here. I adapted that code for p5 and picked it apart until I understood what all the pieces did:

```//original code borrowed from: http://www.openprocessing.org/sketch/47481

var gameStart = false;
var x = 150; //This is the x where the ball starts
var y = 150; //This is the y where the ball starts
var speedX = 5; //This is the speed of the ball's x coordinate
var speedY = 5; //This is the speed of the ball's y coordinate
var leftColor = 200; //This is the color of the left bar
var rightColor = 128; //This is the color of the right bar
var diam = 20; //This is the diameter of the ball
var rectSize = 150; //This is the size of the right paddle NOTE: When it resets the paddle gets bigger

function setup() {
createCanvas(500, 500);
noStroke();
smooth();
}

function draw() {
background(255);

fill(128, 128, 128);
ellipse(x, y, diam, diam);

fill(leftColor);
rect(0, 0, 20, 500); //This is the size of the left rectangle, but it is just for show
fill(rightColor);
rect(width - 30, mouseY - rectSize / 2, 10, rectSize); //This is the size of the right paddle and how it moves

if (gameStart === true) {

x = x + speedX;//This is the ball movement
y = y + speedY;//This is also the ball movement. Why do we consider these separately?
}

// if ball hits left paddle, invert X direction and apply effects
if (x &gt; width - 30 &amp;&amp; x &lt; width - 20 &amp;&amp; y &gt; mouseY - rectSize / 2 &amp;&amp; y &lt; mouseY + rectSize / 2)
/*
If x is greater than the width of the canvas - 30 and x is less than the width of the canvas - 20
NOTE: I don't understand what the above does it seems to affect the size of the left paddle,
but I don't know why
and y is greater than the top of the rectange and the bottom of the rectangle then:
*/
{
speedX = speedX * -1; //This reverses the direction, I think
x = x + speedX; //This keeps the ball moving
rightColor = 0; //This makes the left paddle black for a sec
fill(random(0, 128), random(0, 128), random(0, 128));//This is the splat color
var diamHit = random(75, 150);//This is the splat animation
ellipse(x, y, diamHit, diamHit);//This is also the splat animation
rectSize = rectSize - 10; //This makes the left paddle smaller
rectSize = constrain(rectSize, 10, 150); //This keeps the left paddle from disapearing compleatly
print("pow");
}

// if ball hits wall, change direction of X
else if (x &lt; 25) //if the ball is less than this margin on the right side then: { speedX = speedX * -1.1;//This reverses the direction and makes it faster x = x + speedX; //This keeps the ball moving print("bam"); } else { //This resets the colors of the paddles to whatever they were before the 'hit' animation leftColor = 128; rightColor = 128; } // resets things if you lose if (x &gt; width) {
//If x moves out of frame
gameStart = false; //State resets
x = 150; //The ball goes back to here
y = 150; //and here
speedX = random(3, 5); //speed is random again
speedY = random(3, 5); //speed is random again
rectSize = 150; //the size of the right paddle resets
}

// if ball hits up or down, change direction of Y
if (y &gt; height || y &lt; 0)
//If y is greater than the height of the canvas or less than 0 then:
{
speedY = speedY * -1; //reverse the direction of the motion
y = y + speedY; //keeps things moving
print("wham");
}
}

function mousePressed() { //changes the state at the beginning when mouse is pressed
gameStart = true;
}```

After I felt like I had a handle on things I set off writing my own code. I started with using keypresses to make the paddles work, as I wanted two people to be able to play this on one machine. After that seemed to be working I added the ball logic to the game. This is where I ran into some trouble.

I think that because I am describing the edges of the paddles instead of all of them the ball is getting caught behind the paddles and sometimes comes back into the canvas.

• Intro screen with directions and a start button.
• Sound when the ball hit a paddle or the wall
• More balls, like one more every 5 seconds
```var gameStart = false;
x: 10,
y: 100,
w: 15,
h: 100,
};
x: 770,
y: 100,
w: 15,
h: 100,
};
var ball = {
x: 50,
y: 20,
diam: 25,
speedX: 5,
speedY: 5,
};
var speedX = 5;
var speedY = 5;
var s = "Welcome to Infinte Pong! Player one controlls their paddle with the a and z keys. Player two controls their paddle with the /? key and the '\" key. Press the space bar to begin";

/*function down(x){
x = x + 5;
}*/

function setup() {
createCanvas(800, 600);
smooth();
//background(0);
//fill(255)
//text(s, 10, 10, 70, 80);
}

function draw() {

//if (keyPressed(32) === true) {
//gameStart === true;
//}

//if (gameStart === true) {
background(64, 161, 76);
noStroke();

fill(0, 50, 50);
if (keyIsDown(90) === true) {
}
}
fill(50, 50, 0);
if (keyIsDown(191) === true) { //move paddle down
}
}
//Create ball
fill(198, 237, 44);
ellipse(ball.x, ball.y, ball.diam, ball.diam);

ball.x = ball.x + speedX;
ball.y = ball.y + speedY;
//If if the ball hits the top or bottom of the court it bounces
if (ball.y + 12.5 &gt; height || ball.y &lt; 12.5 &amp;&amp; ball.x &gt; 0 &amp;&amp; ball.x &lt; width &amp;&amp; ball.y &gt; 0 &amp;&amp; ball.y &lt; height) {
speedY = speedY * -1; //reverse the direction of the motion
ball.y = ball.y + speedY; //keeps things moving
print("wham");
}

//if the ball hits the left wall
/* if (ball.x &lt; 0) {
speedX = speedX * -1; //This reverses the direction, I think
ball.x = ball.x + speedX; //This keeps the ball moving
print("pow");*/

//if the ball hits the front of the left paddle
speedY = speedY * -1; //reverse the direction of the motion
ball.y = ball.y + speedY; //keeps things moving
print("bam top");
}

//if the edge of the ball is higher than rect y plus height and
//the x of the ball is greater than the x of the rect and less than the width
else if (ball.y + 12.5 &lt; paddleR.y + paddleR.h &amp;&amp; ball.y &gt; paddleR.y &amp;&amp; ball.x &gt; paddleR.x &amp;&amp; ball.x &lt; paddleR.x + paddleR.h &amp;&amp; ball.x &gt; 0 &amp;&amp; ball.x &lt; width &amp;&amp; ball.y &gt; 0 &amp;&amp; ball.y &lt; height) {
speedY = speedY * -1; //reverse the direction of the motion
ball.y = ball.y + speedY; //keeps things moving
print("bam bottom");
}
//}
}
```