I Have Been Trying To Make This Ball Bounce For A Day. Why Doesnt It Work?

I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck. I have tried making the ball bounce in the draw function, but then it

Solution 1:

The speed of the ball is continuously "reset", when .move() is called. Set the speed in the constructor and use the attributes this.speedx and this.speedy in .move():

xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = newBall(xpos, ypos, xspeeddir, yspeeddir);

functiondraw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

It is not sufficient to invert the speed, you've to limit the position of the ball to the bounds of the window, too. If the ball exceeds the limit, then clamp the position in bounds.

move() {
    if(this.x >= xlimit) {
        this.x = xlimit; // limit to xlimitthis.speedx = -(this.speedx)
    }

    if (this.x <= this.size/2) {
        this.x = this.size/2; // limit to this.size/2this.speedx = -(this.speedx)
    }

    if (this.y >= ylimit) {
        this.y = ylimit; // limit to ylimitthis.speedy = -(this.speedy)
    }

    if (this.y <= this.size/2) {
        this.y = this.size/2; // limit to this.size/2this.speedy = -(this.speedy)
    }

    this.x = this.x + this.speedx;
    this.y = this.y + this.speedy;
}

let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let x_limit, y_limit;
let xspeeddir, yspeeddir;

functionsetup() {

    createCanvas(500, 250);
    xpos = random(20, width);
    ypos = random(20, height);

    xlimit = width-15;
    ylimit = height-15;
    x_limit = 15;
    y_limit = 15;

    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);

    xspeeddir = random(-5,5);
    yspeeddir = random(-5,5);
    ball = newBall(xpos, ypos, xspeeddir, yspeeddir);
}

functiondraw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

classBall {
    constructor(x, y, xspeed, yspeed) {
        this.x = x;
        this.y = y;
        this.size = 30;
        this.speedx = xspeed;
        this.speedy = yspeed;
    }

    appear(r, g, b) {
        this.r = r;
        this.g = g;
        this.b  = b;
        fill(this.r, this.g, this.b);
        noStroke();
        ellipse(this.x, this.y, this.size, this.size);
    }

    move() {
        if(this.x >= xlimit) {
            this.x = xlimit; // limit to xlimitthis.speedx = -(this.speedx)
        }

        if (this.x <= this.size/2) {
            this.x = this.size/2; // limit to this.size/2this.speedx = -(this.speedx)
        }

        if (this.y >= ylimit) {
            this.y = ylimit; // limit to ylimitthis.speedy = -(this.speedy)
        }

        if (this.y <= this.size/2) {
            this.y = this.size/2; // limit to this.size/2this.speedy = -(this.speedy)
        }

        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
    }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>