1

Тема: змінюємо img яка переміщається в точку натиску миші залеж. від х та у

Привіт всім. є 8 картинок на кожній з яких зображено по одній стрілка (напрямок руху картинки яка переміщається до кінцевої точки) приклад картинок прикріпив.
Ось в чому полягає задача:
Наприклад картинка в самому початку знаходить по кординатах (500, 250).
якщо ми мишкою кликаємо по координатах (500, 300) то під час переміщення картинку по цих координатах вона має відображатися у вигляді стрілки з напрямком переміщення ( стрілка вгору), якщо потім кликнемо по координатах (200, 100) то має відображатися стрілка яка показує на третю чверть....
ну ви короче поняли... Ось як я це хотів замутити:

<img id='pers' src='img/pers/1_1.png'/>

<script type="text/javascript">
var img = document.getElementById('pers');
var masImg = ["img/pers/1_1.png","img/pers/1_2.png","img/pers/1_3.png","img/pers/1_4.png","img/pers/1_5.png","img/pers/1_6.png","img/pers/1_7.png","img/pers/1_8.png"];
var imgPlay = 0;

document.documentElement.onclick = function(event) 
{

    $.ajax({
    type: "POST",
    url: "updateCoord.php",
    data: { updateCoordX: event.clientX  }
    }).done(function(response) 
    {    
        //event.clientX - координати знаходження картинки по х;
        //event.clientX - координати знаходження картинки по у;

        //response.x - кінцеві координати переміщення картинки по х;
        //response.y - кінцеві координати переміщення картинки по у;


        if( event.clientX <=  response.x && event.clientY <= response.y) {
        $("img#pers").attr("src", masImg[1]);
        }

        if(event.clientX >  response.x && event.clientY > response.y){
            $("img#pers").attr("src", masImg[4]);
        }

        if(event.clientX <=  response.x && event.clientY >= response.y){
            $("img#pers").attr("src", masImg[3]);
        }

        if(event.clientX >  response.x  && event.clientY >= response.y){
            $("img#pers").attr("src", masImg[6]);
        }


        $( "#pers" ).stop();
        setPosition(img, event.clientX, event.clientY);


    });
}

 function setPosition(obj, x, y) 
 {        
     
     $( "#pers" ).animate({
        left: x-20,
        top: y-42,
    }, 5000); 
 }
</script>

відповідні картинки занесені в масив, а потім залежно від напрямку переміщення ми замінюємо картинку за допомогою attr(); тільки я ось не можу зрозуміти де я допустив помилку в обрахування напрямку тому що картинки не хочуть мінятися (міняються рідко і не відображають не вірний напрямок переміщення)
http://fs144.www.ex.ua/show/911277137140/169788691/169788691.png?1600
http://fs144.www.ex.ua/show/911277137140/169788711/169788711.png?1600
http://fs144.www.ex.ua/show/911277137140/169788739/169788739.png?1600
http://fs144.www.ex.ua/show/911277137140/169788763/169788763.png?1600
http://fs144.www.ex.ua/show/911277137140/169788785/169788785.png?1600
http://fs144.www.ex.ua/show/911277137140/169788800/169788800.png?1600
http://fs144.www.ex.ua/show/911277137140/169788827/169788827.png?1600
http://fs144.www.ex.ua/show/911277137140/169788849/169788849.png?1600

2

Re: змінюємо img яка переміщається в точку натиску миші залеж. від х та у

Всьо працює. Проблеми було дві.
1) Криво вписувалися в змінну координати точок звідки вирушає персонаж.
2) Я прикидував собі в уяві зміну картинки по координатній площині (х,у), але тут так не получеться через те що потрібно вираховувати "у" по іншому (в протилежному випадку до координатної площини).
Такі тупі помилки, а стільки часу забрали)