我一直试图让这个球反弹一天。为什么它不起作用？

Question

我正在制作一个球 class，在那个 class 我想让球从墙上反弹，但它仍然卡住了。

我试过在绘制函数中让球反弹，但它甚至没有停在墙上。我尝试将 this.x 和 this.y 设置为远离限制，因此它不会循环，但没有成功。我别无选择。我不知道该怎么办。我刚开始，我很喜欢编码，但这让我很头疼。

let r;
let g;
let b;

let xpos;
let ypos;

let size;

let xlimit;
let ylimit;
let x_limit;
let y_limit;

let xspeeddir;
let yspeeddir;

function setup() {
    
    createCanvas(800, 450);
    xpos = random(20, width);
    ypos = random(20, height);
    ball = new Ball(xpos, ypos);
    
    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);
    
}

function draw() {
    
    background(255, 238, 112);
    
    ball.appear(r, g, b);
    ball.move(xspeeddir, yspeeddir);
}

class Ball {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = 30;
    }
    
    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(xspeed, yspeed) {
        this.speedx = xspeed;
        this.speedy = yspeed;
        
        if (this.x > xlimit) {
            this.speedx = -Math.abs(this.speedx);
            this.x = xlimit-1;
        }
        if (this.x < x_limit) {
            this.speedx = Math.abs(this.speedx);            
            this.x = x_limit + 1;
        }
        if (this.y > ylimit) {
            this.speedy = -Math.abs(this.speedy);
            this.y = ylimit - 1;
        }
        if (this.y < y_limit) {
            this.speedy = Math.abs(this.speedy);
            this.y = ylimit + 1;
        }
        
        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
        
    }
}

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

控制台没有错误

Answer 1

调用.move()时球的速度连续"reset"。在构造函数中设置速度，在.move():

中使用属性this.speedx和this.speedy

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

function draw() {

    background(255, 238, 112);

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

反转速度是不够的，您还必须将球的位置限制在 window 的范围内。如果球超出限制，则在界内夹住位置。

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

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

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

    if (this.y <= this.size/2) {
        this.y = this.size/2; // limit to this.size/2
        this.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;

function setup() {

    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 = new Ball(xpos, ypos, xspeeddir, yspeeddir);
}

function draw() {

    background(255, 238, 112);

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

class Ball {
    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 xlimit
            this.speedx = -(this.speedx)
        }

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

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

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

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

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

我一直试图让这个球反弹一天。为什么它不起作用？

I have been trying to make this ball bounce for a day. Why doesnt it work?

javascript

processing

p5.js