Движение точки по прямой из пункта A в пункт Б
Итак, продолжим изучение движения на яваскрипте. Сегодня я хочу показать простой пример организации движения объекта по прямой. Для реализации движения мы применим тот же способ, что и в предидущем примере про движение точки по окружности, только с разницой в формуле. И опять нам прийдется вспомнить школьный курс математики 
, а именно теорему подобия. Вы все конечно её помните 
.
Начальной точкой будут текущие координаты точки, конечные мы будем указывать в ручную.
Параметры:
x – конечные координаты точки по оси х
y – конечные координаты точки по оси у
d – шаг в пикселях
obid – id объекта
timeout – временной интервал
Ну а теперь реализация:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// задаём начальные данные как всегда инит функцией
function init_move_line(x,y,d,obid,timeout) { var obj=document.getElementById(obid); // перемещаем нашу начальную точку в ноль dx = (x-obj.offsetLeft); dy = (y-obj.offsetTop); // определяем расстояние которое нам необходимо будет пройти var line=Math.sqrt(dx*dx+dy*dy); // рассчитываем дискретность движения dx=d*dx/line; dy=d*dy/line; dc=line; // запускаем рекурсивное изменение координат точки moveL(obj.offsetLeft,obj.offsetTop,x,y,dx,dy,dc,obid,timeout); } |
А теперь реализация основного движения
|
1
2 3 4 5 6 7 8 9 10 |
function moveL(x0,y0,x,y,dx,dy,dc,obid,timeout){
obj=document.getElementById(obid); x0 += dx; y0 += dy; // уменьнаем длину расстояния, которое надо пройти dc-=Math.sqrt(dx*dx+dy*dy); obj.style.left=parseInt(x0)+"px"; obj.style.top=parseInt(y0)+"px"; if(dc>0) setTimeout("moveL("+x0+","+y0+","+x+","+y+","+dx+","+dy+","+dc+",'"+obid+"',"+timeout+")" , timeout); } |
Вот код примера:
|
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 |
<html>
<head> <script type="text/javascript"> var x,y,obj,corner,dc; function init_move_line(x,y,d,obid,timeout) { var obj=document.getElementById(obid); dx = (x-obj.offsetLeft); dy = (y-obj.offsetTop); var line=Math.sqrt(dx*dx+dy*dy); dx=d*dx/line; dy=d*dy/line; dc=line; moveL(obj.offsetLeft,obj.offsetTop,x,y,dx,dy,dc,obid,timeout); } function moveL(x0,y0,x,y,dx,dy,dc,obid,timeout){ /* x - конечные координаты точки по оси х y - конечные координаты точки по оси у d - шаг в пикселях obid - id объекта timeout - временной интервал */ obj=document.getElementById(obid); x0 += dx; y0 += dy; dc-=Math.sqrt(dx*dx+dy*dy); obj.style.left=parseInt(x0)+"px"; obj.style.top=parseInt(y0)+"px"; if(dc>0) setTimeout("moveL("+x0+","+y0+","+x+","+y+","+dx+","+dy+","+dc+",'"+obid+"',"+timeout+")" , timeout); } </script> </head> <body> <input type="button" onclick="init_move_line(500,300,2,'move',20)" /> <div id="move" style="position:absolute;height:3px;width:3px;background-color:#000000;left:200px;top:300px"></div> </body> </html> |
Рекомендуем почитать
