Установка границ для div с помощью клавиатуры

Question

Хорошо, я удалил свой код отсюда для загрузки лота здесь: http://www.project -vanquish.co.cc / jRPGrid-v0.4b / index.html

(пожалуйста, игнорируйте любые ошибки SQL)

• Нажатие на Grid-Node - перемещает символ на позицию (границы включены)
• Перетаскивание персонажа - перемещение в позицию (границы включены)
• Использование клавиш курсора на клавиатуре - перемещает символ (без границ).

Я хотел бы установить границы #character на #map, через клавиатуру- границы работают с мышью

Answer 1

Хорошо, я подозреваю, что границы неправильные.Я изменил все операторы if на то, что считаю правильным, чтобы персонаж оставался в пределах карты.

$(document).bind('keydown',function(e){ //set the keydown function as...
    switch(e.which) 
        case 37:    $(characterName).css("background-image", "url(img/character-left.gif)");  //LEFT ARROW KEY
                    var character = $(characterName);
                    var map = $('#map');

                    if((character.offset().left - 40) >  map.offset().left) {
                        character.animate(
                            {
                                left: '-=40'
                            },
                            250,
                            function(){}
                        );
                    }
                    break;
        case 39:    $(characterName).css("background-image", "url(img/character-right.gif)"); //RIGHT ARROW KEY
                    var character = $(characterName);
                    var map = $('#map');

                    if((character.offset().right + 40) <  map.offset().right) {
                        character.animate(
                            {
                                left: '+=40'
                            },
                            250,
                            function(){}
                        );
                    }
                    break;
        case 38:    $(characterName).css("background-image", "url(img/character-up.gif)"); //UP ARROW KEY
                    var character = $(characterName);
                    var map = $('#map');

                    if((character.offset().top - 40) <  map.offset().top) {
                        character.animate(
                            {
                                top: '-=40'
                            },
                            250,
                            function(){}
                        );
                    }
                    break;
        case 40:    $(characterName).css("background-image", "url(img/character-down.gif)"); //DOWN ARROW KEY
                    var character = $(characterName);
                    var map = $('#map');

                    if((character.offset().bottom + 40) <  map.offset().bottom) {
                        character.animate(
                            {
                                top: '+=40'
                            },
                            250,
                            function(){}
                        );
                    }
                    break;
    }
});

Answer 2

Я не самый осведомленный о JQuery, но я думаю, что каждое место, где вы устанавливаете top с чем-то вроде '+=40', вероятно, не распознает "+ =" как оператор. Вам, вероятно, следует установить top, получив текущее значение и добавив к нему значение, затем присвоив его обратно top.