Я реализовал класс Circle со свойствами:
- X - начальное значение координаты х
- Y - начальное значение координаты y
- Radius - значения ширины и высоты
- Color - цвет заливки
Метод draw ()
- рисует на экране элемент который описан заданными свойствами;
Метод move ({x = 0, y = 0})
- двигает отрисованный объект по вектору (x, y) - каждый период времени (100мс) изменяет (добавляет \ отнимает) координаты на значение x и y в соответствии.
Метод метод _update (), который менять синхронизирует позицию круга с соответствующими значениями color, x, y объекта.
У меня возникает ошибка: "Uncaught TypeError: Cannot set property 'left' of undefined", когда вызываю метод: circle.move({x: 10, y: 3});
class Circle {
constructor(options) {
this.x = options.x;
this.y = options.y;
this.radius = options.radius;
this.color = options.color;
}
draw() {
let div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = `${this.x}px`;
div.style.top = `${this.y}px`;
div.style.width = `${this.radius}px`;
div.style.height = `${this.radius}px`;
div.style.border = "1px solid;";
div.style.borderRadius = "50%";
div.style.backgroundColor = `${this.color}`;
document.body.appendChild(div);
}
setColor(newColor) {
return this.color = newColor;
}
move({x = 0, y = 0}) {
let circle = document.getElementsByTagName('div');
setInterval(function moved() {
circle.style.left = x + "px";
circle.style.top = y + "px";
}, 100)
}
_update() {
this.x = x.move;
this.y = y.move;
}
}
let options = {
x: 100,
y: 100,
radius: 100,
color: 'red'
};
let circle = new Circle(options);
circle.setColor("green");
circle.draw();
circle.move({x: 10, y: 3});