Движение картинки по траектории JS

@Max007 · Регистрация: 17.03.2015

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

Есть треугольник который расположен в нижнем правом углу, есть шарик который начинает движение от треугольника до середины верхней границы окна, и за тем двигается в левый нижний угол. А как зделать ето зеркально? (что б треугольник был в нижнем левом углу и шарик двигался в правый нижний угол) помогите пожалуйста(((((

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
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title></title>
</head>
 
<body id="body" style="background: grey">
 
        <img  id="k"  src="circle.png"  style="position: absolute;" height="100" width="100">
 
        <img  id="t"  src="t.bmp" style="position: absolute;">
        <script type="text/javascript">
                var p = -(3*Math.PI) / 4;
                var r = 0;
                var W=document.getElementById('body').clientWidth;
                var H=document.getElementById('body').clientHeight;
              var l=document.getElementById('k').offsetLeft;
         var w=document.getElementById('k').offsetWidth;
 
         var t=document.getElementById('k').offsetTop;
         var h=document.getElementById('k').offsetHeight;
 
 
 
 
       var tw=document.getElementById('t').offsetWidth;
       var th=document.getElementById('t').offsetHeight;
       var tl=document.getElementById('t').offsetLeft;
       var tt=document.getElementById('t').offsetTop;
 
 
       document.getElementById('t').style.left=(W-tw) + 'px';
       document.getElementById('t').style.top=(H-th) + 'px';
       
       var tl=document.getElementById('t').offsetLeft;
       var tt=document.getElementById('t').offsetTop;
 
       l=W-tw-w-20;
       t=H-th-h-20;
 
            function moveByLine() {
 
 
         var ln,tn,ln1,tn1;
                         ln=l+r*Math.cos(p);
                         tn=t+r*Math.sin(p);
 
 
                      if(tn<0 ){p=-p; l=W/2-30; r=1;}
                       if((tn+h)>=H ){p=0;  r=1;}
                      if((ln+w)>=tl ){clearInterval(moveInterval);}
 
                        l=l+r*Math.cos(p);
                        t=t+r*Math.sin(p);
 
                       document.getElementById('k').style.left=(l) + 'px';
 
                        document.getElementById('k').style.top=(t) + 'px';
                        r=r+0.005;
 
    }
 
 
 
           var moveInterval = setInterval(moveByLine, 4);
 
 
 
 
        </script>
</body>
 
 
</html>

@IamRain · 19.04.2016, 00:27

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
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
  <title></title>
</head> 
<body id="body" style="background: grey">
 
        <img  id="k"  src="circle.png"  style="position: absolute;" height="40px;" width="40px;">
 
        <img  id="t"  src="t.bmp" style="position: absolute; height:40px; width: 40px;">
        <script type="text/javascript">
                var p =  -Math.PI / 4;
                var r = 3;
 
                var W=document.getElementById('body').clientWidth;
                var H=document.getElementById('body').clientHeight;
                
         var circle = document.getElementById('k');
         var triangle = document.getElementById('t');   
          var l=circle.offsetLeft;
          var w= circle.offsetWidth;
 
         var t=circle.offsetTop;
         var h=circle.offsetHeight;
 
       var tw=triangle.offsetWidth;
       var th=triangle.offsetHeight;
       var tl=triangle.offsetLeft;
       var tt=triangle.offsetTop; 
 
       triangle.style.left= 0 + 'px';
       triangle.style.top=(H-th) + 'px';
       
       circle.style.top = (H - th) + 'px';
       circle.style.left = tw + 'px';
       
       var tl=triangle.offsetLeft;
       var tt=triangle.offsetTop;
 
       l = 0 + tw;
       t = H - th -h;
 
            function moveByLine() {
 
         var ln,tn,ln1,tn1;
                         ln=l+r*Math.cos(p);
                         tn=t+r*Math.sin(p);
  
                      if(tn<0){p= -p;}
                      if (tn + h > H - th) { p = Math.PI;} 
                               
                       if((ln + l) < tl + 10)
                        {  
                           circle.style.left = triangle.offsetWidth + 'px';
                           circle.style.top = H - th - circle.offsetHeight; 
                           clearInterval(moveInterval);
                           return;
                        }
 
                         l=l+r*Math.cos(p); 
                         t=t+r*Math.sin(p);
 
                       circle.style.left=(l) + 'px'; 
                       circle.style.top=(t) + 'px';           
 
    } 
           var moveInterval = setInterval(moveByLine, 4); 
 
        </script>
</body> 
</html>

@Max007 · 19.04.2016, 08:51 **[ТС]**

Спасибо большое))))

@Max007 · 20.04.2016, 10:34 **[ТС]**

Подскажите пожалуйста, как сделать чтоб шарик летел до центра екрана и отбиваясь от квадрата летел в правый нижний угол?

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
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
  <title></title>
</head> 
<body id="body" style="background: grey">
 
        <img  id="k"  src="circle.png"  style="position: absolute;" height="40px;" width="40px;">
        <img  id="s"  src="p.bmp"  style="position: absolute;" height="40px;" width="40px;">
        <img  id="t"  src="t.bmp" style="position: absolute; height:40px; width: 40px;">
        <script type="text/javascript">
                var p =  -Math.PI / 4;
                var r = 3;
 
                var W=document.getElementById('body').clientWidth;
                var H=document.getElementById('body').clientHeight;
                
         var circle = document.getElementById('k');
         var triangle = document.getElementById('t');   
          var squad = document.getElementById('s');
          var l=circle.offsetLeft;
          var w= circle.offsetWidth;
 
         var t=circle.offsetTop;
         var h=circle.offsetHeight;
 
       var tw=triangle.offsetWidth;
       var th=triangle.offsetHeight;
       var tl=triangle.offsetLeft;
       var tt=triangle.offsetTop; 
 
       triangle.style.left= 0 + 'px';
       triangle.style.top=(H-th) + 'px';
       
       circle.style.top = (H - th) + 'px';
       circle.style.left = tw + 'px';
             
 
        squad.style.top = H/2 + 'px';
       squad.style.left = W/2 + 'px';
       
       
       var tl=triangle.offsetLeft;
       var tt=triangle.offsetTop;
 
       l = 0 + tw;
       t = H - th -h;
 
            function moveByLine() {
 
         var ln,tn,ln1,tn1;
                         ln=l+r*Math.cos(p);
                         tn=t+r*Math.sin(p);
  
                      if(tn<0){p= -p;}
                      if (tn + h > H - th) { p = Math.PI;} 
                               
                       if((ln + l) < tl + 10)
                        {  
                           circle.style.left = triangle.offsetWidth + 'px';
                           circle.style.top = H - th - circle.offsetHeight; 
                           clearInterval(moveInterval);
                           return;
                        }
 
                         l=l+r*Math.cos(p); 
                         t=t+r*Math.sin(p);
 
                       circle.style.left=(l) + 'px'; 
                       circle.style.top=(t) + 'px';          
 
    } 
           var moveInterval = setInterval(moveByLine, 4); 
 
        </script>
</body> 
</html>

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@Max007 0 / 0 / 0 Регистрация: 17.03.2015 Сообщений: 37
	19.04.2016, 08:51 [ТС]
	Спасибо большое)))) 0

Движение картинки по траектории JS

Решение