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