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

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

ksa,
Что плечистый так это точно - но тем не менее в спортзал ходить надо ) для поддержки тонуса дельт.
Посмотрел 1С код - такое ощущение что взяли какой нить код другого языка и перевели в гугл переводчике.
Подведу итоги - жука я не оживил толком - зато неплохую мотивацию получил - как то неудобно стало за свой говнокод. Пойду дальше учить JS. КТо бы мне еще про объекты вкратце рассказал - а то сколько читаю и смотрю о них - никто не говорит зачем они нужны и где применять на практике.

Если "вкратце" рассказать то никто толком и не поймет... :D

В JS есть несколько "особенных" субстанций, как то
- замыкание
- объекты

Это достаточно фундаментальные особенности языка и те, кто познал это давно находятся в нирване... :D
Т.ч. тебе есть еще чего познавать и познавать. ;)

если загвоздка только в этом, то можно написать функцию

function $$(selector) {
  return document.querySelectorAll(selector);
}

и пальцы будут постепенно атрофироваться

danik.js,
Извините, забыл самое главное спросить:
Почему вариант с одной функцией и 4 условиями менее предпочтителен (!или вообще недопустим?) чем вариант с объектами и методами? В чем принципиальная разница - кроме конечно солидности кода? Может для возможности расширения функций жука? Вы добавите метод, я добавлю функцию в итоге будет работать идентично.
Или проще значит лучше это не про JS сказано?
P.S Не сомневаюсь в Вашем коде - просто хочу познать истину JS

Нажатие нескольких клавиш управление стрелками
 

Bond,
Вариант для отслеживания нажатий нескольких клавиш (вверх + лево) и т.д.
кликнуть на поле - нажать стрелочки на клавиатуре

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body,html{background:#FC9;height:100%}
  div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
  </style>
  <script>
window.onload = function() {
    function move() {
        for (var a in c)
            if (c[a]) {
                var d = b[a][0];
                b[d] += b[a][1];
                div.style[d] = b[d] + "px"
            }
        window.requestAnimationFrame(move)
    }
    var b = {
            39: ["left", 3],
            37: ["left", -3],
            40: ["top", 3],
            38: ["top", -3],
            left: 200,
            top: 200
        },
        c = {};
    move();
    var div = document.getElementById("show");
    document.body.onkeydown = function(a) {
        a = a || window.event;
        a = a.keyCode;
        a in b && (c[a] = true);
    };
    document.body.onkeyup = function(a) {
        a = a || window.event;
        a = a.keyCode;
        a in b && (c[a] = false);
    }
};
</script>
</head>

<body>
<div id="show" ></div>
</body>
</html>

Bond, как хочешь так и пиши. На мой взгляд жук - это объект. У него есть набор свойств и методов. Вот смотришь на код - и сразу видишь все это. А у тя какая-то неясная функция removeCl которая умеет вроде как класс удалять, судя по названию. Но судя по коду она еще чета делает, почему-то только именно с жуком, да еще не только удаляет класс, но и добавляет. Вобще фиг знает че там происходит - ведь не ясно что значит a f и c. Оуа дыауца Наыоващ ацуацуа. Вот ты понял че-нибудь? А все потому что я использовал рэндомные буквы, а не смысловые слова. Так же и ты :)

Короче, в твоем подходе свойства и функции раскиданы по коду. Верней у тебя даже свойства нет - оно постоянно вычисляется, обращаясь к DOM'у документа. У меня все в пучек собрано. Вот и вся разница.

Когда ты заглянешь в словарик и узнаешь, что жук - это bug, а не juk и захочешь поменять css-класс, то придется править во всех участках кода. Но это уже не про ооп.

рони, прекрасный код! С меня причитается ;)

рони,
Спасибо, это вообще крутой вариант для движения, да и для опыта тоже - буду разбираться что, как и почему.
Еще фишка в том что по задаче это как бы жук, и у него есть голова и тело продолговатое - поэтому он должен поворачиваться в сторону движения собственно для этого я добавлял классы с transform: rotate() ну и transition добавлял для плавности- но они не совсем адекватно работали. К примеру если голова повернута вниз, а нужно было повернуть влево - то он разворачивался через левое плечо на 270 градусов
если ли в JS инструмент что бы вертеть блок вокруг своей оси? - я нагуглил matrix() - но как все это считать не разобрался

Bond, bottom это 180deg, а left это -90, вот он и анимирует с 180 до -90, проворачивая против часовой стрелки.

Как вариант: перед поворотом налево отключай транзишн, меняй 180 на -180, и включай транзишн обратно. Блин, запутанно получается. Слева вниз - та же история. Мож кто че-нибудь проще придумает?
И вместо классов, возможно проще будет менять напрямую transform

danik.js,
Поначалу у меня было задумано что эта функция будет только удалять классы, все остальное будет делаться в swich, но потом решил почему бы не запихнуть все в функцию - все равно все действия одни и теже за вычетом некоторых. Да действительно код тяжелый для восприятия - но думаю это только потому что я рандомно все поназывал - как бы для себя делал - не парился по этому вопросу. Ну и конечно же две строки постоянного обращения к DOM для вычесления положения можно убрать - я просто забыл как плюсовать или минусовать по пикселям к существующему, вроде делал когда то на jQuery. А переименовать во множестве местах не проблема в саблайме с функцией множественного выделения, да и в других редакторах вроде есть поиск и замена. Хотя согласен, отмазка про множественное выделение тупая и что в одном месте лучше, но с таким же успехом я мог бы переменную создать и использовать ее. Я не отрицаю мега удобность объектов - но не могу никак в них въехать - хотя на примере жука начинаю понемногу понимать ) Спасибо вам за помощь и участие в становлении будущего гуру по JS )))

danik.js,
да было бы крутяк трансформ ротейт менять - было бы вообще плавно, хотя думаю 8 точек достаточно для поворота.
Я matrix() нагуглил - но чувак как то там косинусами синусами все вычислял - мне пока это не дано. Он как бы показывал как работает на UI функция поворота блока мышкой.

Выкинь jQuery пока. Эта либа разлагает мозги, плохому учит типа )

У меня не объект, а конструктор, создающий сколь угодно жуков.

Но ты можешь создать одного жука, без конструктора:

var bug = {
    step: 5,
    element: document.querySelector('.juk'),
    moveTo: function(direction) {
        this.element.style.top += this.step;
    }
};

danik.js,
Да, по поводу jQuery заметил что разлагает. Подумал что крутая фишка - для верстки почти все задачи решает. Вот и забил на JS. С PHP помню while for if и прочее - вот и подумал что этого достаточно. Но последнее время пришел к мысли что х. р..й я занимаюсь а не веб разработкой с этими хлипкими скриптиками и чужими решениями типа галереи или таймера. Вот и решил основательно подойти к этому вопросу.

Bond, можешь при повороте по часовой стрелке минусовать 90deg, против часовой - плюсовать. Правда, если крутиться на месте число будет возрастать.

this.rotation = 0;

moveTo(dir) {
    dir = {top: 0, left: 90, right: 270, bottom: 180}[dir];
    var diff = dir - (this.rotation % 360);
    if (diff > 180) {
        diff -= 360;
    this.rotation += diff;
}

rotation - угол поворота. Может быть больше 360.

rotation % 360 - отбросили лишние обороты, получили 0 <= x <= 360

diff - разница в градусах на сколько нужно повернуться из текущего положения. Если больше 180, значит поворачиваться надо в противоположную сторону - минусуем оборот.

Еще интересно - а что бы лабиринт еще создать, как решить такую задачу? В массивах хранить стопы куда нельзя заходить?

danik.js,
О, спасибо попробую. Есть фронт работ для экспериментов.

Блин, быдляцкий код получился для вычисления угла поворота.
http://jsfiddle.net/danya_postfactum/3xysqas1/

жаль что вам он вам не понравился - по крайне мере он решает поставленную задачу из первого поста в отличие от твоих примеров.

рони, я не спорю насчет работы кода. У меня предъявы к его читаемости (названия переменных, если забыл).

danik.js,
Уже полностью разобрался в коде, также разобрался с конструкторами и прототипами, но вот смущает 3 строка в этом коде:

Bug.prototype.moveTo = function(direction) {
    this.direction = direction;
    var angle = {top: 0, left: 270, right: 90, bottom: 180}[direction];
    var diff = angle - (this.rotation % 360);
    //console.log(this.rotation, diff, (diff - 360));
    if (diff > 180 )
        diff = diff - 360;
    else if (diff < -180 )
        diff = diff + 360;
    
    this.rotation += diff;

    if (diff == 0) {
        // продвигаемся
        this.advance();
    }
    this.update();
};

Не могу понять что здесь происходит - вернее что происходит ясно если к примеру direction == 'left' то angle будет 270 и т.д, но вот не пойму что это за запись, вроде про объекты читал, и про массивы тоже, но это мне напоминает смесь бульдога с носорогом. Проясните пожалуйста куда копать, не обязательно в подробностях. Видимо я что то пропустил.

Это укороченный вариант такой записи:

var directionToAngleMap = {top: 0, left: 270, right: 90, bottom: 180};

var angle = directionToAngleMap[direction];

Просто без создания переменной - записали объект в литеральном виде и тут же получили его свойство (имя которого приходит в переменной direction;

Вообще, это некий аналог switch'а получается.

danik.js,
Ага, спасибо
Я прикинул по результате работы и подумал что неплохо заменяет switch. Правда медленнее работает чем switch но запись сокращает. А вот то что так можно записывать не знал, видимо что то пропустил.