JavaScript:движение объекта по траектории - Помощь студентам

Ayanami · 17.11.2014, 20:33

Доброго времени суток!Мне нужна ваша помощь.Имеется задание:нарисованный в paint квадрат должен перемещаться по ромбовидной траектории.Что то похожее у меня получилось,но нужно чтоб границы соприкосновения квадрата были размеры экрана,какэто реализовать не пойму.Заранее спасибо за помощь

Код HTML:

<html>
<head>
<title>Home</title>
<script language = "Javascript">
var action,coef_px=-1,coef_pt=1,p_move=5;
function startmove(){
dynamic.style.left=parseInt(document.body.offsetWidth)/3+200;
dynamic.style.top=0;
action=window.setInterval("move()",100);
}
function move(){
px=parseInt(dynamic.style.left);
px=px+coef_px*p_move;
dynamic.style.left=px;
if(px<=parseInt(document.body.offsetWidth)/2-200||
px>=parseInt(document.body.offsetWidth)/2+200){
coef_px=-coef_px
}
pt=parseInt(dynamic.style.top);
pt=pt+coef_pt*p_move;
dynamic.style.top=pt;
if(pt<=0||pt>=400){
coef_pt=-coef_pt;
}}
</script>
</head>
<body onLoad=startmove()>
<div id="dynamic"style="position:absolute;">
<img src="kvad.gif">
</div>
</body>
</html>

Smogg · 17.11.2014, 23:58

Тут конечно надо обрабатывать случай касания границы, чтоб смещался на правильное расстояние delta_moveX, delta_moveY, а не точно p_move, но меня задрало воевать со стилями)

Код:

<html>
<head>
<title>Home</title>

 <style>
      html, body {
		min-height:600px;       
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      body {
        overflow: auto; /* добавить полосу прокрутки */ 
      }
      main {
        min-height: 100%;
      }
	  div {height:600px;
	  }
    </style>

<script language = "Javascript">
var action, p_move=5;
var goDwn, goRgt;
var cntX, cntY, cntW, cntH;
var idTmr;

var kvdt;

var kvdtW2, kvdtH2;

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

function startmove(){
	cntW = document.getElementById("dynamic").clientWidth;
	cntH = document.getElementById("dynamic").clientHeight;	
	
	var f = getPos(document.getElementById("dynamic"));
	cntX = f.x;
	cntY = f.y;
	
	kvdt = document.getElementById("kvad");
	
	kvdtW2 = kvdt.offsetWidth /2 ;
	kvdtH2 = kvdt.offsetHeight /2;
	
	kvdt.style.left= cntX;
	kvdt.style.top= cntY + cntH/2 - kvdtH2/2;
	
	goDwn = true;
	goRgt = true;
	
	
//	cntH / (document.body.offsetWidth)/3+200;
//	dynamic.style.top=0;
	clearInterval(idTmr);
	idTmr =window.setInterval("move()", 100);
}
function move(){
	px=kvdt.offsetLeft + kvdtW2 - cntX;
	py=kvdt.offsetTop + kvdtH2 - cntY;

	if (goDwn && goRgt){
		px=px+p_move;		
		py=py+p_move;
		if ((py + kvdtH2) >= cntH)
		{
			py = cntH - kvdtH2;
			goDwn = false;
		}
	}
	if ((!goDwn) && goRgt){
		px=px+p_move;		
		py=py-p_move;
		if ((px + kvdtH2) >= cntW )
		{
			px = cntW - kvdtW2;
			goRgt = false;
		}
	}

	if ((!goDwn) && (!goRgt)){
		px=px-p_move;		
		py=py-p_move;
		if ((py - kvdtH2) <= 0 )
		{
			py = kvdtH2;
			goDwn = true;
		}
	}
	if ((goDwn) && (!goRgt)){
		px=px-p_move;		
		py=py+p_move;
		if ((px - kvdtW2) <= 0 )
		{
			px = kvdtH2;
			goRgt = true;
		}
	}
	px = cntX + px - kvdtW2;
	py = cntY + py - kvdtH2;	
	kvdt.style.left = px + 'px';
	kvdt.style.top = py + 'px';

	
	
/*	dynamic.style.left=px;
	if((px<=(parseInt(document.body.offsetWidth)/2-200))||
		(px>=(parseInt(document.body.offsetWidth)/2+200))){
		coef_px=-coef_px
	}
	pt=parseInt(dynamic.style.top);
	pt=pt+coef_pt*p_move;
	dynamic.style.top=pt;
	if(pt<=0||pt>=400){
	coef_pt=-coef_pt;
	}
	*/
}
</script>
</head>
<body >
<input type="button" onClick="startmove()" value="Стоп">
<div id="dynamic" style="background-color: #00F;">
<img id="kvad" src="kvad.gif" style="position:fixed;" >
</div>
</body>
</html>

Ayanami · 18.11.2014, 12:38

ага,за это конечно спасибо большое

,некоторые идеи появились,но все таки не совсем то(((ну может досоображаю

uberchel · 18.11.2014, 13:07

Натие, ромб есть, конечно для вашего случая лучше использовать canvas: )

Код HTML:

<html>
<head>
<title>Home</title>
</head>
<body onload="startmove()">
<div id="dynamic" style="position:absolute;">
<img src="1416272066_qbic.png">
</div>
<script>
var action,
    coef_px=-1,
    coef_pt=1,
    p_move=5;

function startmove(){
var dumanic =  document.getElementById('dumanic');
dynamic.style.left=parseInt(document.body.offsetWidth)/+2;
dynamic.style.top=0;
action=window.setInterval("move()", 1);
}


function move(){
var dumanic = document.getElementById('dumanic');
px=parseInt(dynamic.style.left);
px=px+coef_px*p_move;
dynamic.style.left=px;
if(px<=parseInt(document.body.offsetWidth)/2-200 ||px>=parseInt(document.body.offsetWidth)/2+200){
coef_px=-coef_px
}
pt=parseInt(dynamic.style.top);
pt=pt+coef_pt*p_move;
dynamic.style.top=pt;
if(pt<=0||pt>=400){
coef_pt=-coef_pt;
}
}

</script>
</body>
</html>

Ayanami · 18.11.2014, 15:07

Спасибо

canvas привяжет мой движущийся объект к размеру окна?не сталкивалась с таким элементом.

Ayanami · 18.11.2014, 17:31

поразбиравшись я поняла что convas мне не помощник(((не подскажите как растянуть все это дела на все окно?

Ayanami · 18.11.2014, 19:05

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
var eds,x,y;
function curve_move (xid,zt){
if(!xid) return null;
if (!zt) zt=100;
x=0;
y=300;
eds=setInterval("move1('"+xid+"')", 4);
}
function move1 (xid){
x+=1.18;
y-=0.5;
document.all[xid].style.top=y;
document.all[xid].style.left=x;
if (y==1){
clearInterval(eds);
eds=setInterval("move2('"+xid+"')", 4);
}
}
function move2 (xid){
x+=1.18;
y+=0.5;
document.all[xid].style.top=y;
document.all[xid].style.left=x;
if (y==300){
clearInterval(eds);
eds=setInterval("move3('"+xid+"')", 4);
}
}
function move3 (xid){
x-=1.18;
y+=0.5;
document.all[xid].style.top=y;
document.all[xid].style.left=x;
if (y==600){
clearInterval(eds);
eds=setInterval("move4('"+xid+"')", 4);
}
}
function move4 (xid){
x-=1.18;
y-=0.5;
document.all[xid].style.top=y;
document.all[xid].style.left=x;
if (y==300){
clearInterval(eds);
}
}
</script>
</head>
<body>
<img name="pic" src="kvad.gif"

style=position:absolute;">
<script>
curve_move("pic",8)
</script>
</body>
</html>

Ayanami · 18.11.2014, 19:05

что то похожее не правду

Smogg · 18.11.2014, 21:45

а вот еще вариант.
У меня с определением касания границ получилось крайне криво, поэтому решил сделать как-нить по другому. Ну и чтоб посмотреть на розочку))
сначала генерируется путь. т.е. массив координат. Потом по таймеру достается очередная точка и туда перемещается объект.

Код:

<html>
<head>
<title>Home</title>

<style>
	html, body {
		min-height:600px;       
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      body {
        overflow: auto; /* добавить полосу прокрутки */ 
      }
      main {
	min-height: 100%;
      }
	  div {height:600px;
	  }
    </style>

<script language = "Javascript">
var action, p_move=25;
var goDwn, goRgt;
var cntX, cntY, cntW, cntH;
var idTmr;

var kvdt;

var kvdtW2, kvdtH2;

function getPos(el) {
   
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

var path = [], t1, t2;
var step;

function pathLine( p1, p2, stepLength){
	t1 = Math.abs(p1.x - p2.x);
	t2 = Math.abs(p1.y - p2.y);	
	var hypoten = Math.sqrt(t1*t1 + t2*t2);	
	var cnt = Math.ceil(hypoten / stepLength);
	t1 = (p2.x - p1.x) / cnt;
	t2 = (p2.y - p1.y) / cnt;	
	var points = [];

	for ( i =1; i <= cnt; i++){
		points.push({x:p1.x + t1*i, y:p1.y + t2*i});
	}
	return points;
}
function startRose(){
	
	clearInterval(idTmr);
	
	var cnt = document.getElementById("dynamic");
	cntW = cnt.clientWidth;
	cntH = cnt.clientHeight;	
	
	var f = getPos(cnt);
	cntX = f.x;
	cntY = f.y;

	var cnt = {};
	cnt.x = cntX + cntW/2;
	cnt.y = cntY + cntH/2;
	
	kvdt = document.getElementById("kvad")
	kvdtW2 = kvdt.offsetWidth /2 ;
	kvdtH2 = kvdt.offsetHeight /2;
	
	/*var pnt = {};
	pnt.x = 0;
	pnt.y = 0;
	*/
	var bdr = Math.min(cntW, cntH) * 2 / 6;
	var f = 0;
	var r;	
	
	path.length = 0;
	
	while (f<=2*Math.PI) {
		pnt = r = Math.sin(3*f);
		path.push(
		{
			x:cnt.x + bdr*r*Math.cos(f) - kvdtW2,
			y:cnt.y - bdr*r*Math.sin(f) - kvdtH2 - cntH/12
		});

		f = f + 0.05;
		
	}
	
	step =0;
	idTmr =window.setInterval("move()", 50);
	
}
function startRomb(){
	path.length = 0;
	clearInterval(idTmr);
	var cnt = document.body;// getElementById("dynamic");
	cntW = cnt.clientWidth;
	cntH = cnt.clientHeight;	
	
	var f = getPos(cnt);
	cntX = f.x;
	cntY = f.y;
	
	kvdt = document.getElementById("kvad")
	kvdtW2 = kvdt.offsetWidth /2 ;
	kvdtH2 = kvdt.offsetHeight /2;
	
	var dots = [{x:0,y:0},
				{x:0,y:0},
				{x:0,y:0},
				{x:0,y:0}];
	dots[0].x = cntX;
	dots[0].y = cntY + cntH/2 - kvdtH2;
	
	dots[1].x = cntX + cntW/2 - kvdtW2;
	dots[1].y = cntY + cntH - kvdtH2 * 2;
	
	dots[2].x = cntX + cntW - kvdtW2 * 2;
	dots[2].y = cntY + cntH/2 - kvdtH2 ;
	
	dots[3].x = cntX + cntW/2 - kvdtW2;
	dots[3].y = cntY;
	var j;
	var i;
	for ( i = 0; i< dots.length; i++)
	{
		if( i != 3)
		{
			j =pathLine( dots[i], dots[i+1], p_move);
			path = path.concat(j);
		}
		else
		{
			j =pathLine( dots[i], dots[0], p_move);
			path = path.concat(j);
		}
	}	
		
	
	idTmr =window.setInterval("move()", 50);
	step =0;
}
function move(){
	
	kvdt.style.left = Math.round(path[step].x) + 'px';
	kvdt.style.top = Math.round(path[step].y) + 'px';

step++;
if(path.length <= step)
	step = 0;
	
}
</script>
</head>
<body >
<input type="button" onClick="startRomb()" value="Go Romb">
<input type="button" onClick="startRose()" value="Go Rose">
<div id="dynamic" style="background-color: #00F;">
<img id="kvad" src="kvad.gif" style="position:fixed;" >
</div>
</body>
</html>

17.11.2014, 20:33	#1
Ayanami Новичок Джуниор Регистрация: 17.11.2014 Сообщений: 6	JavaScript:движение объекта по траектории Доброго времени суток!Мне нужна ваша помощь.Имеется задание:нарисованный в paint квадрат должен перемещаться по ромбовидной траектории.Что то похожее у меня получилось,но нужно чтоб границы соприкосновения квадрата были размеры экрана,какэто реализовать не пойму.Заранее спасибо за помощь Код HTML: <html> <head> <title>Home</title> <script language = "Javascript"> var action,coef_px=-1,coef_pt=1,p_move=5; function startmove(){ dynamic.style.left=parseInt(document.body.offsetWidth)/3+200; dynamic.style.top=0; action=window.setInterval("move()",100); } function move(){ px=parseInt(dynamic.style.left); px=px+coef_pxp_move; dynamic.style.left=px; if(px<=parseInt(document.body.offsetWidth)/2-200\|\| px>=parseInt(document.body.offsetWidth)/2+200){ coef_px=-coef_px } pt=parseInt(dynamic.style.top); pt=pt+coef_ptp_move; dynamic.style.top=pt; if(pt<=0\|\|pt>=400){ coef_pt=-coef_pt; }} </script> </head> <body onLoad=startmove()> <div id="dynamic"style="position:absolute;"> <img src="kvad.gif"> </div> </body> </html> Последний раз редактировалось Stilet; 18.11.2014 в 07:35.

18.11.2014, 12:38	#3
Ayanami Новичок Джуниор Регистрация: 17.11.2014 Сообщений: 6	ага,за это конечно спасибо большое,некоторые идеи появились,но все таки не совсем то(((ну может досоображаю

18.11.2014, 15:07	#5
Ayanami Новичок Джуниор Регистрация: 17.11.2014 Сообщений: 6	Спасибоcanvas привяжет мой движущийся объект к размеру окна?не сталкивалась с таким элементом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Движение объектов по траектории	Vladlena	Общие вопросы C/C++	0	19.05.2013 18:38
Движение объекта по квадратной траектории	oblomok	C# (си шарп)	5	08.07.2012 23:13
Движение объекта по искривленной траектории	ZvEr_HaCkEr	Gamedev - cоздание игр: Unity, OpenGL, DirectX	6	25.06.2011 05:36
Движение курсора по траектории	DarkHacker	Помощь студентам	0	19.03.2010 18:05
Движение фигуры по траектории	Dgohn	Общие вопросы Delphi	3	08.01.2009 09:36

18.11.2014, 17:31	#6
Ayanami Новичок Джуниор Регистрация: 17.11.2014 Сообщений: 6	поразбиравшись я поняла что convas мне не помощник(((не подскажите как растянуть все это дела на все окно?

18.11.2014, 19:05	#7
Ayanami Новичок Джуниор Регистрация: 17.11.2014 Сообщений: 6	<html> <head> <title>Простая страница</title> <script language="JavaScript"> var eds,x,y; function curve_move (xid,zt){ if(!xid) return null; if (!zt) zt=100; x=0; y=300; eds=setInterval("move1('"+xid+"')", 4); } function move1 (xid){ x+=1.18; y-=0.5; document.all[xid].style.top=y; document.all[xid].style.left=x; if (y==1){ clearInterval(eds); eds=setInterval("move2('"+xid+"')", 4); } } function move2 (xid){ x+=1.18; y+=0.5; document.all[xid].style.top=y; document.all[xid].style.left=x; if (y==300){ clearInterval(eds); eds=setInterval("move3('"+xid+"')", 4); } } function move3 (xid){ x-=1.18; y+=0.5; document.all[xid].style.top=y; document.all[xid].style.left=x; if (y==600){ clearInterval(eds); eds=setInterval("move4('"+xid+"')", 4); } } function move4 (xid){ x-=1.18; y-=0.5; document.all[xid].style.top=y; document.all[xid].style.left=x; if (y==300){ clearInterval(eds); } } </script> </head> <body> <img name="pic" src="kvad.gif" style=position:absolute;"> <script> curve_move("pic",8) </script> </body> </html>