Жук который ползает. Возрождение
Всем доброго времени суток.
Сразу оговорюсь что с ООП не работал ни на каких языках, кроме JS, и то немного, на любительском уровне, чисто для себя, в больших проектах не участвовал. Пару деньков почитал документацию по TypeScript и решил для пущего понимания переписать существующий код на JS который писали всем миром здесь :) : http://javascript.ru/forum/misc/5420...tml#post360386 Много понимания не добавилось в виду относительной простоты приложения - все свелось к небольшой переписи кода, но все же есть вопрос по 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 и т.д. знаком с интерфейсами, модулями и пр. Буду признателен за комменты и подсказки. |
Я тут немного посидел и решил усложнить себе жизнь - задался вопросом - а что если мне надо 2, 3 или 4 жука (пока не важно для какой цели)?
Немного изменил код в некоторых местах Теперь 2 жука создаются так
var bug = new Bug(100, 100, '.bug');
bug.moveTo('top');
var bug2 = new Bug(300, 100, '.bug2');
bug2.moveTo('bottom');
Где в параметрах я задаю начальное положение жука сверху и слева и HTML класс самого жука. И естественно у меня возникла проблема с лапами - теперь 2 жука управляют одновременно одними и теми же лапами - они двигаются у два раза быстрее Может напрасно я создавал отдельный класс для лап? Лапы то ведь связать надо каждую со своим жуком Посижу подумаю... |
Ну вроде ок, промежуточная задача выполнена - можно задавать сколько угодно жуков, также сделал что бы каждым отдельным жуком можно было управлять отдельно что бы было наглядно видно что жуки и лапы независимы друг от друга.
http://1.top-start.ru/bug/ - управление первым жуком по прежнему стрелками, вторым клавишами WASD. Всего лишь сделал что бы каждый новый жук создавал сам себе лапы в конструкторе в строках 24-29. По прежнему остается вопрос - адекватный ли этот подход и код в целом. Компилятор не матерится, все работает но все же програмерский подход "работает - не трогай" не катит. Прошу комментировать.
class Bug {
step: number;
rotation: number;
direction: string;
top: number;
left: number;
element: any;
limb1: any;
limb2: any;
limb3: any;
limb4: any;
limb5: any;
limb6: any;
controlBug: boolean;
constructor(top, left, element, control) {
this.controlBug = control;
this.step = 4;
this.rotation = 0;
this.direction = 'top';
this.top = top;
this.left = left;
this.element = document.querySelector(element);
this.bindKeys();
this.limb1 = new Limb(element + ' ' + '.limb_left1', -5, -35, 17, 12);
this.limb2 = new Limb(element + ' ' + '.limb_left2', 0, 0, 50, 12);
this.limb3 = new Limb(element + ' ' + '.limb_left3', -10, -15, 37, 12);
this.limb4 = new Limb(element + ' ' + '.limb_right1', 38, -15, 38, 12);
this.limb5 = new Limb(element + ' ' + '.limb_right2', 0, -48, 0, 12);
this.limb6 = new Limb(element + ' ' + '.limb_right3', -10, -35, 5, 12);
}
bindKeys(){
if(this.controlBug) {
var keyNav = { 38: 'top', 39: 'right', 37: 'left', 40: 'bottom' };
} else {
var keyNav = { 87: 'top', 68: 'right', 65: 'left', 83: '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();
this.limb1.rotateLimb(); this.limb2.rotateLimb(); this.limb3.rotateLimb(); //left limb
this.limb4.rotateLimb(); this.limb5.rotateLimb(); this.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;
parent: any;
rotateLimb(e) {
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 bug = new Bug(100, 100, '.bug', true);
bug.moveTo('top');
var bug2 = new Bug(200, 100, '.bug2', false);
bug2.moveTo('top');
|
Чтобы небыло иллюзии невнимания скажу что вы не один:)
К сожалению комментировать код не смогу - навыков не хватит, а чем больше нового узнаю тем больше понимаю что нуб полный. От нуба критики не будет, вот. Думаю поковырять малость это в свободное время, сделаю жука самостоятельным. Свободу жукам!;) |
:)
aklis, в каком плане самостоятельным? Вроде как каждый жук сам по себе.:) |
Самостоятельным - в плане будет бегать сам.
Хочу пожаловаться, вот предыстория: Смотрю на лостфилм выпустили первую серию шестого сезона игры престолов, а если сидишь с российского айпи тогда мол скачать нельзя ее. Глянул, там просто див кнопки скачивания скрыт. Посмотрел, по клику на нем запускается функция ShowAllReleases('145','6.00','01') . id сериала, номер сезона и серии - класс думаю я, очень удобно теперь будет качать. Выполнил в консоли ее, открылось всплывающее окно, скачал серию спокойно и без прокси. Думаю: надо поделится с народом в комментах, а то многие ссылки выискивают среди всех комментариев. Поделился. Суть: никто не обратил внимания, просят линк... Хотя казалось бы сделать по моему не сложнее чем плюнуть через губу, но народ хочет тыкать мышкой, только дайте цель! Абзац блин... |
aklis,
Ну кому то легко, а кому то показалось тяжело видимо... Бывает По поводу самостоятельного жука - думал сделать так, там вроде и делов немного. Вообще можно намножить кучу жуков и сделать пусть двигаются хаотично. Но это слабо осложнит жизнь, надо что то потяжелее придумать с уклоном на ООП. |
А я просто потом задумал шуткануть над кем нибудь.Оставят свои вконтактики открытыми, вернуться, а по страничке жуки ползают. Хочу знать кто как отреагирует:)
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:16. |