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

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

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

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

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="100px;" width="100px;">
        <img  id="s"  src="p.bmp"  style="position: absolute;" height="100px;" width="100px;">
        <img  id="t"  src="t.bmp" style="position: absolute; height:100px; width: 100px;">
        <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.sin(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>

@WhiteMind · 23.04.2016, 10:10

приведите код на https://jsfiddle.net/
картинки сделайте в base64 например

@Max007 · 23.04.2016, 10:30 **[ТС]**

а можно поподробней пожалуйста?

Добавлено через 15 минут
https://jsfiddle.net/55eoy92m/4/ залил на jsfiddle но оно не работает вообще(((

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	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. Задача: при создании документов установить период списания автоматически. . .

@WhiteMind Hello Kitty 690 / 562 / 402 Регистрация: 12.02.2016 Сообщений: 1,436 Записей в блоге: 1
	23.04.2016, 10:10
	приведите код на https://jsfiddle.net/ картинки сделайте в base64 например 0

@Max007 0 / 0 / 0 Регистрация: 17.03.2015 Сообщений: 37
	23.04.2016, 10:30 [ТС]
	а можно поподробней пожалуйста? Добавлено через 15 минут https://jsfiddle.net/55eoy92m/4/ залил на jsfiddle но оно не работает вообще((( 0