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 > 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");
    }
  //}
}

Leave a Reply

Your email address will not be published. Required fields are marked *