Я в браузерці роблю рух персонажа в точку натиску миші (це крок 1).
ЗРОБИВ!
var img = document.getElementById('pers_xy'); //отримуєм дані про картинку яка знаходиться під id pers_xy щоб ми змогли нею керувати
var min_top = document.getElementById('top_right').offsetHeight; //отримуєм висоту блоку яку потрібно не враховувати в переміщення обєкта
document.getElementById("mapa").onclick = function(event) {
setPosition(img, event.clientX, event.clientY);
}
function setPosition(obj, x, y) {
var vidstan_x = x - <?php echo $row_users['x']; ?> ;//знаходимо відстань між початковою точкою по х та кінцевою точкою по х. Якщо число буде відємним то ми перемножим пізніше на -1
var vidstan_y = y - <?php echo $row_users['y']; ?>; //знаходимо відстань між початковою точкою по у та кінцевою точкою по у + віднімаємо висоту верхнього блоку. Якщо число буде відємним то ми перемножим пізніше на -1
if(vidstan_x<0) vidstan_x *= -1;
if(vidstan_y<0) vidstan_y *= -1;
var vidstan = Math.sqrt(vidstan_x*vidstan_x) + Math.sqrt(vidstan_y*vidstan_y); // вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат
var speed = vidstan * 10; // вичисляємо швидкість переміщення
$( "#pers_xy" ).stop(); // припиняє запущену анімацію
//відтворюємо анімацію + вираховуєм точні координати точок куди має переміститися персонаж + віднімаємо висоту та ширину обєкта так щоб курсор знаходився знизу
$( "#pers_xy" ).animate({
left: (x - 13)+'px',
top: (y - 42 - min_top)+'px'
}, speed);
//отправка гет запита без перезагрузки сторінки
$.ajax({
type: "GET",
url: "game.php",
data: "x="+(x - 13)+"&y="+(y - 42 - min_top),
});
$("#update_us").load("game.php #update_us"); // обновлямо без перезагрузки сторінки блок update_us
}
тепер приступаю до наступного кроку (крок 2).
Розмістив посередині екрану силку/картинку:
<a href='#' onclick=loc($url_go);return false><img src='img/$img_icon'></a>
коли я на неї кликаю то персонаж переміщається в ту точку картинки де я і кликнув, а я хочу зробити щоб коли ми кликнули по картинці тим самим визвали функцію loc наш персонаж переміщався не в саму точку натиску миші, а лише до початку картинки. Щоб таке реалізувати я надумав просто перевіряти якщо є клик по картинці то ми викликаєм(код 1 +++) переміщення обєкта по координатах з урахуванням віднімання ширини висоти картинки щоб він він на неї не вилазив, а якщо клику по картинці немає то ми викликаєм інший код (код 2 ---).
Так краще пояснив?