# Question About Game Idea (Breakout / Arkanoid)

**URL:** <https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565>\
**Category:** Coding Questions\
**Created:** [August 31, 2022, 1:03am UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565 "2022-08-31T01:03:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 1:03am UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/1 "2022-08-31T01:03:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 31, 2022, 4:58am UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/2 "2022-08-31T04:58:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 6:57am UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/3 "2022-08-31T06:57:02Z")

</div>

We cannot make this for you.

Please check the examples (see [Examples / Processing.org](https://processing.org/examples)) 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

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 3:03pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/4 "2022-08-31T15:03:45Z")

</div>

@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:

```auto
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);

  
}
  

```

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 3:07pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/5 "2022-08-31T15:07:26Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [August 31, 2022, 3:56pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/6 "2022-08-31T15:56:51Z")

</div>

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](https://en.wikipedia.org/wiki/Collision_detection). Just to show that it is a famous topic, you probably should search here (and/or the old forum) first.

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 4:15pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/7 "2022-08-31T16:15:13Z")

</div>

ok i will do that thanks for the tip 👍

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 5:02pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/8 "2022-08-31T17:02:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:19pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/9 "2022-08-31T19:19:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 7:20pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/10 "2022-08-31T19:20:56Z")

</div>

The same, it doesn’t matter

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:22pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/11 "2022-08-31T19:22:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 7:27pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/12 "2022-08-31T19:27:04Z")

</div>

> [@newprogrammer12](#):
>
> `rectMode(CENTER);`

It’s different when you use this

The check whether the ball is inside the paddle is different

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:30pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/13 "2022-08-31T19:30:10Z")

</div>

i changed it to rectMode(CORNER)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 7:36pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/14 "2022-08-31T19:36:12Z")

</div>

> [@newprogrammer12](#):
>
> i changed it to rectMode(CORNER)

yeah, well then the paddle is not centered to mouseX

**Approach with rectMode(CENTER);**

when you use

` rectMode(CENTER);`

you need

```auto
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

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:42pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/15 "2022-08-31T19:42:31Z")

</div>

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.

```auto
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;
        
  }
  
 
  

}
  

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 7:48pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/16 "2022-08-31T19:48:26Z")

</div>

> [@newprogrammer12](#):
>
> ```auto
> float ballx = width*0.5;
> float bally = height*0.8;
> 
> ```

won’t work before size command

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:52pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/17 "2022-08-31T19:52:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 31, 2022, 7:52pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/18 "2022-08-31T19:52:54Z")

</div>

my version

```auto

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 
//

```

---

<div class="post-metadata">

**Author:** ![newprogrammer12](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@newprogrammer12](https://discourse.processing.org/u/newprogrammer12)\
**Post date:** [August 31, 2022, 7:53pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/19 "2022-08-31T19:53:55Z")

</div>

ahhhhhh i see that makes sense

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [August 31, 2022, 7:55pm UTC](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565/20 "2022-08-31T19:55:17Z")

</div>

> what do you mean by that?

Before `setup`, there is no `width` or `heigh`t yet, those get initialized at `setup`.

[Next page](https://discourse.processing.org/t/question-about-game-idea-breakout-arkanoid/38565.md?page=2)