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

[Matthias Utrata]

And that is what I am missing out on. Logic

[Norm Radder]

 I am missing out on. Logic

Yes.  I assume you know how to use an if statement and how to change the value in an int variable.  That is all it takes.

If you need help with writing an if statement, please post a description of what you want to do with the statement.

There is sample code in the Runner class: it changes the value of dx or dy based on the values in some boolen variables.

[Matthias Utrata]

Alright. My paddle works now fine, but I wanna try to make the intersections now, so when the ball hits the paddle or the bricks, it should bounce off. Does anyone of you have an idea?

public void run(GraphicsContext gc) {
        gc.setFill(Color.GRAY);
        gc.fillRect(0, 0, width, height);

        gc.setFill(Color.GREEN);
        gc.fillOval(ballXPos, ballYPos, rad, rad);

        gc.setFill(Color.BLUE);
        gc.fillRect(paddleXpos, paddleYpos, paddleW, paddleH);

        gc.setFill(Color.RED);
        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < 5; j++) {
                gc.fillRect(j * 130 + 55, i * 30 + 40, 75, 20);
            }
        }
        if (gameStarted) {
            ballYPos += ballYSpeed;
            ballXPos += ballXSpeed;
            if (ballXPos == width - rad || ballXPos == 0) {
                ballXSpeed *= -1;
            }
            if (ballYPos == height - rad || ballYPos == 0) {
                ballYSpeed *= -1;
            }
        }
    }

[Norm Radder]

My paddle works now fine,

Where is the value of paddleXpos changed?

Look at the Pong.java program for examples of how a paddle changes the direction of the balls movement.
Also your code changes the direction of the ball when it hits a boundary.

[Matthias Utrata]

It is changed in my eventHandler that is in the start method

[Matthias Utrata]

There is all of my current code

import javafx.animation.AnimationTimer;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.TilePane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.security.Key;


public class Breakout extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    private static final int width = 700;
    private static final int height = 900;
    private boolean gameStarted;
    private int rad = 10;
    private int paddleW = 50;
    private int paddleH = 10;
    private int ballYPos = width / 2;
    private int ballXPos = height / 2;
    private int paddleXpos = width / 2;
    private int paddleYpos = height - 100;
    private int ballXSpeed = 2;
    private int ballYSpeed = 2;


    @Override
    public void start(Stage primaryStage) throws Exception {
        Canvas canvas = new Canvas(width, height);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        Timeline t = new Timeline(new KeyFrame(Duration.millis(10), e -> run(gc)));
        t.setCycleCount(Timeline.INDEFINITE);
        canvas.setOnMouseClicked(e -> gameStarted = true);
        Scene scene = new Scene(new StackPane(canvas));
        scene.setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                switch (event.getCode()) {
                    case A:
                    case LEFT:
                        if (paddleXpos == 0) {
                            paddleXpos -= 0;
                        } else {
                            paddleXpos -= 10;
                        }
                        break;
                    case D:
                    case RIGHT:
                        if (paddleXpos == width - paddleW) {
                            paddleXpos += 0;
                        } else {
                            paddleXpos += 10;
                        }
                        break;
                }
            }
        });

        primaryStage.setTitle("Breakout");
        primaryStage.setScene(scene);
        primaryStage.show();
        t.play();
    }

    public void run(GraphicsContext gc) {
        gc.setFill(Color.GRAY);
        gc.fillRect(0, 0, width, height);

        gc.setFill(Color.GREEN);
        gc.fillOval(ballXPos, ballYPos, rad, rad);

        gc.setFill(Color.BLUE);
        gc.fillRect(paddleXpos, paddleYpos, paddleW, paddleH);

        gc.setFill(Color.RED);
        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < 5; j++) {
                gc.fillRect(j * 130 + 55, i * 30 + 40, 75, 20);
            }
        }
        if (gameStarted) {
            ballYPos += ballYSpeed;
            ballXPos += ballXSpeed;
            if (ballXPos == width - rad || ballXPos == 0) {
                ballXSpeed *= -1;
            }
            if (ballYPos == height - rad || ballYPos == 0) {
                ballYSpeed *= -1;
            }
        }
    }
}

[Norm Radder]

What is the purpose of lines 60 and 68?  Adding/subtracting 0 does nothing.

What happened with the code to change the paddle's X value in the same method that the ball's position was changed so that they are moved at the same time?  The OS's response to key oresses may be slower than the frequency that the run method is called.  Is that why the paddle jumps 10 pixels each time it is moved?

[Matthias Utrata]

60 is just saying that if the position of the paddle reaches the left end. It does not get changed. 68 is the same just to the right. I am uncertain how I implement the KeyEvent into the run Method

[Piet Souris]

A way without using booleans is:

have a Field called paddleDeltaX, initially set to 0.
Then, in your run method, do:

paddleX += paddleDeltaX;
if (paddleX < 0) paddleX == 0;
else if (paddleX > width - paddleWidth) paddleX = width - paddleWidth;

And the KeyHandler will be:

case A:
    paddleDeltaX = -4; break;
case D:
    paddleDeltaX = 4; break;

and in the released handler:
   

paddleDeltaX = 0;

[Norm Radder]

Ok, I'm done now.  I leave the thread to Piet so he can give you the code you need.
Good luck.

[Matthias Utrata]

Norm Radder wrote:Ok, I'm done now.  I leave the thread to Piet so he can give you the code you need.
Good luck.

Thank you. Take care!

[Matthias Utrata]

Piet Souris wrote:A way without using booleans is:

have a Field called paddleDeltaX, initially set to 0.
Then, in your run method, do:

paddleX += paddleDeltaX;
if (paddleX < 0) paddleX == 0;
else if (paddleX > width - paddleWidth) paddleX = width - paddleWidth;

And the KeyHandler will be:

case A:
    paddleDeltaX = -4; break;
case D:
    paddleDeltaX = 4; break;

and in the released handler:
   

paddleDeltaX = 0;

Thank you so much! It works so much better now. No delay or anything.

[Piet Souris]

You're welcome.

Do have a look at the code that Norm linked to. Always a good thing to see more than one solution.

[Campbell Ritchie]

I merged your stuff with the following thread. I hope that is okay by you.

[Matthias Utrata]

Hello everyone!

I am once again in need of your help. I luckily got my paddle bounce now working, but I am quite confused about how I could make it hit the target bricks. I create all the target bricks with two for loops, yet I am uncertain of how to use them with if statements (detecting a hit/removing). I will paste a link to my pastebin below.

https://pastebin.com/h1NtUkQV

[Piet Souris]

But that way I did not get any notification.

@Matthias,

collision between the ball and a brick is done in the same way as a collision between the ball and the paddle, albeit that you now have to check for collision at the left and right sides of the brick as well, changing possibly the x-direction. You must do that check for all the bricks (still) present. Did you put all your bricks in a List or Set? It would also be very handy to use a Brick class instead of just Rectangles.

[Matthias Utrata]

Piet Souris wrote:But that way I did not get any notification.

@Matthias,

collision between the ball and a brick is done in the same way as a collision between the ball and the paddle, albeit that you now have to check for collision at the left and right sides of the brick as well, changing possibly the x-direction. You must do that check for all the bricks (still) present. Did you put all your bricks in a List or Set? It would also be very handy to use a Brick class instead of just Rectangles.

I create all of them in the run method. Is there a way, that I can create them in a constructor and then use them in the run method?

[Matthias Utrata]

I now added a few if statements inside my for loops, where I create the targets, but the last row, does not get registered as a target. Only the second to last row does and I do not know why sadly.

@Piet

[Matthias Utrata]

//Problem area            for (countCol = 1; countCol <= 10; countCol++) {                for (countRow = 1; countRow <= 3; countRow++) {                    targets.fillRect(countRow * gapX + startX, countCol * gapY + startY, brickW, brickH);                    if (ballXPos + rad >= (countRow * gapX + startX) && ballXPos + rad <= (countRow * gapX + startX) + brickW && ballYPos + rad == (countCol * gapY + startY)) {                        ballYSpeed *= -1;                    }                    if (ballXPos + rad >= (countRow * gapX + startX) && ballXPos + rad <= (countRow * gapX + startX) + brickW && ballYPos + rad == (countCol * gapY + startY) + brickH) {                        ballYSpeed *= -1;                    }                    if (ballXPos + rad == (countRow * gapX + startX) && ballYPos + rad >= (countCol * gapY + startY) && ballYPos + rad <= (countCol * gapY + startY) + brickH) {                        ballXSpeed *= -1;                    }                    if (ballXPos + rad == (countRow * gapX + startX) + brickW && ballYPos + rad >= (countCol * gapY + startY) && ballYPos + rad <= (countCol * gapY + startY) + brickH) {                        ballXSpeed *= -1;                    }                }            }

That is my problem code

[Piet Souris]

Matthias Utrata wrote:I create all of them in the run method. Is there a way, that I can create them in a constructor and then use them in the run method?

You can define your Rectangles upfront and put then in a List<Rectangle>.
Then, in your run-method, you can have, say:

for (var rect: list) {
    SideHit side = checkForCollison(ballXpos, ballYpos, rect)
    // decide whether the rectangle should be drawn when hit
    // postponed for now
    gc.filRect(r.x, r.y, r.with, r.height);
}

SideHit is an enum, with the values West, North, East, South and NO_HIT, and depending on the state returned you can determine what new direction the ball gets.

But as you see, you have meny variables denoting position, speed, color et cetera. As we mentioned in earlier topics, you can ease the code by having a Ball class, a Brick class and a Paddle class. More on that later, perhaps

[Piet Souris]

What is 'targets'?

[Matthias Utrata]

Piet Souris wrote:What is 'targets'?

targets is just my variable name for a GraphicsContext object

[Matthias Utrata]

Piet Souris wrote:

Matthias Utrata wrote:I create all of them in the run method. Is there a way, that I can create them in a constructor and then use them in the run method?

You can define your Rectangles upfront and put then in a List<Rectangle>.
Then, in your run-method, you can have, say:

for (var rect: list) {
    SideHit side = checkForCollison(ballXpos, ballYpos, rect)
    // decide whether the rectangle should be drawn when hit
    // postponed for now
    gc.filRect(r.x, r.y, r.with, r.height);
}

SideHit is an enum, with the values West, North, East, South and NO_HIT, and depending on the state returned you can determine what new direction the ball gets.

But as you see, you have meny variables denoting position, speed, color et cetera. As we mentioned in earlier topics, you can ease the code by having a Ball class, a Brick class and a Paddle class. More on that later, perhaps

I am happy with having everything in one class. It is just better for me to understand my code.

[Matthias Utrata]

Piet Souris wrote:

Matthias Utrata wrote:I create all of them in the run method. Is there a way, that I can create them in a constructor and then use them in the run method?

You can define your Rectangles upfront and put then in a List<Rectangle>.
Then, in your run-method, you can have, say:

for (var rect: list) {
    SideHit side = checkForCollison(ballXpos, ballYpos, rect)
    // decide whether the rectangle should be drawn when hit
    // postponed for now
    gc.filRect(r.x, r.y, r.with, r.height);
}

SideHit is an enum, with the values West, North, East, South and NO_HIT, and depending on the state returned you can determine what new direction the ball gets.

But as you see, you have meny variables denoting position, speed, color et cetera. As we mentioned in earlier topics, you can ease the code by having a Ball class, a Brick class and a Paddle class. More on that later, perhaps

I am happy with having everything in one class. It is just better for me to understand my code. I have no idea what an enum is and no idea how that should help me with the hit detection. Could you maybe just take a look at my code in the pastebin link and give me an example with my code?
https://pastebin.com/h1NtUkQV

[Piet Souris]

I've run your code from PasteBin, and it runs fine. so I will not comment it further.

You still have some work to do, like coming up with a new ball. And how to handle bricks when they have been hit.

Just one question: why do you use four equal GraphicsContexts?

[Matthias Utrata]

It is only just because of the names. Helps me a bit with it.

I still have the problems though with my knockback. The ball doesnt quite hit where it is supposed to. That is where I need help. And I do not know how to remove a GraphicsContext object. When you run it again, you notice how the ball ignores the last row completely. I do not know why it is like that.

@Piet

[Piet Souris]

Your hit-calculations are not 100%. They seem to miss he underside of a brick. The tenth row is not missed, only a ball coming from below "goes trough" the underside as if that underside isn't there at all, and then bounces back from the upperside.

One way to see that in a clear way is to change the line:

for (countCol = 1; countCol <= 10; countCol++) {   // note that countCol should really be named 'countRow' since there are 10 rows of three bricks

into

for (countCol = 1; countCol <= 1; countCol++) {

and then'

for (countCol = 2; countCol <= 2; countCol++) {

et cetera. If you do that for countCol = 10, you see that it behaves exactly as all the other countCols.

So have a recheck of your hit-routines and see why these fail to recognize the undersides. What I also noticed a few times, is that when the ball, going northeast and hitting the leftupper corner of a brick, bounces off in the southwest diretion. Although that is explainable, it does make a very strange impression.

To make things a little easier to spot, give the ball an y-speed of two and an x-speed of 1.

Let me know your findings!

[Matthias Utrata]

There is one particular thing, that I now know is the mistake. I first did not know, that objects get drawn from the upper left corner first.

Now I am curious, if there is a way to get all points of the circle. I know now, how I wanna do the if statements and how I can make it work. I just need the information of getting every point of the circle.

@Piet

[Piet Souris]

Matthias Utrata wrote:There is one particular thing, that I now know is the mistake. I first did not know, that objects get drawn from the upper left corner first.

That is incorrect: the order of drawing is the order that you specify. If the ball and a brick overlap, then if the ball is drawn first, the brick will be above the ball, and vice versa.

Matthias Utrata wrote:Now I am curious, if there is a way to get all points of the circle. I know now, how I wanna do the if statements and how I can make it work. I just need the information of getting every point of the circle

Why do you want to know that? Is that to prevent some overlap?

[Matthias Utrata]

I meant that, when you draw anything. A rectangle or an oval. The shape starts to be drawn from the upper left.

[Piet Souris]

Why is that important?

[Matthias Utrata]

So I can determine when the hit happens.

[Matthias Utrata]

So I wanna activate the run() method in addition after I click the mouse button, while the setGameStarted() Method is going. I think I am missing out on something though. The run method is just for the movement of the ball and the paddle. The setGameStarted() Method should be when the major thing happens. Like rectangles getting cleared after a hit with .clearRect(). I tried that before in my run method, but it always gets redrawn so I gotta adapt my code to make it work. I am gonna change my code in pastebin so you can take a look and hopefully help me out

[Matthias Utrata]

@Piet

https://pastebin.com/h1NtUkQV

[Piet Souris]

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

[Piet Souris]

Matthias Utrata wrote:So I wanna activate the run() method in addition after I click the mouse button, while the setGameStarted() Method is going. I think I am missing out on something though. The run method is just for the movement of the ball and the paddle. The setGameStarted() Method should be when the major thing happens. Like rectangles getting cleared after a hit with .clearRect(). I tried that before in my run method, but it always gets redrawn so I gotta adapt my code to make it work. I am gonna change my code in pastebin so you can take a look and hopefully help me out

First of all: the names 'run' and 'setGameStarted' are unfortunate names, not clearly expressing what they do, and therefore being a bit confusing. Can you think of better names?

I am not sure whether I agree. You can update the ball and the paddle position in a run-method, but in what method do you do the collision check? If you do that in the 'run' method, and you detect a hit with Brick B, then in following display do you show brick B or not? So, my first thoughts are doing it all in the run-method, if that is fast enough (sofar it looks like it is fast nough).

Now for something completely different: the Brick class.
We have mentioned it before, but now is the time to implement it. What should a Brick-class contain?

an x and an y, a width and a height (or use a Rectangle instance for this)
a colour
an int 'hitsTaken'
an int hitsToDestroy
a boolean isDestroyed

and methods 'public boolean isHitByBall(Ball ball)' , 'private void processHit()' and 'draw(GraphicsContext g)'. If hitsTaken == hitsToDestroy set isDestroyed to true.

Put all the bicks you need in a List<Brick>. In the run-method you can draw all the bricks in your list, unless the isDestroyed is true.

You can create more than  one such List, for instance, to have an easy way to work with more than one 'level'. The creation of those lists can be done in a separate progam. But that is for later..

For now, concentrate on the Brick class. One optimalization: a ball can only hit one brick at the time. So if it hits the paddle or a brick, then there is no need to do these checks for other bricks as well.

[Piet Souris]

Hmm... second thoughts:

doing the updates of ball and paddle in an 'update' method seems very fine indeed. Then do the repainting, and next do a collision check, setting a brick that has been hit to isDestroyed and adaption of the ball direction if necessary. The advantage is that a hit brick will vanish only at the next display. So, you were right!

[Matthias Utrata]

I have no idea how Lists work and no idea what I should do with a list

[Matthias Utrata]

Would you be so kind and add some of the changes in here so I can kinda understand it? Neither do I quite understand why I now need to do a brick class.