1

Я реализовал класс 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});

1
  • let circle = document.getElementsByTagName('div') - возвращает массив всех дивов на странице. Вам нужно либо указать индекс дива либо получить его другим методом
    – Dmytro
    30 июн 2018 в 19:33

1 ответ 1

2
    move({x = 0, y = 0}) {
        let circle = document.getElementsByTagName('div')[0]; // !!!
        setInterval(function moved() {
            circle.style.left = circle.offsetLeft + x + "px"; // !!!
            circle.style.top = circle.offsetTop + y + "px";   // !!!
        }, 100)
    }

P.S. Вы, кажется, перепутали радиус с диаметром.

2
  • 1
    решил по-умничать)... исходя из логики кода document.body.appendChild(div); лучше использовать [length-1], чем [0]. Не так ли?
    – Dmytro
    30 июн 2018 в 20:11
  • 2
    Согласен. Я бы скорее склонялся к уникальному id, который генерится в конструкторе, хранится в поле объекта, чей метод move, и назначется div элементу во время создания.
    – user176262
    30 июн 2018 в 20:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.