Красный квадратик должен проехать по заданной траектории и вернуться в исходную точку.

@Andreus1986 · Регистрация: 18.08.2017

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

Здравствуйте! Два часа сижу, ломаю голову, но никак не получается решить эту задачу. Задача в том, чтобы красный квадратик проехал по заданной траектории и вернулся в исходную точку. HTML/CSS прилагается + фото задачи. Просьба, напишите, пожалуйста, на чистом js

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
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>MySite1</title> 
 </head> 
 <body> 
 <style> 
 #container { 
width: 200px; 
height: 200px; 
background: green; 
position: relative; 
} 
#box { 
width: 50px; 
height: 50px; 
background: red; 
position: absolute; 
} 
 </style> 
<div id = "container"> 
<div id = "box"></div> 
</div> 
 
 <script type = "text/javascript"> 
var coord = 0; 
var box = document.getElementById("box"); 
var t = setInterval(MoveR,30); 
function MoveR(){ 
if(coord==150){ 
clearInterval(t); 
coord = 0;
var t1 = setInterval(MoveD,30)
} 
else{ 
coord+=1; 
box.style.left = coord + "px"; 
}
} 
function MoveD(){
if(coord==150){
    clearInterval(t1);
    coord = 0;
    var t2 = setInterval(MoveL,30)
} else{
    coord+=1;
    box.style.top = coord+"px";
    }
    
}
</script> 
 </body> 
</html>

@MrOnlineCoder · 24.09.2017, 21:06

Andreus1986,

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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>MySite1</title>
</head>
 
<body>
    <style>
    #container {
        width: 200px;
        height: 200px;
        background: green;
        position: relative;
    }
 
    #box {
        width: 50px;
        height: 50px;
        background: red;
        position: absolute;
    }
    </style>
    <div id="container">
        <div id="box"></div>
    </div>
    <script type="text/javascript">
 
    //Координата квадрата
    var coord = 0;
 
    //Элемент из DOM
    var box = document.getElementById("box");
 
    //ИД таймера
    var t = setInterval(move, 30);
 
    //Номер анимации
    //0 - вправо, 1 - вниз, 2 и 3 - вверх и вправо
    //4 - стоп анимации
    var state = 0;
 
    function move() {
        if (state == 0) {
            coord += 1;
            box.style.left = coord + "px";
        }
 
        if (state == 1) {
            coord += 1;
            box.style.top = coord + "px";
        }
 
        if (state == 2) {
            coord -= 1;
            box.style.top = coord + "px";
        }
 
        if (state == 3) {
            coord -= 1;
            box.style.left = coord + "px";
        }
 
        if (state == 4) clearInterval(t);
 
        if (coord == 150 || coord == 0) {
            state++;
            coord = (state >= 2) ? coord = 150 : coord = 0;
        }
    }
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

Опции темы