1 Тема від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Тема: Як визначити кординати миші? (JavaScript)

Привіт, я почав вивчати  JavaScript! Поставив перед собою мету переробити переміщення персонажа в своїй ігрі.
Ось силка по якій я вивчаю JavaScript.
http://learn.javascript.ru/
В своїй ігрі я хочу зробити щось таке:
http://dtf.ru/articles/image.php?id=525 … l_id=65279
Покіщо успіхів немає.  Тому вирішив трішки Вас помучити!
Щоб створити такий вид переміщення спочатку потрібно визначити кординати миші.
Знайшов статтю на цю  тему:
http://learn.javascript.ru/mouse-clicks
В цій статті в самому низі приведено приклад коду для визначення місця розташування миші:

document.onmousemove = function(e) {
  e = e || window.event;
  fixPageXY(e);

  document.getElementById('mouseX').value = e.pageX;
  document.getElementById('mouseY').value = e.pageY;
}

Тільки там немає коду полів в яких будуть відображатися координати x та y.
Допоможіть будь-ласка мені з цим)

2 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Як визначити кординати миші? (JavaScript)

чувак, можна простіше. Відкриваєш консольку браузера, вставляєш туди код:

document.onmousemove = function(e) { console.log(e.pageX, e.pageY); }

рухаєш мишкою і бачиш як в консольку друкуються координати. І це ввесь код що потребен.

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

bunyk вебсайт

3 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

bunyk написав:

чувак, можна простіше. Відкриваєш консольку браузера, вставляєш туди код:

document.onmousemove = function(e) { console.log(e.pageX, e.pageY); }

рухаєш мишкою і бачиш як в консольку друкуються координати. І це ввесь код що потребен.

але ж мені  потрібно зберегти кординати коли на мишу гравець натисне, це теж робиться через консоль??? Не думаю що так!

4 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Як визначити кординати миші? (JavaScript)

Куди зберегти? Якщо треба координати при натисненні, то:

document.onmousedown = function(e) { console.log(e.clientX, e.clientY) }

bunyk вебсайт

5 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

Я намагаюся зробити переміщення картинки pers.png туди де було нажато мишкою!
Для того щоб таке реалізувати потрібно спочатку вичислити кординати де було нажато ну і напевне потрібно їх зберегти, чи ні?

6 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Як визначити кординати миші? (JavaScript)

То не роздруковуй координати, а присвоюй їх атрибутам CSS top та left.

Наприклад так:

document.onmousedown = function(e) { 
    var $img = $('#faraon');
    $img.css({
        left: e.clientX,
        top: e.clientY,
    });
};

bunyk вебсайт

7 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

м... так ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="margin: 0pt; padding: 0pt; height: 100%;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><<<Игровой мир>>></title>
<script type="text/javascript">
document.onmousedown = function(e) { 
    var $img = $('#faraon');
    var w = $img[0].naturalWidth;
    var h = $img[0].naturalHeight;
    $img.css({
        left: e.clientX - w / 2,
        top: e.clientY - h / 2,
        display: 'block'
    });
};


document.onmousedown = function(e) { 
    var $img = $('#faraon');
    $img.css({
        left: e.clientX,
        top: e.clientY,
    });
};

</script>
</head>
<body>


<img id="faraon" src="http://replace.org.ua/img/avatars/1733.jpg" style="display: none; position: fixed;" />

</body>
</html>
</html>

8 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Як визначити кординати миші? (JavaScript)

Майже так. В тебе чомусь onmousedown описана двічі, двічі закритий тег html. Але найбільша проблема - якщо бачиш в коді долари - бракує jQuery, його треба привантажити в код до доларів:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>
        document.onmousedown = function(e) {
            var $img = $('#faraon');
            $img.css({
                left: e.clientX,
                top: e.clientY,
                display: 'block'
            });
        };
    </script>
</head>
<body>
    <img id="faraon" src="http://replace.org.ua/img/avatars/1733.jpg" style="display: none; position: fixed;" />
</body>
</html>
Подякували: Faraon1

bunyk вебсайт

9 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

bunyk написав:

Майже так. В тебе чомусь onmousedown описана двічі, двічі закритий тег html. Але найбільша проблема - якщо бачиш в коді долари - бракує jQuery, його треба привантажити в код до доларів:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>
        document.onmousedown = function(e) {
            var $img = $('#faraon');
            $img.css({
                left: e.clientX,
                top: e.clientY,
                display: 'block'
            });
        };
    </script>
</head>
<body>
    <img id="faraon" src="http://replace.org.ua/img/avatars/1733.jpg" style="display: none; position: fixed;" />
</body>
</html>

Велике вам спасибі!

10 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

А зробити так щоб картинка не телепортувалася до місця де було нажато а посупово рухалася то це вже можна зробити через css якщо я не помиляюся...

11 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Як визначити кординати миші? (JavaScript)

у jquery є така фішка як animate
http://api.jquery.com/animate/

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

funivan вебсайт

12 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

funivan написав:

у jquery є така фішка як animate
http://api.jquery.com/animate/

Дякую! Я ось дивлюся, на вас дорогі форумчани і дивуюся, знань у вас хоч греблю гати а використовувати ви не хочете! Чому? Я маю наувазі чому ви не хочете створити спільний проект, я впевнений, вам це б вдалося!

13 Відповідь від bunyk

  • bunyk
  • Replace Team
  • Поза форумом
  • Звідки: Франик
  • Дата реєстрації: 24.07.2012
  • Повідомлень: 959
    • Репутація: 751

Re: Як визначити кординати миші? (JavaScript)

Faraon написав:

Я маю наувазі чому ви не хочете створити спільний проект, я впевнений, вам це б вдалося!

Ну інтереси у всіх різні. От funivan створив ukrcms, хтось з форумчан допомагав, а я ні бо не знаю PHP.

Подякували: Chemist-i, Cyan3

bunyk вебсайт

14 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Як визначити кординати миші? (JavaScript)

Дякую! Я ось дивлюся, на вас дорогі форумчани і дивуюся, знань у вас хоч греблю гати а використовувати ви не хочете! Чому? Я маю наувазі чому ви не хочете створити спільний проект, я впевнений, вам це б вдалося!

Якщо цікаво створіть тему відпишемо )) це тема про координати миші ))) ;)

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

funivan вебсайт

15 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як визначити кординати миші? (JavaScript)

▼Прихований текст

Я ось дивлюся, на вас дорогі форумчани і дивуюся, знань у вас хоч греблю гати а використовувати ви не хочете!

На роботі за гроші використовуються. В інший час чимось іншим люди зайняті, тож…

16 Відповідь від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Re: Як визначити кординати миші? (JavaScript)

funivan написав:

Дякую! Я ось дивлюся, на вас дорогі форумчани і дивуюся, знань у вас хоч греблю гати а використовувати ви не хочете! Чому? Я маю наувазі чому ви не хочете створити спільний проект, я впевнений, вам це б вдалося!

Якщо цікаво створіть тему відпишемо )) це тема про координати миші ))) ;)

Створив =>
http://replace.org.ua/post/18737/#p18737