День добрый.
Задний фон с лабиринтом является отдельной таблицей, которая является графическим фоном для Пакмена. А сам Пакмен помещен в див и спозиционирован относительно заднего фона (лабиринта), но не внутри этой таблицы, а поверх и не зависимо.
Как сделать, чтоб Пакмен не выходил за границы?
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!')
}
} // считывает код переданной клавиши и выполняет соответствующие действие