Показать сообщение отдельно
  #1 (permalink)  
Старый 26.04.2016, 20:24
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Жук который ползает. Возрождение
Всем доброго времени суток.
Сразу оговорюсь что с ООП не работал ни на каких языках, кроме 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 и т.д. знаком с интерфейсами, модулями и пр.
Буду признателен за комменты и подсказки.

Последний раз редактировалось Bond, 26.04.2016 в 20:34.
Ответить с цитированием