21

Re: плавне переміщення зображення в точку натиску миші

Питання наспуне...
Якщо ми нажали мишою наприклад з інтервалом в 1сек. в двох різних точках координат то наш обєк спочатку переміщається в точку один, а аж після цього переміщається в точку 2. Як зробити так щоб персонаж зразу ж переміщався в точку 2 не доходячи до точки 1?! Дякую.

22 Востаннє редагувалося quez (08.01.2015 13:17:51)

Re: плавне переміщення зображення в точку натиску миші

Знайдіть метод, який зупиняє анімацію, і викликайте його в onclick першим

Подякували: Faraon1

23

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Знайдіть метод, який зупиняє анімацію, і викликайте його в onclick першим

дякую.

24 Востаннє редагувалося Faraon (08.01.2015 15:28:26)

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Знайдіть метод, який зупиняє анімацію, і викликайте його в onclick першим

Знайшов метод stop(). Все працює! Тепер мені б здалась допомога в виясненні де ж саме я роблю помилку?! (переміщення обєкта з одинаковою швидкістю на любу відстань)
Ніяк не виходиць таке реалізувати. Ось js код:

var img = document.getElementById('pers_xy');  //отримуєм дані про картинку яка знаходиться під id pers_xy щоб ми змогли нею керувати

document.getElementById("mapa").onclick = function(event) {
    setPosition(img, event.clientX, event.clientY);
}

 function setPosition(obj, x, y) {
    var min_top = document.getElementById('top_right').offsetHeight; //отримуєм висоту блоку яку потрібно не враховувати в переміщення обєкта
    
    //вираховуєм точні координати точок куди має переміститися персонаж + віднімаємо висоту та ширину обєкта так щоб курсор знаходився знизу
    var left_x = x - 13;
    var top_y = y - min_top - 42;
    //-----------------
    
    var left_pers = x - <?php echo $row_users['x']; ?> ;//знаходимо відстань між початковою точкою по х та кінцевою точкою по х. Якщо число буде відємним то ми перемножим пізніше на -1
    var top_pers = y - <?php echo $row_users['y']; ?> - min_top; //знаходимо відстань між початковою точкою по у та кінцевою точкою по у + віднімаємо висоту верхнього блоку. Якщо число буде відємним то ми перемножим пізніше на -1
    
    if(left_pers<0) left_pers *= -1;
    if(top_pers<0) top_pers *= -1;
    
    var vidstan = Math.sqrt(left_pers*left_pers + top_pers*top_pers); // вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат
     var speed = vidstan * 10;  // вичисляємо швидкість переміщення
     
        $( "#pers_xy" ).stop(); // припиняє  запущену анімацію
        
        //відтворюємо анімацію
        $( "#pers_xy" ).animate({
            left: left_x+'px',
            top: top_y+'px'
        }, speed);
       

обєкт все одно переміщається з різною швидкістю на різні відстані. Наприклад на велику відстань він переміщається з якоюсь швидкість х1, а на малу відстань він переміщається з швидкістю х2.

25

Re: плавне переміщення зображення в точку натиску миші

Помилка все та ж: ви знаходите відстань не між персонажем та точкою, в якій був клік, а між персонажем та початком координат.

26

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Помилка все та ж: ви знаходите відстань не між персонажем та точкою, в якій був клік, а між персонажем та початком координат.

як це??? ось я вираховую катети

    
    var left_pers = x - <?php echo $row_users['x']; ?> ;//знаходимо відстань між початковою точкою по х та кінцевою точкою по х. Якщо число буде відємним то ми перемножим пізніше на -1
    var top_pers = y - <?php echo $row_users['y']; ?> - min_top; //знаходимо відстань між початковою точкою по у та кінцевою точкою по у + віднімаємо висоту верхнього блоку. Якщо число буде відємним то ми перемножим пізніше на -1
    

x та у це кінцеві координати.
$row_users['x'] та $row_users['у'] це координати де розміщений обєкт.
а тут я обчислюю гіпотенузу:

    var vidstan = Math.sqrt(left_pers*left_pers + top_pers*top_pers); // вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат

де тут обчислення довжини відрізку від початку координат та персонажем?

27

Re: плавне переміщення зображення в точку натиску миші

quez, ви далі впевнені що я  знаходжу відстань  між персонажем та початком координат.

28

Re: плавне переміщення зображення в точку натиску миші

Ні, звісно, я пропустив момент обчислення катетів. Ви частково в цьому теж винний, тому що назвали ці змінні top_pers та left_pers :)

Єдине, що мені тут не подобається, це змінна min_top. Зараз вечір п'ятниці і я не сильно впевнений у тому, що пишу, але якщо ви віднімаєте її, то зменшуєте проекцію відстані на Y і як наслідок, обчислюєте відстань неправильно.

Подякували: Faraon1

29 Востаннє редагувалося Faraon (10.01.2015 00:36:25)

Re: плавне переміщення зображення в точку натиску миші

quez написав:

Ні, звісно, я пропустив момент обчислення катетів. Ви частково в цьому теж винний, тому що назвали ці змінні top_pers та left_pers :)

Єдине, що мені тут не подобається, це змінна min_top. Зараз вечір п'ятниці і я не сильно впевнений у тому, що пишу, але якщо ви віднімаєте її, то зменшуєте проекцію відстані на Y і як наслідок, обчислюєте відстань неправильно.

Так, я згідний з вами що в цьому є і моя вина. Просто на самому початку ці змінні мали інше призначення, а потім я почав їх використовувати в інших цілях через що і заплутав Вас.
Назву змінних виправив. Змінну min_top я виключив з урахування, але всеодно швидкість різна.

  
var img = document.getElementById('pers_xy');  //отримуєм дані про картинку яка знаходиться під id pers_xy щоб ми змогли нею керувати

document.getElementById("mapa").onclick = function(event) {
    setPosition(img, event.clientX, event.clientY);
}

 function setPosition(obj, x, y) {    
    //вираховуєм точні координати точок куди має переміститися персонаж + віднімаємо висоту та ширину обєкта так щоб курсор знаходився знизу
    var left_x = x - 13;
    var top_y = y - 42;
    //-----------------
    
    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 + vidstan_y*vidstan_y); // вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат
     var speed = vidstan * 10;  // вичисляємо швидкість переміщення
     
        $( "#pers_xy" ).stop(); // припиняє  запущену анімацію
        
        //відтворюємо анімацію
        $( "#pers_xy" ).animate({
            left: left_x+'px',
            top: top_y+'px'
        }, speed);

    //отправка гет запита без перезагрузки сторінки
       $.ajax({
                type: "GET",
                url: "game.php",
                data: "x="+left_x+"&y="+top_y,
                // Выводим то что вернул PHP
                success: function(html) {
 //предварительно очищаем нужный элемент страницы
                        $("#result").empty();
//и выводим ответ php скрипта
                        $("#result").append(html);
                }
        });

   

  } 
  

30

Re: плавне переміщення зображення в точку натиску миші

Ну тоді не знаю. Знайдіть надійну залежність зміни швидкості від чогось, тоді буде видно, куди копати.

31 Востаннє редагувалося Faraon (10.01.2015 13:47:15)

Re: плавне переміщення зображення в точку натиску миші

замітити якусь залежність я не можу, але є наступне припущення в чому проблема... (хоча не впевнений)
При завантажені сторінки відсилається запит до бази про надання даних гравця (в тому числі і про його розміщення x та у). Ну а коли ми кликаємо в любій точці на екрані то дані які отримали з бази при завантажені сторінки (координати х та у) ми використовуємо щоб знайти відстань.

    var vidstan_x = x - <?php echo $row_users['x']; ?> ;//знаходимо відстань між початковою точкою по х та кінцевою точкою по х. Якщо число буде відємним то ми перемножим пізніше на -1
    var vidstan_y = y - <?php echo $row_users['y']; ?>; //знаходимо відстань між початковою точкою по у та кінцевою точкою по у + віднімаємо висоту верхнього блоку. Якщо число буде відємним то ми перемножим пізніше на -1
    var vidstan = Math.sqrt(vidstan_x*vidstan_x) + Math.sqrt(vidstan_y*vidstan_y); // вичисляю відстань від початку розміщення обєкта до кінцевої його точки координат

після чого відбувається рух обєкту в ту точку і ми оновлюємо ці координати в базі, але оновлення сторінки не відбувається в результаті чого зміні які містять місце розміщення обєкту також не оновлюються і ми кожний раз підставляємо одні і ті самі координати розміщення які отримали в самому початку при завантажені сторінки в код для знаходження відстані.

Подякували: quez1

32

Re: плавне переміщення зображення в точку натиску миші

Так, це в цьому проблема!

33 Востаннє редагувалося Faraon (10.01.2015 15:48:40)

Re: плавне переміщення зображення в точку натиску миші

Я думав що ось це може спрацювати:
Спочатку створив блок в якому є код пхп який отримує значення координат з бази

<div id=update_us>
<?php
    $query = mysql_query("select * from users where login='$login'")or die("stop: ".mysql_error);
    $row_users = mysql_fetch_array($query);
    $user_reg = $row_users['city'];
?>
</div>

Після чого за за межами блоку (після) вивів значення змінної про розміщення гравця по х

 <?php echo $row_users['x'];?>

а потім на js зробив автоматичне обновлення блоку без перезагрузки всієї сторінки кожні 5сек.

        setInterval(function(){ 
        $("#update_us").load("game.php #update_us");
        }, 5000);

але чомусь значення змінної яку я вивів на екран залишається сталим. Чому?

34

Re: плавне переміщення зображення в точку натиску миші

все зрозумів! Це ж обновляє тільки div блок update_us, а блок в якому міститься

 <?php echo $row_users['x'];?>

залишається не обновленим, тому і значення залишається старим.

35

Re: плавне переміщення зображення в точку натиску миші

Здається швидкість більш стабільна, але всеодно інколи швидкість стає надзвичайно великою! Хоча здається все правильно і швидкість мала б бути одинаковою

36

Re: плавне переміщення зображення в точку натиску миші

А нащо взагалі тримати координати в базі?

Подякували: Faraon1

37 Востаннє редагувалося Faraon (12.01.2015 17:48:38)

Re: плавне переміщення зображення в точку натиску миші

quez написав:

А нащо взагалі тримати координати в базі?

Для того щоб зберегти де саме персонаж гравця був останій раз. Просто це буде якось тупо гравцю кожний раз стартувати з координат 0:0. А що? У Вас є інша ідея?

38 Востаннє редагувалося Faraon (12.01.2015 04:50:59)

Re: плавне переміщення зображення в точку натиску миші

І ще таке питання..  щоб скоротити код я змушений записувати в базу зразу координати обэкта  разом з тим у чому вони вимірюються (рх, %,) через це вичислити відстань між точками стає не можливо. Чи можна якось по іншому задати сталу швидкість в

                $( "#pers_xy" ).animate({
                left: ruch_left,
                top: ruch_top,
                }, speed);

?

39

Re: плавне переміщення зображення в точку натиску миші

Доречі, я виявив ще одну помилку в коді через що швидкість не була стала. Моє наступне питання також повязане з виправленням цієї помилки. Чому так відбувається?:

<?php
if(isset($_GET['id_clic']))
{
    $get_id_clic = $_GET['id_clic'];
    $query = mysql_query("UPDATE users SET `house`='$get_id_clic' WHERE login='$login' ")  or die("Савсэм плохо: " . mysql_error());
}
?>


<div id=update_us>
<?php
    $query = mysql_query("select * from users where login='$login'")or die("stop: ".mysql_error);
    $row_users = mysql_fetch_array($query);
    $user_reg = $row_users['city'];
    $id_clic = $row_users['house'];
    
    $click_img = mysql_query("select * from city where id='$id_clic'")or die("stop: ".mysql_error);
    $row_click_img = mysql_fetch_array($click_img);
    $click_img_x = $row_click_img['x'];
    $click_img_y = $row_click_img['y'];
?>
</div>



<div id=top_right>
 <?php echo $row_click_img['x']?> // при кожному клику по силці через що і відбувається обновлення блоку на екран виводиться нове значення змінної, так і має бути
<?php echo $row_click_img['у']?>
</div>


<script type="text/javascript">
function loc(id){
// відправляємо гет запит
    $.ajax({
        type: "GET",
        url: "game.php",
        data: "id_clic="+id,
    });
        
//оновлюємо два блоки для того щоб отримати нові значення змінних з бази
    $("#update_us").load("game.php #update_us"); 
    $("#top_right").load("game.php #top_right");    
 }


function setPosition(obj, x, y) {    
...
//ці змінні цілий час мають одне і теж саме значення яке отримали при загрузці сторінки, але $row_click_img['x'] та $row_click_img['у'] уже мають інше значення і це значення виводить на екран
        ruch_left = (<?php echo $row_click_img['x']?>+<?php echo $row_click_img['width']/3; ?>)+'%';
        ruch_top = (<?php echo $row_click_img['y']?>+<?php echo $row_click_img['height']-5; ?>)+'%';
...
}
</script>

<a href='#' onclick=loc($id_dom);return false> => </a> //На екрані є кілька таких силок в яких значення 
//змінної id_dom є різні. При клику на них ці значення записуються в базу. після чого обновляється блок в 
//якому ми получаємо нові значення зміних. Потім ці змінні ми виводимо на екран для того щоб впевнитися що
// при клиці ми зразу ж отримали нові значення змінних. І все правильно виводить, але в тому куску коду який заключається в <script type='text/javascript'> </script> значення змінних по невідомих для мене причинах чомусь не хочуть мінятися!

40 Востаннє редагувалося Sensetivity (12.01.2015 09:16:29)

Re: плавне переміщення зображення в точку натиску миші

Faraon написав:

Доречі, я виявив ще одну помилку в коді через що швидкість не була стала. Моє наступне питання також повязане з виправленням цієї помилки. Чому так відбувається?:

<?php
if(isset($_GET['id_clic']))
{
    $get_id_clic = $_GET['id_clic'];
    $query = mysql_query("UPDATE users SET `house`='$get_id_clic' WHERE login='$login' ")  or die("Савсэм плохо: " . mysql_error());
}
?>


<div id=update_us>
<?php
    $query = mysql_query("select * from users where login='$login'")or die("stop: ".mysql_error);
    $row_users = mysql_fetch_array($query);
    $user_reg = $row_users['city'];
    $id_clic = $row_users['house'];
    
    $click_img = mysql_query("select * from city where id='$id_clic'")or die("stop: ".mysql_error);
    $row_click_img = mysql_fetch_array($click_img);
    $click_img_x = $row_click_img['x'];
    $click_img_y = $row_click_img['y'];
?>
</div>



<div id=top_right>
 <?php echo $row_click_img['x']?> // при кожному клику по силці через що і відбувається обновлення блоку на екран виводиться нове значення змінної, так і має бути
<?php echo $row_click_img['у']?>
</div>


<script type="text/javascript">
function loc(id){
// відправляємо гет запит
    $.ajax({
        type: "GET",
        url: "game.php",
        data: "id_clic="+id,
    });
        
//оновлюємо два блоки для того щоб отримати нові значення змінних з бази
    $("#update_us").load("game.php #update_us"); 
    $("#top_right").load("game.php #top_right");    
 }


function setPosition(obj, x, y) {    
...
//ці змінні цілий час мають одне і теж саме значення яке отримали при загрузці сторінки, але $row_click_img['x'] та $row_click_img['у'] уже мають інше значення і це значення виводить на екран
        ruch_left = (<?php echo $row_click_img['x']?>+<?php echo $row_click_img['width']/3; ?>)+'%';
        ruch_top = (<?php echo $row_click_img['y']?>+<?php echo $row_click_img['height']-5; ?>)+'%';
...
}
</script>

<a href='#' onclick=loc($id_dom);return false> => </a> //На екрані є кілька таких силок в яких значення 
//змінної id_dom є різні. При клику на них ці значення записуються в базу. після чого обновляється блок в 
//якому ми получаємо нові значення зміних. Потім ці змінні ми виводимо на екран для того щоб впевнитися що
// при клиці ми зразу ж отримали нові значення змінних. І все правильно виводить, але в тому куску коду який заключається в <script type='text/javascript'> </script> значення змінних по невідомих для мене причинах чомусь не хочуть мінятися!
  1. В коментарях ви описуєте змінну як id_dom, а в самому JS ви назвали її $id_dom , зі знаком долара, що не властиво для JS.

  2. Щодо коду в блоці <div id=update_us> Чому б не витягнути інформацію одним запитом, замість 2-х ?

Подякували: Faraon1