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 > width - 30 && x < width - 20 && y > mouseY - rectSize / 2 && y < 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 < 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 > 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 > height || y < 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.
Additional things I wanted to add:
- 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;
var paddleL = {
x: 10,
y: 100,
w: 15,
h: 100,
};
var paddleR = {
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 paddleSpeed = 12;
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();
//Create the left paddle
fill(0, 50, 50);
rect(paddleL.x, paddleL.y, paddleL.w, paddleL.h);
//Control the left paddle
if (keyIsDown(90) === true) {
if (paddleL.y + paddleL.h < height - 5) { paddleL.y = paddleL.y + paddleSpeed; } } if (keyIsDown(65) === true) { if (paddleL.y > 5) {
paddleL.y = paddleL.y - paddleSpeed;
}
}
//Create the right paddle
fill(50, 50, 0);
rect(paddleR.x, paddleR.y, paddleR.w, paddleR.h);
//Control the right paddle
if (keyIsDown(191) === true) { //move paddle down
if (paddleR.y + paddleR.h < height - 5) { paddleR.y = paddleR.y + paddleSpeed; } } if (keyIsDown(222) === true) { //move paddle up if (paddleR.y > 5) {
paddleR.y = paddleR.y - paddleSpeed;
}
}
//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 > height || ball.y < 12.5 && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < 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 < 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
if (ball.x - 12.5 < paddleL.x + paddleL.w && ball.y + 12.5 > paddleL.y && ball.y + 12.5 < paddleL.y + paddleL.h && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { speedX = speedX * -1; //This reverses the direction, I think ball.x = ball.x + speedX; //This keeps the ball moving print("pow"); } //if the x of the edge ball is more than the x of the right paddle and //the y of the ball is greater than the y of the rectangle and //less than the y of the rectangle plus the height if (ball.x + 12.5 > paddleR.x && ball.y + 12.5 > paddleR.y && ball.y + 12.5 < paddleR.y + paddleR.h&& ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { speedX = speedX * -1; //This reverses the direction, I think ball.x = ball.x + speedX; //This keeps the ball moving print("bam"); } //if the edge of the ball is lower than rect y 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 > paddleR.y && ball.y < paddleR.y + paddleR.y + paddleR.h && ball.x + 12.5 > paddleR.x && ball.x < paddleR.x + paddleR.x&& ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) {
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 < paddleR.y + paddleR.h && ball.y > paddleR.y && ball.x > paddleR.x && ball.x < paddleR.x + paddleR.h && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) {
speedY = speedY * -1; //reverse the direction of the motion
ball.y = ball.y + speedY; //keeps things moving
print("bam bottom");
}
//}
}