Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как это написать на TypeScript ? (https://javascript.ru/forum/misc/69469-kak-ehto-napisat-na-typescript.html)

yaparoff 26.06.2017 11:57

Как это написать на TypeScript ?
 
Есть код на js
без ООП, класов и т.п.
https://codepen.io/anon/pen/werXdL
Его надо перевести в TypeScript, используя интерфейсы и классы

У меня получилось вот так:
Мячик появляется на поле, но почему то не движется
Я думаю дело в методе move (на 32 строке) - видимо как-то не так его написал
interface Moveable {
    getPos(): void;
    move(): void;
}

class Ball implements Moveable {
    private _field: HTMLElement;
    private _ball: any;
    private _height: number = 500;
    private _width: number = 500;
    private _size: number = 40;
    private _S: number = 10;
    private _pos: any;

    constructor() {
        this._field = <HTMLElement>document.querySelector('.container');
        this._ball = document.createElement('div');
        this._field.appendChild(this._ball);
        this._ball.classList.add('ball');
        this._ball.style.width = this._size + 'px';
        this._ball.style.height =  this._size + 'px';
        this._ball.style.top = ( Math.random() * (this._height - this._size) ) + 'px';
        this._ball.style.left = ( Math.random() * (this._width - this._size) ) + 'px';
        this._ball.direction = Math.random() * 3.14;
    }
    getPos() {
        this._pos = this._ball.getBoundingClientRect();
        this._ball.realTop = this._pos.top;
        this._ball.realLeft = this._pos.left;
        
    }
    public move(): void {
        this._ball.realTop += Math.sin(this._ball.direction) * this._S;
        this._ball.realLeft += Math.cos(this._ball.direction) * this._S;

        if (this._ball.realTop + this._size > this._height || 
            this._ball.realLeft + this._size > this._width || 
            this._ball.realTop < 0 || this._ball.realLeft < 0) {

            this._ball.direction += Math.PI / 2;
            return this.move();
        }
        this._ball.style.top = this._ball.realTop + "px";
        this._ball.style.left = this._ball.realLeft + "px";
    }
}
let ball = new Ball();
setInterval(ball.move.bind(ball), 17);

EmperioAf 26.06.2017 13:15

yaparoff,
Вы скорее всего уже разобрались, но напишу. В оригинале код функции getPos вызывается в конструкторе. Вы же не вызываете. Ну и функция которая называется getPos и возвращает void вызывает легкое недоумение, учитывая что она публичная.


Часовой пояс GMT +3, время: 18:24.