Обычная заставка Windows

@dwarfess · Регистрация: 15.10.2016

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

Хочу сделать обычную заставку Windows, где объект бегает по углам экрана. Делаю все через создание нового объекта с его методами. Все хорошо, до 3-й смены направления изображения. Начинаются какие то глюки. Проверяю вручную через кнопку, нормально меняется положение объекта. Только запускаю полный цикл, глюки. Функция запуска 45 строка и еще одна 85 строка.
В общем I need help, не пойму где ошибка...

HTML5
1
2
3
4
<img src = "1.jpg" style = "position:absolute">
        
        <input type = "button" class = "b1" onclick = "tl()">
        <input type = "button" class = "b2" onclick = "bl()">

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
<script>
        function Tramp(a,b,c,n,w,h,f){
          this.posX = a;//Расположение бродяги координата Х
          this.posY = b;//Расположение бродяги координата Н
          this.col = c;//Цвет
          this.name = n;//Имя
          this.width = w;//Ширина
          this.height = h;//Высота
          this.face = f;//изображение
          this.show = function(x,y){
            //отображаем бродягу в точке с координатами х, y на экране
            this.face.style.width = w;
            this.face.style.height = h;
            this.face.style.top = x;
            this.face.style.left = y;
          }
        }
        
        //выбираем наш объект(картинку) в HTML
        var tr = document.images[0];
        
        //создаем объект по конструктору
        var tramp1 = new Tramp('0','0','black','Donald','100px','100px',tr);
        tramp1.show('220px','220px');
        
        
        //добавляем в конструктор метод перемещения изображения вниз и вправо
        Tramp.prototype.botR = function(step){
                            var a = parseInt(this.face.style.left);
                            var b = parseInt(this.face.style.top);
                              this.face.style.left = a + step + 'px';
                              this.face.style.top = b + step + 'px';
                            
                            }
        
        //добавляем в конструктор метод перемещения изображения вверх и вправо
        Tramp.prototype.topR = function(step){
                            var a = parseInt(this.face.style.left);
                            var b = parseInt(this.face.style.top);
                              this.face.style.left = a + step + 'px';
                              this.face.style.top = b - step + 'px';
                            
                            }
                            
        //добавляем в конструктор метод перемещения изображения вверх и влево                    
        Tramp.prototype.topL = function(step){
                            var a = parseInt(this.face.style.left);
                            var b = parseInt(this.face.style.top);
                              this.face.style.left = a - step + 'px';
                              this.face.style.top = b - step + 'px';
                            
                            }
                            
        //добавляем в конструктор метод перемещения изображения вниз и влево
        Tramp.prototype.botL = function(step){
                            var a = parseInt(this.face.style.left);
                            var b = parseInt(this.face.style.top);
                              this.face.style.left = a - step + 'px';
                              this.face.style.top = b + step + 'px';
                            
                            }
        
        //добавляем в конструктор метод перемещения изображения по экрану
        Tramp.prototype.animate = function(){
                                    var t = this;
                                    var interval = setInterval(move1,3);
                                    
                                    //перемещения изображения вниз и вправо                                    
                                    function move1(){ 
                                      var a = parseInt(t.face.style.left);
                                      var b = parseInt(t.face.style.top);
                                      if(a > 500)move2();
                                        else t.botR(1);
                                    }                                   
                                    
                                    //перемещения изображения вверх и вправо
                                    function move2(){
                                      var a = parseInt(t.face.style.left);
                                      var b = parseInt(t.face.style.top);
                                      if(a > 800)move3();
                                        else t.topR(1);
                                    }
                                     
                                    //перемещения изображения вверх и влево
                                    function move3(){
                                      var a = parseInt(t.face.style.left);
                                      var b = parseInt(t.face.style.top);
                                      if(b < 30)move4();
                                        else t.topL(10);
                                    }
                                    
                                    //перемещения изображения вниз и влево
                                    function move4(){
                                      var a = parseInt(t.face.style.left);
                                      var b = parseInt(t.face.style.top);
                                      if(a < 10)clearInterval(interval);
                                        else t.botL(10);
                                    }
                                  }                   
        
        
        
        //функции для управления объектом через кнопки
        function tl(){
          tramp1.animate();  
        }
        
        function bl(){
          tramp1.topL(12);//проверяет работу методов в нашем объекте       
        }
        
</script>

Добавлено через 2 часа 42 минуты
Или я плохо объяснил проблему, или даже не знаю... возможно всем показалось это бредом, ни одного совета)
Может быть кто то может скинуть хотя бы гайд по изменению позиции в объекте и как это влияет на отображение на экране...

Добавлено через 45 минут
Уже даже писать стыдно... причину обнаружил сам. Срабатывает каждый if, происходит зависание, функция хочет выполнить и одно условие и другое. Вопрос - как можно поставить такое условие "если блок коснулся края браузера (лево\право\верх\низ), то переключается на другую функцию"?

@8Observer8 · 30.12.2016, 19:40

Я немного изменил ваш код, теперь рисунок двигается по экрану и отскакивает от стенок:

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <img src="1.jpg" style="position:absolute">
 
    <input type="button" value="button 1" class="b1" onclick="tl()">
    <input type="button" value="button 2" class="b2" onclick="bl()">
 
    <script>
        var dx = 2; // Шаг перемещения по X
        var dy = 2; // Шаг перемещения по Y
 
        function Tramp(posX, posY, color, name, w, h, image)
        {
            this.posX = posX;  // Расположение бродяги координата Х
            this.posY = posY;  // Расположение бродяги координата Н
            this.col = color;  // Цвет
            this.name = name;  // Имя
            this.width = w;    // Ширина
            this.height = h;   // Высота
            this.face = image; // Изображение
 
            this.show = function (x, y)
            {
                //отображаем бродягу в точке с координатами х, y на экране
                this.face.style.width = w;
                this.face.style.height = h;
                this.face.style.left = x + "px";
                this.face.style.top = y + "px";
                this.posX = x;
                this.posY = y;
            }
        }
 
        function show()
        {
            var x = parseInt(tramp1.posX);
            var y = parseInt(tramp1.posY);
            var width = parseInt(tramp1.width);
            var height = parseInt(tramp1.height);
 
            if (x + dx > window.innerWidth - width || x + dx < 0)
            {
                dx = -dx;
            }
 
            if (y + dy > window.innerHeight - height || y + dy < 0)
            {
                dy = -dy;
            }
 
            console.log(`(${x}, ${y})`);
            console.log("window.innerWidth = " + window.innerWidth);
 
            x += dx;
            y += dy;
            tramp1.show(x, y);
        }
        setInterval(show, 10);
 
        //выбираем наш объект(картинку) в HTML
        var tr = document.images[0];
 
        //создаем объект по конструктору
        var tramp1 = new Tramp('0', '0', 'black', 'Donald', '200px', '200px', tr);
        tramp1.show('220', '220');
    </script>
</body>
</html>

@dwarfess · 01.01.2017, 17:51 **[ТС]**

Это очень круто, спасибо. Не могу придумать "стену" сам...

@8Observer8 · 01.01.2017, 20:45

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

Не могу придумать "стену" сам...

Не могли придумать отскакивание от стен? Или сейчас что-то не можете придумать? Поясните.

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@dwarfess 1 / 1 / 1 Регистрация: 15.10.2016 Сообщений: 46
	01.01.2017, 17:51 [ТС]
	Это очень круто, спасибо. Не могу придумать "стену" сам... 0

Обычная заставка Windows

Решение