классы p5.js (класс «пример» не меняет моего значения this.x)

Question

классы p5.js (класс «пример» не меняет моего значения this.x)

1

Я хочу переместить эллипс, но я застрял, потому что значение this.x не меняется... print ("hit this.y = 30"); работает отлично, но this--; не работает. Что-нибудь блокирует его? Заранее благодарю за ваше время!

let redBubble = 0;
let x = false;
let y = 0;
let d = 0;

function setup() {
    createCanvas(400, 400);
    redBubble = new Bubble(300, 100, 10);
}

function draw() {
    background(56, 23, 56);
        redBubble.show();
        redBubble.toRight();
        redBubble.toLeft();
        redBubble.example();
};

class Bubble {
    constructor(x, y, d) {
        this.x = x;
        this.y = y;
        this.d = d;
    }
    show() {
        fill(255);
        ellipse(this.x, this.y, this.d * 2);
    }
    toRight() {
        if (this.x < 350) {
            this.x = this.x + 1;
        } else if (this.x === 350) {
            this.y = this.y - 1;
        }
    }
    toLeft() {
        if (this.y <= 30) {
            x = true;
        } else if (this.y === 30) {
            x = false;
        }
    }
    example() {
        if (x) {
            this.x--; // not working
            print("hit this.y = 30"); // working
        }
    }
}

Simplex 10 июнь 2018, в 15:47

Источник

Теги:

javascript

class

node.js

p5.js

1 ответ

Ещё вопросы

Steve · Accepted Answer · 2018-06-10T12-19-00.000Z

Ваш код работает, но похоже, что он не делает то, что вы хотите.

Все ваши функции show(), toRight(), toLeft(), example(), запускают каждую ничью. Таким образом, каждый раз toRight() увеличивает значение this.x на 1 (если this.x равно точно 350). Поэтому, когда example() уменьшает его на 1, они фактически отменяют друг друга и не меняют this.x, когда x истинно, а this.x равно 349.

Если вы хотите, чтобы чистый эффект был таким. this.x уменьшался, вы могли бы заменить this.x--; с this.x = this.x - 2; , Но это не очень хорошее решение.

Использование состояний

Похоже, вы хотите делать разные вещи на разных этапах вашей анимации, то есть идти вправо, затем подниматься, а затем идти налево. Как вы обнаружили, может быть довольно сложно координировать все эти изменения, когда все ваши функции выполняются каждый цикл.

Вместо этого гораздо проще условно запускать только те функции, которые вы хотите, в зависимости от того, на какой стадии анимации вы находитесь. Для этого вы можете использовать внутреннюю переменную для хранения того, что она должна делать (я буду использовать this.direction для этого примера). Затем в вашей функции рисования вы должны использовать операторы if/then, например:

function draw() {
    background(56, 23, 56);
    redBubble.show();
    if (redBubble.direction === 'right') {
         redBubble.goRight();
    } else if (redBubble.direction === 'up') {
         redBubble.goUp();
    } else if (redBubble.direction === 'left') {
         redBubble.goLeft();
    }
};

И затем в ваших индивидуальных функциях вы измените направление, основанное на некоторых условиях. Например:

toRight() {
    this.x = this.x + 1;
    if (this.x === 350) {
        this.direction = 'up';
    }
}

Здесь рабочий фрагмент вышеупомянутой методики:

let redBubble;

function setup() {
    createCanvas(400, 400);
    redBubble = new Bubble(300, 100, 10);
}

function draw() {
    background(56, 23, 56);
    redBubble.show();
    if (redBubble.direction === 'right') {
        redBubble.goRight();
    } else if (redBubble.direction === 'up') {
        redBubble.goUp();
    } else if (redBubble.direction === 'left') {
        redBubble.goLeft();
    } else if (redBubble.direction === 'down') {
        redBubble.goDown();
    }
};

class Bubble {
    constructor(x, y, d) {
        this.x = x;
        this.y = y;
        this.d = d;
        this.direction = 'right';
    }
    show() {
        fill(255);
        ellipse(this.x, this.y, this.d * 2);
    }
    goRight() {
        this.x = this.x + 1;
        if (this.x === 350) {
            this.direction = 'up';
        }
    }
    goLeft() {
        this.x = this.x - 1;
        if (this.x === 30) {
            this.direction = 'down';
        }
    }
    goUp() {
        this.y = this.y - 1;
        if (this.y === 30) {
            this.direction = 'left';
        }
    }
    goDown() {
        this.y = this.y + 1;
        if (this.y === 300) {
            this.direction = 'right';
        }
    }

}

<script src="https://unpkg.com/[email protected]/lib/p5.min.js"></script>

Большое спасибо за это замечательное объяснение! Действительно ценю это.