Making my ball move and bounce of the borders /making my paddle move on keyevents

[Matthias Utrata]

Piet Souris wrote:Can you have  look at the code in PasteBin? The startup-screen doesn't go away after a mouseclick.

I know sadly. That is one problem that I have now, since I tried to seperate both methods. The run method just handling the movements of the ball and the paddle and the mainGame method, operating all of it

[Piet Souris]

Matthias Utrata wrote:I have no idea how Lists work and no idea what I should do with a list

Have a look here: The java Collections Framework

A list (for instance an ArrayList) is like a normal array, but wih the big advantage that it has a flexible size, that increases and decreases as necessary. Now, you have a BreakOut class that extends Application and contains data and methods that define what your BreakOut can do. Likewise, a Brick class has data and methods that define what a Brick can do. For instance:

class Brick {
    private Rectangle rectangle;
    private Colour color;
    private int hitsTaken = 0;
    private int hitsToDestroy;
    
    Brick(double x, double y, double width, double height, Color c, int hitsToDestry) {
        rectangle = New Rectangle(...);
        et cetera
    }

    public void draw(GraphicsContext g) {
        Color temp = g.getColor();   // or something like that
        g.setColor(c);
        g.drawRectangle(....);
        g.setColor(temp);   // restore the original color
    }

    public int checkCollision(Ball b) {
        // return value: 0 if no hit, 1 if upper side its hit, 2 if right side is hit, et cetera)
        toBeImplemented
        if return value > 0, then hitsTaken += 1 et cetera.
    }
}

This is an example and may need some modifications

Now, make a field List<Brick> bricks, and in your setUp you do:

for (int row = 1; row <= 10; row++) {
    for (int col = 1; col <= 3; col++) {
        Brick brick = new Brick(...) ;  // like you did before
        bricks.add(brick);
    }
}

in your display or run method:

for (var brick: bricks) if (!brick.isDestroyed) brick.draw(g);

and as check for the collisions:

for (var brick: bricks) {
    int collison = brick.checkCollision(ball);
    if (collision == 0) continue;
    if (collision == 1) ball.vY = -ball.vY;
    // et cetera; this can be done in a much handier way, for later
}

As you see, I turned the ball into an Object as well. Same holds for Paddle.

This way, you get a much more organized code. Do see it as an example and use or change it at will.
   

[Piet Souris]

Matthias Utrata wrote:I know sadly. That is one problem that I have now, since I tried to seperate both methods. The run method just handling the movements of the ball and the paddle and the mainGame method, operating all of it

Yes, I noticed that the part of the code that cleared the canvas and drew all the rectangles was vanished. But knowing the formulas you used to get all these bricks into position, with gapXs and gapYs, courage sank into my shoes (Dutch saying) to do it myself    

[Matthias Utrata]

Is this still manageable to change for today? And to complete it? I am honestly frustrated and no idea what I should change now.

[Matthias Utrata]

I only wanna make it work with how it is right now. I dont wanna change half of it again and start from scratch. I only have 1 day left for this.

[Piet Souris]

Well, then tell me exactly what your goal is: should the score be displayed? Should a new ball appear when the current ball disappears from the canvas? Should bricks be destroyed? Then I can estimate what needs to be done.

[Matthias Utrata]

Okay so. From my starting screen I have right now, should the game start then. Paddle, ball and the targets. Each target takes 2 hits until it disappears. After the first hit, it changes color and after the second hit, it disappear and the scores get a 1 added. If the ball goes out of the bottom with, there should be a simple game over screen with the score. And when all bricks are destroyed, there should be a congratulations screen with the points

[Piet Souris]

Right. Then this is my advice:

1) the collision-detection was not 100%. So, fix that.

2) when the bricks are drawn, you use a nested for-loop to draw the rectangles. Now, we do not know if a certain rectangle is hit, or how much. Since you don't want to use classes to hold that information, I can only think of setting up a 2D array, say hits[10][3], and each time that you draw a rectangle for row x and column y, check for collision and if so, do 'hits[x][y] += 1'. And next time when you are drawing, check the value of hits[x][y]. Do not draw the rectangle when that value == 2, and do not do a collision check in that case.

3) showing the score is easy, that is just like what you do in your welcome screen

4) and the same for the closing screen.

Hope you get it done before tomorrow.

[Matthias Utrata]

How do I activate the game though? Because I am stuck on my starting screen. How do I enter the game then?

[Piet Souris]

In a previous code you had a Timeline, that you activated with: t.play().

And in your run-method, you first cleared the background, before doing all the drawings. That all is missing from your pastebin code. Therefore you keep looking at that welcome screen.
When a game is over, stop the timeline, and show that last screen.

[Matthias Utrata]

I changed it because it was always repainting the bricks, when I cleared them.

[Piet Souris]

Yes, but that is because you had no way of telling if a brick was hit (let alone twice) and so every brick was drawn. As you may have noticed (?), many of my replies were meant to solve this problem.

[Matthias Utrata]

Yes, but I did not quite get it and I now ruined my code on accident

[Matthias Utrata]

No, nevermind I did not. I saved it.

[Matthias Utrata]

How about we try to solve step 2 first? I wanna make the collision detection after all the main problems

[Matthias Utrata]

I have now initiated two more variables maxRow and maxCol, which display the maximum rows and maximum columns of the bricks. The 2d array hit has the size of these two variables. Does that make sense?

[Matthias Utrata]

if (hit[row][col] == 0){
                        targets.fillRect(col * gapX + startX, row * gapY + startY, brickW, brickH);
                    }

I tried to do that now, so when the value in this position equals 0, then the targets should be drawn, but it only throws a bunch of error messages. Why does that happen?

[Piet Souris]

Matthias Utrata wrote:How about we try to solve step 2 first? I wanna make the collision detection after all the main problems

Good idea.

[Piet Souris]

Matthias Utrata wrote:I have now initiated two more variables maxRow and maxCol, which display the maximum rows and maximum columns of the bricks. The 2d array hit has the size of these two variables. Does that make sense?

It certainly does.

[Piet Souris]

Matthias Utrata wrote:I tried to do that now, so when the value in this position equals 0, then the targets should be drawn, but it only throws a bunch of error messages. Why does that happen?

Can you show these error messages? The code seems oke to me.

[Matthias Utrata]

Exception in thread "JavaFX Application Thread" java.lang.ArrayIndexOutOfBoundsException: 1
	at Breakout.mainGame(Breakout.java:137)
	at Breakout.lambda$start$0(Breakout.java:60)
	at com.sun.scenario.animation.shared.TimelineClipCore.visitKeyFrame(TimelineClipCore.java:239)
	at com.sun.scenario.animation.shared.TimelineClipCore.playTo(TimelineClipCore.java:180)
	at javafx.animation.Timeline.impl_playTo(Timeline.java:176)
	at javafx.animation.AnimationAccessorImpl.playTo(AnimationAccessorImpl.java:39)
	at com.sun.scenario.animation.shared.InfiniteClipEnvelope.timePulse(InfiniteClipEnvelope.java:110)
	at javafx.animation.Animation.impl_timePulse(Animation.java:1102)
	at javafx.animation.Animation$1.lambda$timePulse$0(Animation.java:186)
	at java.security.AccessController.doPrivileged(Native Method)
	at javafx.animation.Animation$1.timePulse(Animation.java:185)
	at com.sun.scenario.animation.AbstractMasterTimer.timePulseImpl(AbstractMasterTimer.java:344)
	at com.sun.scenario.animation.AbstractMasterTimer$MainLoop.run(AbstractMasterTimer.java:267)
	at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:557)
	at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:541)
	at com.sun.javafx.tk.quantum.QuantumToolkit.pulseFromQueue(QuantumToolkit.java:534)
	at com.sun.javafx.tk.quantum.QuantumToolkit.lambda$runToolkit$11(QuantumToolkit.java:340)
	at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
	at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
	at com.sun.glass.ui.win.WinApplication.lambda$null$4(WinApplication.java:187)
	at java.lang.Thread.run(Thread.java:748)

That is the whole error message

[Matthias Utrata]

I keep updating my pastebin aswell, so if you need something. Just take a look at my pastebin

[Norm Radder]

Exception in thread "JavaFX Application Thread" java.lang.ArrayIndexOutOfBoundsException: 1
  at Breakout.mainGame(Breakout.java:137)

That says the array has less than 2 elements. An index of 1 would be for the second element in the array.  Remember array indexes range from 0 to the array's length - 1.
Look at line 137 to see why the index went past the end of the array.

[Piet Souris]

Yep, just had a look at your pastebin code.
In your 'mainGame'method you have this:

for (row = 1; row <= maxRow; row++) {
                for (col = 1; col <= maxCol; col++) {
        hit[row][col] ....
}

while you defined the array as

private int[][] hit = new int[maxRow][maxCol];

The indices that you can use are:
for the first index: 0 <= index <= maxRow - 1, That is because indices in Java start at 0, and the highest index is therefore maxRow - 1.
Same holds for the second index, legal values are 0 <= index <= maxCol - 1

Now, you could let your indices start from 0 and end at maxRow/maxCol - 1; but then you should also change the formula that calculates the x and y of the rectangles.

So, easiest is to let the indices go from 1 to max as you have now, but have the hit[][] line changed to

if (hit[row - 1][col - 1] == 0){

and things should work again. If you still get that ArrayIndexOutOfBounds, then somewhere in your code you have that problem too.

[Norm Radder]

Are maxCol and maxRow given values before they are used in the array's declaration?  If not, they contain 0s and the array would have no elements.

[Piet Souris]

Yes

[Matthias Utrata]

Somehow the removal of the targets, doesnt quite work. I mean, they do disappear, but the ball still bounces off, of the non-existent bricks.

And also, when you make mutiple bricks. All the other bricks in this row get affected when you change color. Do you have an idea how I can prevent that?

And the score keeps counting up and I do not know why.

[Piet Souris]

Is the latest code in PasteBin?

Anyway: from your description it looks like you only check the array 'hits' when you draw the rectangles. But you must also check that when you want to do a collision test. If hits[r][c] == 2, then you should not draw it and perform no collisionn check.

And we did not discuss it yesterday, but when hits[r][c] == 1, you should also change the color, but that may not be important for now.

[Piet Souris]

Forgot to answer your second question: when you change the color of the GraphicsContext, then first save the current color. Then change the color to what you need, fill the rectangle, and then chenge the color back to what you just saved. Do this for each rectangle that has hits[r][c] == 1.

[Matthias Utrata]

It is all new in pastebin

[Piet Souris]

Just ran the code, and it really looks nice!

But what I would change is the location of the hit[r][c] test:

for (row = 1; row <= maxRow; row++) {
                for (col = 1; col <= maxCol; col++) {
                    if (hit[row - 1][col - 1] == 2) continue;

[Matthias Utrata]

I did some changes in the pastebin

[Piet Souris]

Almost there!

Some small errors that I noticed:

1) never does the score get updated. I just cleared the screen, only to see my score showed as 0.

2) in this piece of code:

if (bricks[row][col] == changedColor) {
                        targets.setFill(Color.YELLOW);
                        continue;
                    }

you should first save the GC's current color and restore it just before leaving this piece of code. You see it when you run the code: when a brick is hit, all the bricks turn into yellow. And be careful with this 'continue'! A brick that has been hit only once still behaves like a normal brick.

And a wish for version 2.0: use an arc as paddle instead of a rectangle. That way, with careful aiming, you can shoot the ball in any direction.  ;)

[Matthias Utrata]

Not quite sure about the restoration of the color. Could you help me out with that?

[Matthias Utrata]

Oh and the score gets just counted into infinite

[Matthias Utrata]

Could you maybe like finalize it? I have no idea.

[Matthias Utrata]

I did some changes now. The rectangle does not get cleared out though, so the score doesnt get counted aswell. Do you maybe know a problem?

[Piet Souris]

I checked your latest code and fixed some errors. All is now working as it should, but the collision detection is still a bit wobbly, especially collisions from below.

Can you incorporate this code and tell me what you think? Do you spot any other mistakes?

if (gameStarted) {
    bg.setFill(Color.GRAY);
    bg.fillRect(0, 0, width, height);
    paddleXpos += paddleDeltaX;
    ballYPos += ballYSpeed;
    ballXPos += ballXSpeed;
    paddle.setFill(Color.BLUE);
    paddle.fillRect(paddleXpos, paddleYpos, paddleW, paddleH);
    ball.setFill(Color.GREEN);
    ball.fillOval(ballXPos, ballYPos, durch, durch);
    for (row = 0; row < maxRow; row++) {
        for (col = 0; col < maxCol; col++) {
            if (bricks[row][col] == destroyed) continue;
            if (bricks[row][col] == draw) {
                targets.setFill(Color.RED);
                targets.fillRect(col * gapX + startX, row * gapY + startY, brickW, brickH);
            }
            if (bricks[row][col] == changedColor) {
                targets.setFill(Color.YELLOW);
                targets.fillRect(col * gapX + startX, row * gapY + startY, brickW, brickH);
            }
            if (intersectsTargetRight() || intersectsTargetLeft()) {
                ballXSpeed *= -1;
            }
            if (intersectsTargetDown() || intersectsTargetUp()) {
                ballYSpeed *= -1;
            }
            if (intersectsTargetDown() || intersectsTargetLeft() || intersectsTargetRight() || intersectsTargetUp()) {
                bricks[row][col] += 1;
                if (bricks[row][col] == destroyed) score += 1;
            }
        }
    }

} else {

[Piet Souris]

Initialize ballXspeed to 2, and ballYSpeed to -2. You see that the brick is hit from the upperside, bouncing to the right side, making the brick disappear  ==> fix the collision detection.
It is also possible that when a brick hits a corner, for instance the bottomleft corner, that both the left side and the bottom side detect a collision, which is unwanted. So I would suggest a change:

if (intersectsTargetRight) ballXspeed *= -1;
else if (intersectsTargetLeft) ballXspeed *= -1;
// et cetera for the other two

[Matthias Utrata]

That is amazing! It works! Holy cow! Thank you so much!