Question

我正在上一个球课，在那个班里我想让球从墙上弹起，但球仍然卡住。

我曾尝试在平局功能中使球弹跳，但后来它甚至没有停在墙壁上。我尝试将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()时，球的速度连续“重置”。在构造函数中设置速度，并使用this.speedx中的属性this.speedy和.move()：

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();
}

仅仅反转速度还不够，您还必须将球的位置限制在窗口的范围内。如果球超出限制，则将位置限制在边界内。

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>

我一直在努力使这个球弹跳一天。为什么不起作用？

1 个答案: