Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.72/43: Рейтинг темы: голосов - 43, средняя оценка - 4.72
не Администратор ^_^
988 / 222 / 23
Регистрация: 03.05.2009
Сообщений: 1,494
Записей в блоге: 1
1

Движение объекта за мышкой с заданной скоростью

04.11.2013, 07:04. Просмотров 8960. Ответов 9
Метки нет (Все метки)

Привет.
Собственно вопрос, как сделать движение объекта за мышкой с заданной скоростью, да так, чтобы браузер не убить.

Кликните здесь для просмотра всего текста
У меня в голове одна идея.
Допустим у нас объект находится по координатам x:120 y:200
мышка по координатам x:50 y:50
Представим что это прямоугольный треугольник с катетами:
k1=120-50
k2=200-50
тогда гипотенуза - это путь, который должен пройти объект.
Угол между катетом и гипотенузой (та точка, где наш объект находится)
tg(a)=k1/k2
Дальше, имея угол между гипотенузой и катетом, мы представим что гипотенуза = 5 (это скорость, иными словами расстояние, где должен находится объект)
Получается мы имеет длину гипотенузы и прилежащий угол... Осталось найти новые катеты (они то и дадут нам новые координаты объекта)
смещение по х=cos(A)*5
смещение по y=sin(A)*5
Как жу трудно сформулировать мысли, когда сутки не спал...
Но все же, есть ли проще способ? А то может я щас велосипед изобретаю... Сильно много вычислений получается для перемещения.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.11.2013, 07:04
Ответы с готовыми решениями:

Движение объекта мышкой
Здравствуйте ув.Форумчане Только начинаю изучать винформ, и возник вопрос: Есть какая-то область,...

Как ускорить движение объекта мышкой?
http://beta.maquetter.com/client зажимаю мышку на картинке - двигаю картинку влево-вправо - она...

Как сделать движение объекта за мышкой?
Короче я сделал так, чтобы при нажатии булевая переменная isPushed делалась истинной, а при...

Движение шарика вдоль заданной линии с регулируемой скоростью
помогите построить графиг плиз))программа движения шарика вдоль заданной линии с регулируемой...

9
Superposition
946 / 611 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
04.11.2013, 07:37 2
Создаем два вектора - один для указателя мыши, а другой для объекта документа. Далее вычитаем вектор объекта из вектора мыши и считаем тангенс угла из результата вычитания(это направление). За тем, производим нормализацию и произведение вектора на скаляр - это скорость расстояние можно посчитать по теореме Пифагора.
0
не Администратор ^_^
988 / 222 / 23
Регистрация: 03.05.2009
Сообщений: 1,494
Записей в блоге: 1
04.11.2013, 22:19  [ТС] 3
Padimanskas, я немного не уверен, но ведь многое при работе с векторами решается через треугольники?) опять возвращаемся к длинному решению.
Цитата Сообщение от Padimanskas Посмотреть сообщение
За тем, производим нормализацию и произведение вектора на скаляр - это скорость расстояние можно посчитать по теореме Пифагора.
не совсем понял. Зачем это?)
Щас со свежей головой напишу что хотел
даже нарисую
Движение объекта за мышкой с заданной скоростью

Вот, с левой стороны то, что мне надо (это новые коориданты x, y, где мне известны координаты мышки, объекта и радиус круга = 5)
С правой стороны, это вспоминание геометрии из школы Как бы я искал.
О еще вопрос встречный, на js как мне tg(угла) превратить в cos и sin(угла)...
0
Superposition
946 / 611 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
05.11.2013, 03:11 4
https://www.cyberforum.ru/cgi-bin/latex.cgi?\cos = \sqrt{1 + \left( 1 \div {\tan}^{2}\\right)}
https://www.cyberforum.ru/cgi-bin/latex.cgi?\sin = \sqrt{1 - {\cos}^{2} }

Добавлено через 4 часа 30 минут
Код немного не оптимизирован, по тому что писал довольно быстро, но разобраться можно. Как я уже говорил все делается с помощью векторов.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML>
<html lang="ru">
 
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #rect {
            border:1px solid black;
            background-color:#C1C1C1;
            width:30px;
            height:30px;
            position:absolute;
            left:600px;
            top:500px;
        }
    </style>
</head>
 
<body>
    <div id="rect"></div>
    <script>
        
        jQuery.fn.rotate = function(radian) {
            $(this).css({
                '-webkit-transform': 'rotate(' + radian + 'rad)',
                '-moz-transform': 'rotate(' + radian + 'rad)',
                '-ms-transform': 'rotate(' + radian + 'rad)',
                'transform': 'rotate(' + radian + 'rad)'
            });
        };
(function(){
        var vector2d = function(x, y) {
            var vec = {
                vx: x,
                vy: y,
                scale: function(scale) {
                    vec.vx *= scale;
                    vec.vy *= scale;
                },
                normalize: function() {
                    var len = Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy);
                    if (len) {
                        vec.vx /= len;
                        vec.vy /= len;
                    }
                    return len;
                }
            };
            return vec;
        };
 
        function fixEvent(e) {
            e = e || window.event
            if (e.pageX == null && e.clientX != null) {
                var html = document.documentElement
                var body = document.body
                e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
                e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
            }
            if (!e.which && e.button) {
                e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0))
            }
            return e
        }
 
        var vMouse;
        var vRect = vector2d(0, 0);
        var rect = $('#rect');
        var angle;
        var mx;
        var my;
 
        document.onmousemove = mouseMove;
 
        function mouseMove(event) {
            event = fixEvent(event);
            mx = event.pageX;
            my = event.pageY;
        }
 
        setInterval(function() {
            vRect.vx = parseFloat(rect.css('left'));
            vRect.vy = parseFloat(rect.css('top'));
            vMouse = vector2d(mx - vRect.vx, my - vRect.vy);
            vMouse.normalize();
            vMouse.scale(5);
            angle = Math.atan2(my - vRect.vy, mx - vRect.vx);
            rect.rotate(angle);
            rect.css('left', parseFloat(rect.css('left')) + vMouse.vx + 'px');
            rect.css('top', parseFloat(rect.css('top')) + vMouse.vy + 'px');
        }, 50);
})();
    </script>
</body>
 
</html>
2
не Администратор ^_^
988 / 222 / 23
Регистрация: 03.05.2009
Сообщений: 1,494
Записей в блоге: 1
08.11.2013, 07:14  [ТС] 5
Padimanskas, вообще волшебно
я только решил вне функций записать
Javascript
1
2
3
4
5
6
7
8
9
10
11
var speed=25;
        
var a=x-objx
var b=y-objy;
var len = Math.sqrt(a * a + b * b);
if (len) {
  a = a / len * speed;
  b = b / len * speed;
}
objx+=a;
objy+=b;
вообще я по другому формулу увидел
по теореме Пифагора посчитали гипотенузу.
А потом отношение сторон посчитать
гениально просто
Кликните здесь для просмотра всего текста
ну допустим гипотенуза равна 15, а наша новая равна 5, то отношение 15 к 5 = 3
Если мы гипотенузу разделим на 3, то получим новую гипотенузу
и так же катеты, если мы разделим их на 3, получим новые катеты

А вот еще полезная ссылка, для тех кто на эту тему накинется из интернета: http://habrahabr.ru/post/131931/
0
Superposition
946 / 611 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
27.11.2013, 07:58 6
Я оптимизировал код и добавил комментарии. Теперь у этого "жука" уменьшаются и увеличиваются глаза при приближении к курсору Работает во всех браузерах +IE8.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bug</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #rect {
            border:1px solid black;
            background-color:#C1C1C1;
            width:30px;
            height:30px;
            position:absolute;
            left:600px;
            top:300px;
        }
        #right {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            background-color:white;
        }
        #left {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            bottom:0;
            background-color:white;
        }
    </style>
</head>
 
<body>
    <div id="rect">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
        (function ($) {
 
            // Найти верхнюю левую точку блока и его центр
            var rectCenter = function () {
                var result = {},
                rWidth = parseFloat(rect.css('width'), 10),
                rHeight = parseFloat(rect.css('height'), 10);
                result.left = parseFloat(rect.css('left'), 10);
                result.top = parseFloat(rect.css('top'), 10);
                result.x = result.left + (rWidth / 2);
                result.y = result.top + (rHeight / 2);
                return result;
            };
 
            var rect = $('#rect'),
            rectEyes = $('#left, #right'),
            vRect = new Vector2d(0, 0), // Вектор блока
            vMouse = new Vector2d(mx - vRect.vx, my - vRect.vy), // Вектор курсора мыши
            angle, // Угол поворота блока
            mx, // Текущая координата мыши по оси x
            my, // Текущая координата мыши по оси y
            rc, // Объект с координатами верхнего левого угла и центра блока
            distance; // Расстояние от блока до курсора
 
 
            // Кроссбраузерное вращение элемента
            $.fn.rotate = function (radian) {
                // Метод поворота блока для IE8
                ieRotate = function (angle, elem) {
                    var c = Math.cos(angle),
                    s = Math.sin(angle);
                    elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + c + ",M12=" + (-s) + ",M21=" + s + ",M22=" + c + ",SizingMethod='auto expand')";
                }
                
                $(this).css({
                    '-webkit-transform' : 'rotate(' + radian + 'rad)',
                    '-moz-transform' : 'rotate(' + radian + 'rad)',
                    '-ms-transform' : 'rotate(' + radian + 'rad)',
                    'transform' : 'rotate(' + radian + 'rad)'
                });
                ieRotate(radian, $(this)[0]);
            };
 
            // Конструктор вектора
            function Vector2d(x, y) {
                this.vx = x;
                this.vy = y;
                this.sVx = 0;
                this.sVy = 0;
            }
 
            // Метод умножения вектора на скаляр
            Vector2d.prototype.scale = function (scale) {
                this.vx *= scale;
                this.vy *= scale;
            }
 
            // Метод нормализации вектора
            Vector2d.prototype.normalize = function () {
                var len = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                if (len) {
                    this.vx /= len;
                    this.vy /= len;
                }
                return len;
            }
 
            // Найти координаты курсора
            $(document).mousemove(function (e) {
                mx = e.pageX;
                my = e.pageY;
            });
 
            // Главный цикл
            setInterval(function () {
                rc = rectCenter();
                vRect.vx = rc.x;
                vRect.vy = rc.y;
                vMouse.vx = mx - vRect.vx;
                vMouse.vy = my - vRect.vy;
                distance = Math.sqrt(vMouse.vx * vMouse.vx + vMouse.vy * vMouse.vy);
                vMouse.normalize();
                vMouse.scale(5);
                angle = Math.atan2(my - vRect.vy, mx - vRect.vx);
                rect.rotate(angle);
                rect.css('left', rc.left + vMouse.vx + 'px');
                rect.css('top', rc.top + vMouse.vy + 'px');
                if(distance < 150 && distance > 50){
                    rectEyes.css('width', distance / 10+ 'px');
                    rectEyes.css('height', distance / 10+ 'px');
                }
            }, 50);
 
        })(jQuery);
    </script>
</body>
 </html>
0
не Администратор ^_^
988 / 222 / 23
Регистрация: 03.05.2009
Сообщений: 1,494
Записей в блоге: 1
27.11.2013, 16:48  [ТС] 7
Padimanskas, ну раз на то пошло, добавлю от себя
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bug</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        html {
        cursor:default;
        }
        #rect {
            border:1px solid black;
            background-color:#C1C1C1;
            width:30px;
            height:30px;
            position:absolute;
            left:600px;
            top:300px;
        }
        #right {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            background-color:white;
        }
        #left {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            bottom:0;
            background-color:white;
        }
    </style>
</head>
 
<body>
    <div id="rect">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
        (function ($) {
 
            // Найти верхнюю левую точку блока и его центр
            var rectCenter = function () {
                var result = {},
                rWidth = parseFloat(rect.css('width'), 10),
                rHeight = parseFloat(rect.css('height'), 10);
                result.left = parseFloat(rect.css('left'), 10);
                result.top = parseFloat(rect.css('top'), 10);
                result.x = result.left + (rWidth / 2);
                result.y = result.top + (rHeight / 2);
                return result;
            };
 
            var rect = $('#rect'),
            rectEyes = $('#left, #right'),
            vRect = new Vector2d(0, 0), // Вектор блока
            vMouse = new Vector2d(mx - vRect.vx, my - vRect.vy), // Вектор курсора мыши
            angle, // Угол поворота блока
            mx, // Текущая координата мыши по оси x
            my, // Текущая координата мыши по оси y
            rc, // Объект с координатами верхнего левого угла и центра блока
            distance; // Расстояние от блока до курсора
 
 
            // Кроссбраузерное вращение элемента
            $.fn.rotate = function (radian) {
                // Метод поворота блока для IE8
                ieRotate = function (angle, elem) {
                    var c = Math.cos(angle),
                    s = Math.sin(angle);
                    elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + c + ",M12=" + (-s) + ",M21=" + s + ",M22=" + c + ",SizingMethod='auto expand')";
                }
                
                $(this).css({
                    '-webkit-transform' : 'rotate(' + radian + 'rad)',
                    '-moz-transform' : 'rotate(' + radian + 'rad)',
                    '-ms-transform' : 'rotate(' + radian + 'rad)',
                    'transform' : 'rotate(' + radian + 'rad)'
                });
                ieRotate(radian, $(this)[0]);
            };
 
            // Конструктор вектора
            function Vector2d(x, y) {
                this.vx = x;
                this.vy = y;
                this.sVx = 0;
                this.sVy = 0;
            }
 
            // Метод умножения вектора на скаляр
            Vector2d.prototype.scale = function (scale) {
                this.vx *= scale;
                this.vy *= scale;
            }
 
            // Метод нормализации вектора
            Vector2d.prototype.normalize = function () {
                var len = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                if (len) {
                    this.vx /= len;
                    this.vy /= len;
                }
                return len;
            }
 
            // Найти координаты курсора
            $(document).mousemove(function (e) {
                mx = e.pageX;
                my = e.pageY;
            });
 
            // Главный цикл
            setInterval(function () {
                rc = rectCenter();
                vRect.vx = rc.x;
                vRect.vy = rc.y;
                vMouse.vx = mx - vRect.vx;
                vMouse.vy = my - vRect.vy;
                distance = Math.sqrt(vMouse.vx * vMouse.vx + vMouse.vy * vMouse.vy);
                vMouse.normalize();
                if(distance < 200){
                    vMouse.scale(distance/2); // наскок
                    rectEyes.css('background','red');
                    rect.css('border','1px solid #000');
                    rect.css('background','#C1C1C1');
                    rectEyes.css('border','1px solid #000');
                }
                else {
                    vMouse.scale(5); // простое передвижение + инвиз
                    rect.css('border','1px solid #eee');
                    rectEyes.css('border','1px solid #eee');
                    rect.css('background','#fefefe');
                    rectEyes.css('background','#fefefe');
                    $('html').css('cursor','default')
                }
                if(distance < 50){
                    $('html').css('cursor','help'); // кушаем курсор
                }
                angle = Math.atan2(my - vRect.vy, mx - vRect.vx);
                rect.rotate(angle);
                rect.css('left', rc.left + vMouse.vx + 'px');
                rect.css('top', rc.top + vMouse.vy + 'px');
                if(distance < 150 && distance > 50){
                    rectEyes.css('width', distance / 10+ 'px');
                    rectEyes.css('height', distance / 10+ 'px');
                }
            }, 25);
 
        })(jQuery);
    </script>
</body>
 </html>
0
не Администратор ^_^
988 / 222 / 23
Регистрация: 03.05.2009
Сообщений: 1,494
Записей в блоге: 1
28.11.2013, 16:54  [ТС] 8
Padimanskas, твой скрипт занял ~100 строчек кода (ты делал через вектора)
Твоя версия:
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bug</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #rect {
            border:1px solid black;
            background-color:#C1C1C1;
            width:30px;
            height:30px;
            position:absolute;
            left:600px;
            top:300px;
        }
        #right {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            background-color:white;
        }
        #left {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            bottom:0;
            background-color:white;
        }
    </style>
</head>
 
<body>
    <div id="rect">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
        (function ($) {
 
            // Найти верхнюю левую точку блока и его центр
            var rectCenter = function () {
                var result = {},
                rWidth = parseFloat(rect.css('width'), 10),
                rHeight = parseFloat(rect.css('height'), 10);
                result.left = parseFloat(rect.css('left'), 10);
                result.top = parseFloat(rect.css('top'), 10);
                result.x = result.left + (rWidth / 2);
                result.y = result.top + (rHeight / 2);
                return result;
            };
 
            var rect = $('#rect'),
            rectEyes = $('#left, #right'),
            vRect = new Vector2d(0, 0), // Вектор блока
            vMouse = new Vector2d(mx - vRect.vx, my - vRect.vy), // Вектор курсора мыши
            angle, // Угол поворота блока
            mx, // Текущая координата мыши по оси x
            my, // Текущая координата мыши по оси y
            rc, // Объект с координатами верхнего левого угла и центра блока
            distance; // Расстояние от блока до курсора
 
 
            // Кроссбраузерное вращение элемента
            $.fn.rotate = function (radian) {
                // Метод поворота блока для IE8
                ieRotate = function (angle, elem) {
                    var c = Math.cos(angle),
                    s = Math.sin(angle);
                    elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + c + ",M12=" + (-s) + ",M21=" + s + ",M22=" + c + ",SizingMethod='auto expand')";
                }
                
                $(this).css({
                    '-webkit-transform' : 'rotate(' + radian + 'rad)',
                    '-moz-transform' : 'rotate(' + radian + 'rad)',
                    '-ms-transform' : 'rotate(' + radian + 'rad)',
                    'transform' : 'rotate(' + radian + 'rad)'
                });
                ieRotate(radian, $(this)[0]);
            };
 
            // Конструктор вектора
            function Vector2d(x, y) {
                this.vx = x;
                this.vy = y;
                this.sVx = 0;
                this.sVy = 0;
            }
 
            // Метод умножения вектора на скаляр
            Vector2d.prototype.scale = function (scale) {
                this.vx *= scale;
                this.vy *= scale;
            }
 
            // Метод нормализации вектора
            Vector2d.prototype.normalize = function () {
                var len = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                if (len) {
                    this.vx /= len;
                    this.vy /= len;
                }
                return len;
            }
 
            // Найти координаты курсора
            $(document).mousemove(function (e) {
                mx = e.pageX;
                my = e.pageY;
            });
 
            // Главный цикл
            setInterval(function () {
                rc = rectCenter();
                vRect.vx = rc.x;
                vRect.vy = rc.y;
                vMouse.vx = mx - vRect.vx;
                vMouse.vy = my - vRect.vy;
                distance = Math.sqrt(vMouse.vx * vMouse.vx + vMouse.vy * vMouse.vy);
                vMouse.normalize();
                vMouse.scale(5);
                angle = Math.atan2(my - vRect.vy, mx - vRect.vx);
                rect.rotate(angle);
                rect.css('left', rc.left + vMouse.vx + 'px');
                rect.css('top', rc.top + vMouse.vy + 'px');
                if(distance < 150 && distance > 50){
                    rectEyes.css('width', distance / 10+ 'px');
                    rectEyes.css('height', distance / 10+ 'px');
                }
            }, 50);
 
        })(jQuery);
    </script>
</body>
 </html>

Я использовал свой вариант перемещения, через отношение треугольников, и подвел твою работу под свою формулу:
Javascript
1
2
3
4
5
6
7
8
9
10
11
var speed=25;
        
var a=x-objx
var b=y-objy;
var len = Math.sqrt(a * a + b * b);
if (len) {
  a = a / len * speed;
  b = b / len * speed;
}
objx+=a;
objy+=b;
Вот результат:
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bug</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #rect {
            border:1px solid black;
            background-color:#C1C1C1;
            width:30px;
            height:30px;
            position:absolute;
            left:600px;
            top:300px;
        }
        #right {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            background-color:white;
        }
        #left {
            display: block;
            position:absolute;
            border: 1px solid black;
            width: 5px;
            height: 10px;
            right:0;
            bottom:0;
            background-color:white;
        }
    </style>
</head>
 
<body>
    <div id="rect">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
        (function ($) {
            var rect = $('#rect'); // объект
            var rectEyes = $('#left, #right'); // глаза объекта
            var mx,my; // координаты мышки
            var speed=5; // Скорость передвижения в пикселях
            var ObjWidth = parseInt(rect.css('width'), 10); // ширина объекта
            var ObjHeight = parseInt(rect.css('height'), 10); // высота объекта
         
            // Магическое кроссбраузерное вращение элемента
            $.fn.rotate = function (radian) {
                // Метод поворота блока для IE8
                ieRotate = function (angle, elem) {
                    var c = Math.cos(angle),
                    s = Math.sin(angle);
                    elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + c + ",M12=" + (-s) + ",M21=" + s + ",M22=" + c + ",SizingMethod='auto expand')";
                }
                $(this).css({
                    '-webkit-transform' : 'rotate(' + radian + 'rad)',
                    '-moz-transform' : 'rotate(' + radian + 'rad)',
                    '-ms-transform' : 'rotate(' + radian + 'rad)',
                    'transform' : 'rotate(' + radian + 'rad)'
                });
                ieRotate(radian, $(this)[0]);
            };
 
            // Координаты курсора
            $(document).mousemove(function (e) {
                mx = e.pageX;
                my = e.pageY;
            });
 
            // Главный цикл
            setInterval(function () { 
               // расстояние объекта от левого и верхнего краев
               var ObjTop = parseInt(rect.css('top'), 10);
               var ObjLeft = parseInt(rect.css('left'), 10);
               // Представим что две точки (мышка и объект) образуют прямоугольник, и найдем его стороны
               var a = my - (ObjTop + ObjHeight/2); // сторона а
               var b = mx - (ObjLeft + ObjWidth/2); // сторона b
               var len = Math.sqrt(a * a + b * b); // расстояние от объекта до мышки (гипотенуза)
               if (len) {
               // Найдем стороны маленького прямоугольника (между объектом и будущим его местоположением)
                    a = a / len * speed; 
                    b = b / len * speed;
                }
                // к текущим координатам объекта прибавим стороны маленького прямоугольника
                ObjTop+=a;
                ObjLeft+=b;
                rect.css('left', ObjLeft  + 'px');
                rect.css('top', ObjTop + 'px');
                // посчитаем и зададим угол поворота.
                var angle = Math.atan2(a, b);
                rect.rotate(angle);
                if(len < 150 && len > 50){
                    rectEyes.css('width', len / 10+ 'px');
                    rectEyes.css('height', len / 10+ 'px');
                }
            }, 30);
        })(jQuery);
    </script>
</body>
 </html>


Моя версия ~60 строчек JS кода Результат тот же.

P.s. Хотя все зависит от понимания, вектора для меня сложнее как-то переварить) нормализации какие-то)
Может кому-то будет проще через вектора. Но геометрия есть геометрия, логика осталась прежней.
1
Superposition
946 / 611 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
28.11.2013, 20:53 9
Unick, с векторами можно проделать больше операций, но это уже относиться к game dev
0
5 / 5 / 0
Регистрация: 03.08.2010
Сообщений: 246
30.07.2014, 23:04 10
А можно ли сделать так что бы оно не бегало за мышкой ?
хотелось бы сделать так что бы у дракона бегали глаза в сторону где стрелка от мыши, на два отдельно глаза
ссылка

Добавлено через 5 минут
как это примерно сделано тут ссылка
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.07.2014, 23:04

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Движение шарика вдоль заданной линии с регулируемой скоростью
Требуется написать программу движения шарика вдоль заданной линии с регулируемой скоростью. Задано...

Движение объекта по заданной траектории
помогите, как сделать чтоб прямоугольник двигался по прямоугольной траектории? Добавлено через...

Движение объекта по заданной траектории
всем привет... написал класс который рисует круг и двигается с лева на право.. но мне надо чтобы он...

Движение объекта по заданной траектории
Здравствуйте, мне (совсем новичку) была поставлена задача реализовать движение прямоугольника по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.