Всем доброго времени суток.
Сразу оговорюсь что с ООП не работал ни на каких языках, кроме JS, и то немного, на любительском уровне, чисто для себя, в больших проектах не участвовал.
Пару деньков почитал документацию по TypeScript и решил для пущего понимания переписать существующий код на JS который писали всем миром здесь
:
Жук который ползает Часть 2
Много понимания не добавилось в виду относительной простоты приложения - все свелось к небольшой переписи кода, но все же есть вопрос по Typescript
Адекватный ли это код и структура с точки зрения более классических ООП-шных языков? Что можно изменить в структуре?
Как все работает можно посмотреть здесь -
http://1.top-start.ru/bug/ - управление жуком стрелками.
Код на TypeScript:
//Класс жук
class Bug {
step: number;
rotation: number;
direction: string;
top: number;
left: number;
element: any;
constructor() {
this.step = 4;
this.rotation = 0;
this.direction = 'top';
this.top = 200;
this.left = 200;
this.element = document.querySelector('.bug');
this.bindKeys();
}
bindKeys(){
var keyNav = { 38: 'top', 39: 'right', 37: 'left', 40: 'bottom' };
var bug = this;
document.addEventListener('keydown', function(e) {
if (e.keyCode in keyNav)
bug.moveTo(keyNav[e.keyCode]);
}, false);
}
update(){
var style = this.element.style;
// if (this.left < 0) { this.left = 1; return; }
// if (this.top < -25) { this.top = -24; return; }
style.top = this.top + 'px';
style.left = this.left + 'px';
style.transform = 'rotate(' + this.rotation + 'deg)';
}
moveTo(direction) {
this.direction = direction;
var angle = { top: 0, left: 270, right: 90, bottom: 180 }[direction];
var diff = angle - (this.rotation % 360);
if (diff > 180)
diff = diff - 360;
else if (diff < -180)
diff = diff + 360;
this.rotation += diff;
if (diff == 0) {
this.advance();
}
this.update();
limb1.rotateLimb(); limb2.rotateLimb(); limb3.rotateLimb(); //left limb
limb4.rotateLimb(); limb5.rotateLimb(); limb6.rotateLimb(); //right limb
}
advance(){
switch (this.direction) {
case 'top':
this.top -= this.step;
break;
case 'bottom':
this.top += this.step;
break;
case 'left':
this.left -= this.step;
break;
case 'right':
this.left += this.step;
break;
}
}
}
//Класс лапа
class Limb {
limb: any;
start: number;
ltop: number;
bottom: number;
lstep: number;
style_limb: any;
flag: boolean;
rotateLimb() {
this.style_limb = this.limb.style;
if (this.start <= this.ltop) this.flag = true;
if (this.start >= this.bottom) this.flag = false;
if (this.flag) { this.start += this.lstep; } else { this.start -= this.lstep; }
this.style_limb.transform = 'rotate(' + this.start + 'deg)';
}
constructor(limb, start, ltop, bottom, step) {
this.limb = document.querySelector(limb);
this.start = start; //Стартовое положение лапы
this.ltop = ltop; // Крайнее верхнее положение лапы
this.bottom = bottom; // Крайнее нижнее пложение лапы
this.lstep = step; // Шаг движения лапы
}
}
var limb1 = new Limb('.limb_left1', -5, -35, 17, 12);
var limb2 = new Limb('.limb_left2', 0, 0, 50, 12);
var limb3 = new Limb('.limb_left3', -10, -15, 37, 12);
var limb4 = new Limb('.limb_right1', 38, -15, 38, 12);
var limb5 = new Limb('.limb_right2', 0, -48, 0, 12);
var limb6 = new Limb('.limb_right3', -10, -35, 5, 12);
var bug = new Bug();
bug.moveTo('top');
Ничего сложного 2 класса и несколько методов, но все же прошу прокоментить
При надобности код на JS скомпилированный с TS можно взять прям с сервера.
Исходный код с которого писал на TS - здесь -
http://1.top-start.ru/bug/js/pics2.js
Также есть вопрос немного не по теме - Где можно взять литературу или видео на русском языке что бы нормально "въехать" в TypeScript? Потому как что то с уроками по TS на том же ютубе печаль беда - такое ощущение что все подразумевают что человек который знакомится с TS кроме JS знаком с С#, Java и т.д. знаком с интерфейсами, модулями и пр.
Буду признателен за комменты и подсказки.