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

@Unick · Регистрация: 03.05.2009

Студворк — интернет-сервис помощи студентам

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

Кликните здесь для просмотра всего текста

У меня в голове одна идея.
Допустим у нас объект находится по координатам 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
Как жу трудно сформулировать мысли, когда сутки не спал...
Но все же, есть ли проще способ? А то может я щас велосипед изобретаю... Сильно много вычислений получается для перемещения.

@Padimanskas · 04.11.2013, 07:37

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

расстояние можно посчитать по теореме Пифагора.

@Unick · 04.11.2013, 22:19 **[ТС]**

Padimanskas, я немного не уверен, но ведь многое при работе с векторами решается через треугольники?) опять возвращаемся к длинному решению.

Сообщение от Padimanskas

За тем, производим нормализацию и произведение вектора на скаляр - это скорость расстояние можно посчитать по теореме Пифагора.

не совсем понял. Зачем это?)
Щас со свежей головой напишу что хотел

даже нарисую

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

Вот, с левой стороны то, что мне надо (это новые коориданты x, y, где мне известны координаты мышки, объекта и радиус круга = 5)
С правой стороны, это вспоминание геометрии из школы

Как бы я искал.
О еще вопрос встречный, на js как мне tg(угла) превратить в cos и sin(угла)...

@Padimanskas · 05.11.2013, 03:11

$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>

@Unick · 08.11.2013, 07:14 **[ТС]**

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/

@Padimanskas · 27.11.2013, 07:58

Я оптимизировал код и добавил комментарии. Теперь у этого "жука" уменьшаются и увеличиваются глаза при приближении к курсору

Работает во всех браузерах +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>

@Unick · 27.11.2013, 16:48 **[ТС]**

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>

@Unick · 28.11.2013, 16:54 **[ТС]**

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. Хотя все зависит от понимания, вектора для меня сложнее как-то переварить) нормализации какие-то)
Может кому-то будет проще через вектора. Но геометрия есть геометрия, логика осталась прежней.

@Padimanskas · 28.11.2013, 20:53

Unick, с векторами можно проделать больше операций, но это уже относиться к game dev

@zver0555 · 30.07.2014, 23:04

А можно ли сделать так что бы оно не бегало за мышкой ?
хотелось бы сделать так что бы у дракона бегали глаза в сторону где стрелка от мыши, на два отдельно глаза
ссылка

Добавлено через 5 минут
как это примерно сделано тут ссылка

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Unick не Администратор ^_^ 988 / 223 / 23 Регистрация: 03.05.2009 Сообщений: 1,493 Записей в блоге: 1

	Движение объекта за мышкой с заданной скоростью 04.11.2013, 07:04. Показов 14646. Ответов 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

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	04.11.2013, 07:37
	Создаем два вектора - один для указателя мыши, а другой для объекта документа. Далее вычитаем вектор объекта из вектора мыши и считаем тангенс угла из результата вычитания(это направление). За тем, производим нормализацию и произведение вектора на скаляр - это скорость расстояние можно посчитать по теореме Пифагора. 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	28.11.2013, 20:53
	Unick, с векторами можно проделать больше операций, но это уже относиться к game dev 0

@zver0555 5 / 5 / 0 Регистрация: 03.08.2010 Сообщений: 246
	30.07.2014, 23:04
	А можно ли сделать так что бы оно не бегало за мышкой ? хотелось бы сделать так что бы у дракона бегали глаза в сторону где стрелка от мыши, на два отдельно глаза ссылка Добавлено через 5 минут как это примерно сделано тут ссылка 0