Жук который ползает
 

Всем привет.
В процессе обучения пришла в голову такая мысля - нарисовать на html жука, а на js и jQuery сделать так что бы им можно было управлять с клавы, вот что получилось
Анимацию лап и т.д пропускаю - только основное выложу
Вот само поле с жуком

<div class="marg">
		<div class="juk"></div>
	</div>

а вот js код

function removeCl(a, f, c){
		if($('.juk').attr("class") == "juk "+a){
			if(a == 'top' || a == "left"){
				var top = Number($(".juk").css(f).replace("px", "")) - 5;
			}else{
				var top = Number($(".juk").css(f).replace("px", "")) + 5;
			}
			$(".juk").css(f, top);
			return;
		}else{
			$(".juk").addClass(a);
			$(".juk").removeClass(c);
			return;
		}
	}
	document.onkeypress = function(e) {
		switch (e.keyCode) {
		    case 38: //Top
		    	removeCl("top", "top", "bottom right left");
		    	break;
		    case 40: //Bottom
		    	removeCl("bottom", "top", "top right left");
		    	break;
		    case 37: //Left
		    	removeCl("left", "left", "top right bottom");
		    	break;
		    case 39: //Right
		    	removeCl("right", "left", "top left bottom");
		    	break;
		}
	}

CSS классы я добавляю и удаляю что бы сделать жуку плавный поворот в нужную сторону - к примеру класс left - transform: rotate(-90deg); - это его css код, соответственно класс right - (90deg), top 0deg и bottom 180deg

Проблем еще много - но пока одна из них такая - при нажатии клавишы к примеру Up жук двигается вверх - но стоит мне нажать какую нить другую клавишу хотя бы один раз - Up перестает работать не смотря на то что я ее не отпускал.
И хотелось бы услышать - адекватное ли подобное решение для такой задачи - или все таки можно проще, логичнее и короче код сделать. Буду признателен
P.S Книжку пойти почитать не посылать, так как я в процессе :)

Выкинь эту хрень. Зачем она тут тебе? Чтобы классы добавлять? el.classList.add('class')
Чтобы стили назначать? el.style.top = 50 + 'px'.

function Bug() {
    this.step = 5;
    this.baseClass = 'juk';
    this.element = /* ... */;
    this.bindKeys();
}

Bug.prototype.moveTo = function(direction) {
    switch (direction) {
        case 'top':
            this.top -= this.step;
            break;
         /* ... */
    }
    this.element.className = this.baseClass + direction;
    this.element.style.top = this.top + 'px';
    this.element.style.left = this.left + 'px';
};

Bug.prototype.bindKeys = function(e) {
    var keyNav = {38: 'top', 39: 'right'};
    var bug = this;
    document.addEventListener('keypress', function(e) {
        if (e.keyCode in keyNav)
            bug.moveTo(keyNav[e.keyCode]);
    }, false);
};


var bug = new Bug();

bug.moveTo('top');

Канвас тебе в помощь

danik.js,
jQuery прилепил потому что в js мои знания ограничиваются if, for и немного функциями.
Вот сейчас сижу и думаю как же ваш пример прилепить что бы проверить :)

Тем более быстро отлепляй и продалжай изучать JS...

ksa,
А вот такой вопрос немного не по теме - зачем вообще нужен jQuery и почему такой популярен? Кто его вообще использует? Верно ли утверждение что jQuery используют дилетанты? Ну или верстальщики далекие от js как я например :)

Затем чтоб упростить работу с событиями, поиск элементов и забыть(в какой том мере) про проблемы кроссбраузерности.
Обычно люди, но я не могу ручаться.
Верно утверждение что те кто не используют jq принципиально нигде, никогда, ни под каким предлогом - мастурбаторы.
Когда идет борьба за производительность например, нет смысла использовать jq.

Для использования... Но тому, кто давно ведет разработку на JS, он не нужен. У этого человека уже есть нужный ему инструментарий... Если чего не хватает - он это напишет.

Потому как, таких как ты больше чем тех, кто "давно ведет разработку на JS", а еще есть масса "эффективных менеджеров", которые его пишут в требованиях к соискателям... :D

Любой, кто пожелает. Т.к. распространяется бесплатно...

Сам факт использования не говорит о качестве специалиста. Но то утверждение ложно.

Лично ты его используешь не к месту... :) Про это тебе и написали.

ksa,
Ну если библиотека уже подключена на странице то почему бы не использовать. Я думал как бы советуют вообще стараться не использовать. Вот и подумал к чему бы это.
А вообще как посмотрю на инструментарий js для выбора элементов так плакать хочется - чего только стоит document.getElementsByTagName("") или document.getElementById("") - что курили когда придумали такие опусы не понимаю. Еще бы так написали document.взятьДочернийЭлемент� �олькоНеТотЧтоКлассАтотЧт� �IdСмотриНеПерепутайКоньяк� �Водкой('top')
Думаю только автокомплит спасает програмеров JS от производственных травм в виде переломов фаланги пальцев.
Хотя не мне судить, я только 150 страниц по JS прочитал :)

Тут главное не перестараться. ;)

Если есть нативный метод или просто свойство - используй их. Не стоит городить огород... :)

Это ты еще СИшные программки не читал... :D

Или посмотри как отжигают 1Сники... :lol:

Мы - программисты, народ плечистый! Нас не заманишь сиськой мясистой! :nono: