Javascript - Почему объект "CIrcle" не движется по переданным координатам - Stack Overflow на русском

Опубликовано: 01.09.2018

Пожалуйста, подскажите почему, когда я передаю параметры координат классу Circle, через метод circle.move({x: 1200, y: 0}) он их не видит?

Я хочу реализовать логику, когда круг сталкивается с любым краем экрана, он отбивается (меняться значение соответствующей координаты вектора на противоположную по знаку значения и вызывается метод move с новым вектором).

Я реализовал класс Circle со свойствами:

X - начальное значение координаты х Y - начальное значение координаты y diametr - значения ширины и высоты Color - цвет заливки

Методы:

Метод: draw () - рисует на экране элемент который описан заданными свойствами;

Метод: move ({x = 0, y = 0}) - двигает отрисованный объект по вектору (x, y) - каждый период времени (100мс) изменяет (добавляет \ отнимает) координаты на значение x и y в соответствии;

Метод: _update (), который синхронизирует позицию круга с соответствующими значениями color, x, y объекта;

class Circle { constructor(options) { this.x = options.x; this.y = options.y; this.diameter = options.diameter; this.color = options.color; // the circle's move/update animation interval in ms this.updateInterval = 100; this.direction = 1; } draw() { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.left = `${this.x}px`; div.style.top = `${this.y}px`; div.style.width = `${this.diameter}px`; div.style.height = `${this.diameter}px`; div.style.border = "1px solid;"; div.style.borderRadius = "50%"; div.style.backgroundColor = `${this.color}`; document.body.appendChild(div); // store the reference to the div element for later use this.circle = div; // use the refacterd positioning function this._reposition(); } setColor(newColor) { return this.circle.style.backgroundColor = newColor; } move({x = 0, y = 0, duration = 1000}) { this.initialX = this.x; this.initialY = this.y; this.destX = x, this.destY = y; // store the current time in ms this.startTime = Date.now(); this.duration = duration; // if a previous setInterval of this circle instance // is still running, clear it (stop it) clearInterval(this.intervalId); // start the update window.requestAnimationFrame(this._update.bind(this)); } _update() { // set the x and y coordinates according to the progress let newX = this.x + this.direction * this.destX; let newY = this.y + this.direction * this.destY; if (newY >= window.innerHeight - this.diameter) { this.direction = -1; } else if (newY <= 0) { this.direction = 1; } if (newX >= window.innerWidth - this.diameter) { this.direction = -1; } else if (newX <= 0) { this.direction = 1; } this.x = newX; this.y = newY; this._reposition(); window.requestAnimationFrame(this._update.bind(this)); } _reposition() { // set the position of the circle instance this.circle.style.left = `${this.x}px`; this.circle.style.top = `${this.y}px`; } } const options = { x: 100, y: 100, diameter: 100, color: 'red' }; const circle = new Circle(options); circle.draw(); circle.setColor("green"); circle.move({x: 1200, y: 0});
rss