# Help with the game: pong

Good evening, I’m pretty far with the game, but I can’t get the ball through … can someone help me?

Here the Code:

``````int spieler = 1;
int ball = 1;
float r = 7;
float spieler_x;
float spieler_y;
float ball_x;
float ball_y;
float ball_ge_x;
float ball_ge_y;

void setup() {
spieler_x = width/9;
spieler_y = height/2;
ball_x = width/2;
ball_y = width/2;
ball_ge_x = -4;
ball_ge_y = 0;
fullScreen();
orientation(PORTRAIT);
}

void draw() {
background(0);
///////////
//spieler//
///////////
if (spieler==1) {
rect(width/9, height/2, width/12, height/6);
if (mousePressed) {
spieler++;
}
} else {
rect(spieler_x, spieler_y, width/12, height/6);
}
fill(#300000);
rect(width/5.5, height/1.3, width/6, height/12, r);
if (mousePressed) {
if (mouseX>width/5.5 && mouseX <width/5.5+height/6 && mouseY>height/1.3 && mouseY <height/1.3+width/12) {
if (spieler_y < height/2) {
spieler_y = spieler_y + 10;
}
}
}
fill(#002F00);
rect(width/1.5, height/1.3, width/6, height/12, r);
if (mousePressed) {
if (mouseX>width/1.5 && mouseX <width/1.5+width/6 && mouseY>height/1.3 && mouseY <height/1.3+height/12) {
if (spieler_y > height/8) {
spieler_y = spieler_y - 10;
}
}
}
////////////
//  ball  //
////////////
ball_x = ball_x + ball_ge_x;
ball_y = ball_y + ball_ge_y;
if (ball==1) {
ellipse(ball_x, ball_y, width/12, height/24);
if (mousePressed) {
ball++;
}
} else {
ellipse(ball_x, ball_y, width/12, height/24);
}
if(ball_x < width/9){
if(ball_y < (spieler_y + height/2) && ball_y > (spieler_y -height/2)){
ball_ge_x = (-ball_ge_x) +1;
}
} else {

}
}

``````

I’ll help, but in a totally different way than you would expect.

Your code is, honestly, a mess. You have if statements all over the place, empty else statements, and I can’t understand the logic at all.

Let’s start over. First, we want to start with an empty sketch. But that alone is boring, so let’s think about what things there are in a game of Pong. Traditionally, Pong has a Ball and two Paddles. To keep things tidy, we’ll make a couple of classes for these things. That way we can encapsulate their logic properly.

``````class Ball {
Ball() {
}
}

}
}

void setup() {
size(600, 400);
}

void draw() {
background(0);
}
``````

Of course, nothing happens in this sketch so far. We need to add some logic to draw the Ball and paddles, and create a couple of these objects too! We can add this logic to the classes, and draw these objects in draw().

``````class Ball {
float x, y, v, dx, dy;
int s;
Ball() {
x = width/2;
y = height/2;
v = 5;
s = 20;
float a = random(TWO_PI);
dx = v * cos(a);
dy = v * sin(a);
}
void draw() {
move();
ellipse(x, y, s, s);
}
void move() {
x += dx;
y += dy;
}
}

float x, y;
x = 20;
if ( onLeft ) {
x = width-20;
}
y = height/2;
}
void draw() {
rect(x-10, y-50, 20, 100);
}
}

Ball ball;

void setup() {
size(600, 400);
// Create ball.
ball = new Ball();
}

void draw() {
background(0);
// Draw ball.
ball.draw();
}
``````

This already looks like a pong game! And, well, it should, because it’s doing all the drawing of the objects in the game.

But some logic is still missing. For one, the Ball doesn’t care about flying of the top or bottom. It also needs to bounce off the panels, and needs to reset if it flies off the left or right sides. We need the paddles to move as well. We also need some logic to track and possibly display the score.

Let’s try adding some of that now.

``````class Score {
int player, computer;
Score(){
player = 0;
computer = 0;
}
void player_point(){
player++;
}
void computer_point(){
computer++;
}
void draw(){
text("" + player + " - " + computer, width/2, 30);
}
}

class Ball {
float x, y, v, dx, dy;
int s;
Ball() {
v = 5;
s = 20;
reset();
}
void reset(){
x = width/2;
y = height/2;
float a = random(TWO_PI);
dx = v * cos(a);
dy = v * sin(a);
// Avoid "stalemate".
if( abs(dx) < 0.1 ){
reset();
}
}
void draw() {
move();
ellipse(x, y, s, s);
}
void move() {
x += dx;
y += dy;
// Bounce off top and bottom.
if( y < s/2.0){
dy *= -1;
y = s/2.0;
}
if( y > height - s/2.0){
dy *= -1;
y = height - s/2.0;
}
// Detect off left or right side.
if( x < -10 ){
score.computer_point();
reset();
}
if( x > width + 10 ){
score.player_point();
reset();
}
}
}

float x, y;
boolean onLeft;
onLeft = _onLeft;
x = 20;
if ( !onLeft ) {
x = width-20;
}
y = height/2;
}
void draw() {
move();
rect(x-10, y-50, 20, 100);
}
void move() {
if (onLeft) { // Player-controlled paddle.
if ( keyUp && !keyDown ) {
y--;
}
if ( keyDown && !keyUp ) {
y++;
}
} else { // Computer-controlled paddle.
if ( ball.y > y ) {
y++;
} else {
y--;
}
}
if (y < 50) {
y = 50;
}
if (y > height-50) {
y = height-50;
}
}
}

Ball ball;
Score score;
// Global key state tracking for the left paddle.
boolean keyUp, keyDown;

void setup() {
size(600, 400);
noStroke();
textSize(32);
textAlign(CENTER);
// Create ball.
ball = new Ball();
// Create scoreboard.
score = new Score();
}

void draw() {
background(0);
// Draw ball.
ball.draw();
// Draw scoreboard.
score.draw();
}

// Code to deal with key pressing.

void keyHandle(boolean b) {
if ( keyCode == UP ) {
keyUp = b;
}
if ( keyCode == DOWN ) {
keyDown = b;
}
}

void keyPressed() {
keyHandle(true);
}

void keyReleased() {
keyHandle(false);
}
``````

Well, it mostly works. The ball just needs to bounce off the paddles now.

I’ll leave adding that logic as an exercise for you. Notice that you can see clearly where this logic should be added! That’s because the code is structured in a way that makes sense…

does it work with fullScreen () ;?

Yes! Just change the call to `size()` to be a call to `fullScreen()` instead.

You may wish to adjust the sizes of some of the game objects, of course. I would suggest having variables for their sizes in the classes for them, and setting those in the constructors so you aren’t doing many divisions every frame. Then just use those variables when drawing or doing collision logic.

These changes are also left as an exercise for you.

``````int spieler = 1;
int ball = 1;
float r = 7;
float spieler_x;
float spieler_y;
float ball_x;
float ball_y;
float ball_ge_x;
float ball_ge_y;

void setup() {
spieler_x = width/9;
spieler_y = height/2;
ball_x = width/2;
ball_y = width/2;
ball_ge_x = -4;
ball_ge_y = 0;
fullScreen();
orientation(PORTRAIT);
}

void draw() {
background(0);
///////////
//spieler//
///////////
if (spieler==1) {
rect(width/9, height/2, width/12, height/6);
if (mousePressed) {
spieler++;
}
} else {
rect(spieler_x, spieler_y, width/12, height/6);
}
fill(#300000);
rect(width/5.5, height/1.3, width/6, height/12, r);
if (mousePressed) {
if (mouseX>width/5.5 && mouseX <width/5.5+height/6 && mouseY>height/1.3 && mouseY <height/1.3+width/12) {
if (spieler_y < height/2) {
spieler_y = spieler_y + 10;
}
}
}
fill(#002F00);
rect(width/1.5, height/1.3, width/6, height/12, r);
if (mousePressed) {
if (mouseX>width/1.5 && mouseX <width/1.5+width/6 && mouseY>height/1.3 && mouseY <height/1.3+height/12) {
if (spieler_y > height/8) {
spieler_y = spieler_y - 10;
}
}
}
////////////
//  ball  //
////////////
ball_x = ball_x + ball_ge_x;
ball_y = ball_y + ball_ge_y;
if (ball==1) {
ellipse(ball_x, ball_y, width/12, height/24);
if (mousePressed) {
ball++;
}
} else {
ellipse(ball_x, ball_y, width/12, height/24);
}
if(ball_x < width/9){
if(ball_y < (spieler_y + height/2) && ball_y > (spieler_y -height/2)){
ball_ge_x = (-ball_ge_x) +1;
}
} else {

}
}
``````

@TfGuy44 == can you help me with the ball, I don’t just need the ball anymore

When I run your code, this is what I see:

Can you explain to me what that is?
I’m guessing the ball is the ellipse at the bottom. Is it?