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

Жук который ползает
Всем привет.
В процессе обучения пришла в голову такая мысля - нарисовать на 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 Книжку пойти почитать не посылать, так как я в процессе
Ответить с цитированием