如何修复每次单击鼠标时 Ball class 不出现的问题

Question

每次点击鼠标我都想创建一个新的球，但是什么也没有出现。我在另一个文件中有一个名为 Ball 的 class。我通过硬编码我想出现多少个球来让它工作，但我不知道为什么这不起作用

主线：

let balls = [];
let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let xlimit2, ylimit2;
let xspeeddir, yspeeddir;

function setup() {

    createCanvas(800, 450);

    xlimit = width - 15;
    ylimit = height - 15;
    xlimit2 = size / 2;
    ylimit2 = size / 2;
}

function mousePressed() {
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    xspeeddir = random(-5, 5);
    yspeeddir = random(-5, 5);
    size = random(20, 40);

    let bb = new Ball(mouseX, mouseY, xspeeddir, yspeeddir, size);
    balls.push(bb);
}

function draw() {

    background(255, 238, 112);

    for (let i = 0; i < balls.lenght; i++) {
        balls[i].move();
        balls[i].show(250, 200, 40);
    }
}

编辑：添加球 class

class Ball {
    constructor(x, y, xspeed, yspeed, size) {
        this.x = x;
        this.y = y;
        this.size = size;
        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;
            this.speedx = -(this.speedx)
        }

        if (this.x <= xlimit2) {
            this.x = xlimit2;
            this.speedx = -(this.speedx)
        }

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

        if (this.y <= ylimit2) {
            this.y = ylimit2;
            this.speedy = -(this.speedy)
        }

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

Answer 1

您的 for-loop 有错字。

for (let i = 0; i < balls.lenght; i++) {
    balls[i].move();
    balls[i].show(250, 200, 40);
}

您输入的是 balls.lenght 而不是 balls.length:

for (let i = 0; i < balls.length; i++) {
    balls[i].move();
    balls[i].show(250, 200, 40);
}

Post 编辑:

您正在调用 balls[i].show(250, 400, 40);，但您的 Ball class 中没有 show() 函数。

如何修复每次单击鼠标时 Ball class 不出现的问题

How to fix Ball class not appearing everytime i click the mouse

javascript

arrays

class

p5.js