движение объекта

@salwator · Регистрация: 11.06.2011

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

Всем привет.
Скажу сразу в javascript я ещё понимая очень мало.
Столкнулся с такой проблемой. Не знаю как реализовать движение объекта.
Есть код лабиринта. Объектом я управляю с помощью клавиатуры. Как сделать так , чтобы объект двигался сам вокруг квадрата???

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
<html>
<body >
<center>
 
<SCRIPT LANGUAGE="JavaScript">
 
function moveIt() {
  if (!progress) return
  switch (event.keyCode) {
case 37: //влево
  if (labirint[start.rows][1][start.cols-1]==0) {
 
start.cols--
if(document.all.board.rows[start.rows].cells[start.cols].innerText=="")
{zch=true
document.all.board.rows[start.rows].cells[start.cols].innerText=""
}
 
document.all.board.rows[start.rows].cells[start.cols+1].style.backgroundColor=""
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="red"
 
if((start.cols>8)&&(start.rows>9))message.innerText=""
  } 
 
  break;
case 38: // вверх
  if (labirint[start.rows][0][start.cols]==0) {
 
start.rows--
if(document.all.board.rows[start.rows].cells[start.cols].innerText=="")
{zch=true
document.all.board.rows[start.rows].cells[start.cols].innerText=""
}
document.all.board.rows[start.rows+1].cells[start.cols].style.backgroundColor=""
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="red"
 
if((start.cols>8)&&(start.rows>9))message.innerText=""
  }
 
  break;
case 39: // вправо
  
  if (labirint[start.rows][1][start.cols]==0) {
 
start.cols++
if(document.all.board.rows[start.rows].cells[start.cols].innerText=="")
{zch=true
document.all.board.rows[start.rows].cells[start.cols].innerText=""
}
document.all.board.rows[start.rows].cells[start.cols-1].style.backgroundColor=""
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="red"
 
if((start.cols>8)&&(start.rows>9))message.innerText=""
  }
 
  break;
case 40: //вниз
  if (labirint[start.rows+1]==null) return
  if (labirint[start.rows+1][0][start.cols]==0) {
 
start.rows++
if(document.all.board.rows[start.rows].cells[start.cols].innerText=="")
{zch=true
document.all.board.rows[start.rows].cells[start.cols].innerText=""
}
document.all.board.rows[start.rows-1].cells[start.cols].style.backgroundColor=""
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="red"
 
if((start.cols>8)&&(start.rows>9))message.innerText=""
  }
  
  break;
  }
 if (document.all.board.rows[start.rows].cells[start.cols].innerText=="препод") {
if(zch){message.innerText="Зачет!"
    progress=false}
  }
 
 if (document.all.board.rows[start.rows].cells[start.cols].innerText=="вход") 
message.innerText=""
}
</SCRIPT>
 
<div align="center"><strong>Используйте  стрелки на клавиатуре, чтобы двигаться.</strong></div><br>
<p><TABLE id="board" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffcc">
  <SCRIPT LANGUAGE="JavaScript">
for (var row = 0; row<labirint.length; row++) {
  document.write("<TR>") 
 
  for (var col = 0; col<labirint[row][0].length; col++) {
document.write("<TD STYLE='")
for (var cell = 0; cell<2; cell++) {
  if (labirint[row][cell][col]==1) 
document.write(sides[cell]+": 2px black solid;")
}
if ((0==col) && (0!=row))
 document.write("border-left: 2px black solid;")
if (row==labirint.length-1)
 document.write("border-bottom: 2px black solid;")
if ((0==row) && (0==col)) 
  document.write(" background-color:red;' class=text>вход</TD>")
else if((col==11)&&(row==1))document.write(" ' ")
else
 if ((row==labirint.length-1) && (col==labirint[row][0].length-1))
   document.write("' class=text>препод</TD>")
 else
  document.write("'> </TD>")
  }
  document.write("</TR>")
}
 
var start = new Object
start.rows = 0
start.cols = 0
progress=true
zch=false
document.onkeydown = moveIt;
  </SCRIPT>
  </TABLE>
  <p id="message"> </p></p>
 
</body>
</html>

Добавлено через 2 минуты
Это квадрат вокруг которого должен двигаться объект

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
var labirint = new Array()
var sides = new Array("Border-Top", "Border-Right")
for (var rows=0; rows<13; rows++)
labirint[rows] = new Array()
labirint[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)
labirint[0][1] = new Array(0,0,0,0,0,0,0,0,0,0,0,1)
labirint[1][0] = new Array(0,1,1,1,1,1,1,1,1,1,1,0)
labirint[1][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[2][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[2][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[3][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[3][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[4][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[4][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[5][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[5][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[6][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[6][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[7][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[7][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[8][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[8][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[9][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[9][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[10][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[10][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[11][0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0)
labirint[11][1] = new Array(1,0,0,0,0,0,0,0,0,0,1,1)
labirint[12][0] = new Array(0,1,1,1,1,1,1,1,1,1,1,0)
labirint[12][1] = new Array(0,0,0,0,0,0,0,0,0,0,0,1)

Нашёл код движения объекта и не получается его применить

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var curx=0; //текущее положение слоя
var deltax=1; //шаг движения слоя (может быть и отрицательным!!!)
var areawidth=100; //размер области, по которой движется слой
 
function movelayer(){  //функция перемещения слоя
  curx+=deltax;        //обновляем текущее положение слоя
  document.all["admin"].style.left=curx; //перемещаем слой в новое положение
  //нужно проверить не достигли ли мы точки поворота, если да, то
  //изменяем направление движения
  if(curx>areawidth | curx<0){deltax=-deltax;}
  //и рекурсивно вызываем эту же функцию movelayer. Таким образом у нас получился цыкл!
  setTimeout('movelayer()',10);
}
 
movelayer();

@JsLoveR · 23.04.2013, 03:37

salwator, удалите всё и начните заново.

Добавлено через 2 часа 12 минут

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    .hero   {
        background-color:#0099FF;
        border-top:2px solid #0033FF;
        border-left:2px solid #0033FF;
    }
    
    .way    {
        background-color:#FFFFFF
    }
    
    table{
        border:2px dotted #999999;
        padding:5px;
    }
    
    td{
        width:30px;
        height:30px;
        padding:3px;
    }

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
    var map = new Array(
        new Array(2,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0),
        new Array(0,0,0,0,0,0,0,0,0,0,0)
        
    );
    
    var table = null;
    var newX = 0, newY = 0;
    
    var hero = {
        h : 0, //направление по-горизонтали
        v : 0, //направление по-вертикали
        x : 0,
        y : 0
    };
    
    function getByid(id) {
        return document.getElementById(id);
    }
    
    function getKeyCode(evt) {
        //определяем нажатую клавишу
        var code = (evt.which) ? evt.which : event.keyCode;
            
        switch(code) {
            //стрелка вверх
            case 38:
                hero.v = -1; //направление по-вертикали вверх.
                hero.h = 0;  //
                break;
                //стрелка вниз
            case 40:
                hero.v = 1; //направление по-вертикали вниз.
                hero.h = 0; //
                break;
            //стрелка влево
            case 37:
                hero.v = 0; //
                hero.h = -1; //направление по-горизонтали влево.
                break;
            //стрелка вправо
            case 39: 
                hero.v = 0; //
                hero.h = 1; //направление пр-горизонтали вправо.
                break;
        }
        //направление определили, вызываем фун-ю движения.
        move();
    }
    
    function move() {
        //находим новую позицию героя в связи с найденным направлением.
        newX = hero.x + hero.h;
        newY = hero.y + hero.v;
        //если в новой позиции пусто
        if(map[newY][newX] == 0) {
            //то смело шагаем и старую позицию очищаем от героя
            table.rows[hero.y].cells[hero.x].className = "way";
            //отрисовываем героя на новом шаге.
            table.rows[newY].cells[newX].className = "hero";
            //сохраняем координаты новой позиции 
            hero.x = newX;
            hero.y = newY;
        }
    }
    //отрисовываем мапу
    function drawMap() {
        
        var html = "<table cellspacing='0'>";
        
        for(var i = 0; i < map.length; i++) {
            html += "<tr>";
            for(var j = 0; j < map[0].length; j++)  {
        
                switch (map[i][j]) {
                
                    case 2 : html += '<td class="hero"></td>';
                             break;
                    default:
                            html+='<td class="way"></td>';
                            break;
                }   
            }
            html += "</tr>";
        }
        
        html += "</table>";
        getByid('map').innerHTML = html;
    }
    
    function init() {
    
        newX = 0, newY = 0;
        
        hero = {
            h : 0,
            v : 0,
            x : 0,
            y : 0
        };
        drawMap();
        table = document.getElementsByTagName("table")[0];
    }
    
    window.onload = function() {
        init();
    }

HTML5
1
2
3
4
<body onkeyup="getKeyCode(event)">
<div id="map">
</div>
</body>

Посмотреть тут http://learn.javascript.ru/play/0ASVRb. Остальное, надеюсь, сами допишите.

@salwator · 26.04.2013, 17:35 **[ТС]**

как сделать так чтобы квадрат двигался сам от угла до угла по кругу?

@kalabuni · 26.04.2013, 18:21

в JS-коде выше

1) строку #96 перепишите так: html += "</table>"; map [0] [0] = 0;
2) строку #115 перепишите так: init(); myIndex = 0; myMove ();
3) после строки #116 добавьте ещё одну функцию:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function myMove ()
{
var R = table.rows.length;
var C = table.rows [0].cells.length;
if (myIndex < C - 1)                                     hero.v = 0, hero.h = 1;
else if (myIndex > C - 2 && myIndex < R + C - 2)         hero.v = 1, hero.h = 0;
else if (myIndex > R + C - 3 && myIndex < 2 * R + C - 2) hero.v = 0, hero.h = -1;
else                                                     hero.v = -1, hero.h = 0;
myIndex++; if (myIndex == 2 * (R + C) - 4) myIndex = 0;
move();
setTimeout (myMove, 500);
}

@salwator · 27.04.2013, 01:19 **[ТС]**

спасибо

Добавлено через 5 часов 25 минут
не могу понять как именно работает функция drawMap

@kalabuni · 27.04.2013, 03:37

а чего там понимать-то?

создаётся HTML-код таблицы от начального <table> до конечного </table>, который записывается в переменную html
количество строк/столбцов берётся из массива labirint
все ячейки, где элемент массива labirint имеет значение 0, получают класс way, и только одна (левая верхняя) ячейка (где значение массива == 2) получает класс hero

затем получившийся HTML-код прописывается внутрь имеющегося на странице <div>'а

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка 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 существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@salwator 0 / 0 / 0 Регистрация: 11.06.2011 Сообщений: 18
	26.04.2013, 17:35 [ТС]
	как сделать так чтобы квадрат двигался сам от угла до угла по кругу? 0

@salwator 0 / 0 / 0 Регистрация: 11.06.2011 Сообщений: 18
	27.04.2013, 01:19 [ТС]
	спасибо Добавлено через 5 часов 25 минут не могу понять как именно работает функция drawMap 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.04.2013, 03:37
	а чего там понимать-то? создаётся HTML-код таблицы от начального <table> до конечного </table>, который записывается в переменную html количество строк/столбцов берётся из массива labirint все ячейки, где элемент массива labirint имеет значение 0, получают класс way, и только одна (левая верхняя) ячейка (где значение массива == 2) получает класс hero затем получившийся HTML-код прописывается внутрь имеющегося на странице <div>'а 0