Javascript-форум - Задать или ограничить область действия эллемента

День добрый.
Задний фон с лабиринтом является отдельной таблицей, которая является графическим фоном для Пакмена. А сам Пакмен помещен в див и спозиционирован относительно заднего фона (лабиринта), но не внутри этой таблицы, а поверх и не зависимо.
Как сделать, чтоб Пакмен не выходил за границы?
var settings = {
    pause : false,
    x : 196,
    y : 412,
    direction: 'right',
    dirs: '.pacman_left .pacman_right .pacman_top .pacman_bottom'
};

function init(){
    createTable();
    bind();

    $('#pacman').css({left: settings.x, top: settings.y});
}

function createTable(){
    $('#main_container').append('<table border="" class="square-pacman"></table>');
    for (var i = 1000; i <= 1019; i++){
        $('.square-pacman').append('<tr>'+createRows(i)+'</tr>')
    }
    $('#main_container').append('<div  id="pacman" class="pacman"><img src="img/pr.gif" height="20" width="20"></div>');
    $('#line_10096').append('<span  id="go" class="go"><img src="img/go.gif" height="20" width="20"></span>');
    $('#line_10097').append('<span  id="gp" class=gp"><img src="img/gp.gif" height="20" width="20"></span>');
    $('#line_10098').append('<span  id="gr" class="gr"><img src="img/gr.gif" height="20" width="20"></span>');
    $('#line_10099').append('<span  id="gb" class="gb"><img src="img/gb1.gif" height="20" width="20"></span>');
    <!--поля еды-->
    $('#line_10001, #line_10002, #line_10003, #line_10004, #line_10005, #line_100010, #line_100011, #line_100012, #line_100013, #line_100014').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10011, #line_10013, #line_10015, #line_10016, #line_10017, #line_10018, #line_10019, #line_100110, #line_100112, #line_100114').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10021, #line_10022, #line_10023, #line_10024, #line_10025, #line_1000210, #line_100211, #line_100212, #line_100213, #line_100214').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('/*#line_10033,*/ #line_10035, #line_10036, #line_10037, #line_10038, #line_100039, #line_100310/*, #line_100312*/').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10033, #line_100312').append('<span  class="berry"><img src="img/berry.gif" height="27" width="27"></span>');
    $('#line_10041, #line_10042, #line_10043, #line_10045, #line_100410, #line_100412, #line_100413, #line_100414').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10051, #line_10055, #line_10056, #line_10057, #line_10058, #line_10059, #line_100510, #line_100514').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10061,	#line_10062,	#line_10063, #line_10065, #line_100610, #line_100612, #line_100613, #line_100614').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10073,	#line_10074,	#line_10075,	#line_100710,	#line_100711,	#line_100712').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10083,	/*#line_10085,	#line_10086,	#line_10087,	#line_10088,	#line_10089,	#line_100810,*/ #line_100812').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10093,	/*#line_10095,	#line_100910,*/	#line_100912').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10103,	#line_10104,/*#line_10105,	#line_10106,	#line_10107,	#line_10108,	#line_10109,	#line_101010,*/ #line_101011,#line_101012').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10113,	#line_10115,	#line_101110,#line_101112').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10123,	#line_10125,	#line_101210,#line_101212').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10131,	#line_10132,	#line_10133,	#line_10134,	#line_10135,	#line_10136,	#line_10139,	#line_101310,    #line_101311,	#line_101312,	#line_101313,	#line_101314').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10141,	#line_10146,	#line_10149,	#line_101414').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10151,	#line_10152,	#line_10153,	#line_10155,	#line_10156,	#line_10157,	#line_10159,	#line_101510,	#line_101512,	#line_101513,	#line_101514').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10163,	#line_10164,	#line_10165,	#line_101610,	#line_101611,	#line_101612').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10171,	/*#line_10172,*/	#line_10173,	#line_10175,	#line_10176,	#line_10179,	#line_101710, #line_101712,	/*#line_101713,*/	#line_101714').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10172, #line_101713').append('<span  class="berry"><img src="img/berry.gif" height="27" width="27"></span>');
    $('#line_10181,	#line_10183,	#line_10186,	#line_10187,	#line_10188,	#line_10189,	#line_101812, #line_101814').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');
    $('#line_10191,	#line_10192,	#line_10193,	#line_10194,	#line_10195,	#line_10196,	#line_10199,	#line_101910,	#line_101911,	#line_101912,	#line_101913,	#line_101914').append('<span  class="eat"><img src="img/eat.gif" height="13" width="13"></span>');

    function createRows(number){
        var rows = [];
        for (var i = 1; i <= 14; i++){
            rows[i] = '<td  id="line_'+number+i+'"></td>';

        }

        return rows.join('');

    }
}

function bind(){
    $(window).on( 'keydown', function(event){
        movementPacman(event.keyCode);  //передает значение нажатой функции в ф-ию movementPacman
    });

    $('#pacman').on('keydown',function(event){
        movementPacman(event.keyCode);
    });
}

/*таймер предзапуска игры*/
//setTimeout(key, 3000);

/*начальные координаты*/
//$('#pacman').css({left: 192, top:406}); //пакмена
//
//$('#go').css({left: 138, top:270}); //1 оранжевого
//$('#gp').css({left:165, top:270}); // 2 фиолетового
//$('#gr').css({left: 192, top:270}); // 3 красного
//$('#gb').css({left: 219, top:270}); // 4 синего

/*управление пакменом*/
function movementPacman(key) {
    console.log(key);

    var left_pacman = 0;
    var top_pacman = 0;

    if(key){
        if (key == 37) {//left
            settings.x = settings.x-27;
            settings.direction = 'left';

        } else if (key == 38) { //top
            settings.y = settings.y-27;
            settings.direction = 'top';
        } else if (key == 39) { //right
            settings.x = settings.x+27;
            settings.direction = 'right';
        }  else if (key == 40) {// bottom
            settings.y = settings.y+27;
            settings.direction = 'bottom';
        } else if (key == 82) {
            location.reload(true)
        } else if (key == 80) {
            if(settings.pause){
                settings.pause = false;
            } else {
                settings.pause = true;
            }
        }

        $('#pacman').css({
            left: settings.x,
            top: settings.y
        })
            .removeClass(settings.dirs)
            .addClass('.pacman_'+settings.direction);

    } else {
        console.log('Error! Key is not defined!')
    }

} // считывает код переданной клавиши и выполняет соответствующие действие