Question About Game Idea (Breakout / Arkanoid)

Processing Coding Questions
1

How could you make a ball bounce on a rectangle on the bottom of the screen that is controlled by mouseX? I have only been programming a couple days and haven’t been able to find any help online. I’m trying to code a brick smash game.

1 Like
2

Is this your project: https://stackoverflow.com/questions/72412655/how-to-make-object-dissapear-when-hit

3

We cannot make this for you.

Please check the examples (see Examples / Processing.org) and start by writing your own code.

Start by having a ball bouncing at the screen border.

Draw a rectangle at mouseX: rect(mouseX, height-30, 100, 20); as your paddle.

Step by step…

Show your code and ask precise questions then.

Chrisir

2 Likes
4

@Chrisir
So far I have made the ellipse bounce around the screen, and respawn once it goes past the bottom of the screen. I have also made the rectangle controlled by mouseX. Here is what I have so far:

float ballx = width*0.5;
float bally = height*0.8;
float xspeed = 7;
float yspeed = 4;


void setup() {
  size(800,800);
 
 
}
   
void reset() {
  ballx=400;
  bally=200;
}
void draw() {
  background(0);
  //ball
  fill(28,200,30);
  ellipse(ballx,bally,40,40);
  ballx=ballx+xspeed;
  bally=bally+yspeed;
  
  //boundaries

 if (ballx>width){
    xspeed=-7;
  }
  if (ballx<0){
    xspeed=7;
  }
  
  if (bally<0){
    yspeed=4;
  }
  if (bally>800) {
    reset();
  }
  //Paddle
  fill(255);
  rectMode(CENTER);
  rect(mouseX, 795, 150, 70);


  
}
5

@Chrisir I think my main question is how would you write an if statement that basically said: if the ball’s radius comes in contact with the rectangles radius, the ball’s y direction changes.

1 Like
6

It might help to know the name of what you’re after: Collision Detection. Look for that and you will find a lot of stuff to help you.

Even in wikipedia. Just to show that it is a famous topic, you probably should search here (and/or the old forum) first.

3 Likes
7

ok i will do that thanks for the tip :+1:

2 Likes
8

It’s really not hard

You don’t want a reflection on your lower screen border

Instead you want a reflection on the rectangle

So ball X must be inside rect

(ballX>rectX && ballX<rectX+rectWidth)

and ballY must be <= rectY-3 or so

2 Likes
9

@Chrisir
how would this work is the rectangles x value is getting controlled by mouseX?

10

The same, it doesn’t matter

1 Like
11

@Chrisir
ok let me try that out. thanks again!

1 Like
12

It’s different when you use this

The check whether the ball is inside the paddle is different

1 Like
13

i changed it to rectMode(CORNER)

14

yeah, well then the paddle is not centered to mouseX

Approach with rectMode(CENTER);

when you use

rectMode(CENTER);

you need

if ( ballX>mouseX-rectWidth/2 && 
ballX<mouseX+rectWidth/2 && 
ballY<mouseY-(rectHeight/2)-3) {
      //
}

here we take into account that mouseX is in the middle of the paddle and therefore the paddle

  • has its left side half of the width left from its center and
  • the same for the right side: half of the width right from its center

We check the ball against the 2 sides.

Same for mouseY

1 Like
15

i tried to do it but the code is acting like the mouseX position is more important than the y positions on the ball and the rectangle. basically whenever the ellipse reaches the mouseX position on the screen it starts glitching around.

float ballx = width*0.5;
float bally = height*0.8;
float ballr = 20;
float xspeed = 7;
float yspeed = 4;
float recty = 750;
float rectw = 150;
float recth = 40;


void setup() {
  size(800,800);
 
 
}
   
void reset() {
  ballx=400;
  bally=200;
}
void draw() {
  background(0);
  //ball
  fill(28,200,30);
  ellipse(ballx,bally,40,40);
  ballx=ballx+xspeed;
  bally=bally+yspeed;
  
  fill(255);
  rectMode(CENTER);
  rect(mouseX, recty, rectw, recth);
  
  //boundaries

 if (ballx>width){
    xspeed=-7;
  }
  if (ballx<0){
    xspeed=7;
  }
  
  if (bally<0){
    yspeed=4;
  }
  if (bally>800) {
    reset();
  }
  if (ballx>mouseX-rectw/2 && 
      ballx<mouseX+rectw/2 && 
      bally<recty+40) {
        yspeed *= -4;
        
  }
  
 
  

}
16

won’t work before size command

1 Like
17

what do you mean by that? do i need to change the size command or move it somewhere else in the code?

18

my version



float ballx;
float bally;

float ballr = 20;

float xspeed = 7;
float yspeed = 4;

float recty = 750;
float rectw = 150;
float recth = 40;


void setup() {
  size(800, 800);

  ballx = width*0.5;
  bally = height*0.8;
}

void draw() {
  background(0);
  //ball
  fill(28, 200, 30);
  ellipse(ballx, bally, 40, 40);
  ballx=ballx+xspeed;
  bally=bally+yspeed;

  fill(255);
  rectMode(CENTER);
  rect(mouseX, recty, rectw, recth);

  //boundaries

  if (ballx>width) {
    xspeed=-7;
  }
  if (ballx<0) {
    xspeed=7;
  }

  if (bally<0) {
    yspeed=4;
  }

  if (bally-ballr/2>height) {
    reset();
  } else if (ballx>mouseX-rectw/2 && 
    ballx<mouseX+rectw/2 &&
    bally+ballr/2>recty-23 ) {
    yspeed = -4;
  }
}//func 

void reset() {
  ballx=400;
  bally=200;

  xspeed = 7;
  yspeed = 4;
}//func 
//
1 Like
19

ahhhhhh i see that makes sense

20

what do you mean by that?

Before setup, there is no width or height yet, those get initialized at setup.

1 Like