Javascript-форум - Движение на java script

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Движение на java script (https://javascript.ru/forum/dom-window/36922-dvizhenie-na-java-script.html)

Движение на java script

Ребят кому не сложно, поделитесь ссылкой.
Может кто видел в сети скрипт позволяющий реализовать движение одного объекта вокруг другого. Что-то вроде движения спутника вокруг планеты, но выглядеть это должно как в 3d пространстве, тоесть при движение, некоторое время объект виден, потом скрывается (к примеру за планетой), и через определенный промежуток времени, снова становиться виден. Но это должен быть не flash.

Цитата:

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

при движение, некоторое время объект виден, потом скрывается (к примеру за планетой)

Тебе поможет
http://javascript.ru/blog/Andrej-Par...cii-JavaScript
http://javascript.ru/forum/misc/3689...mayatnika.html
http://htmlbook.ru/css/z-index

<html>
    <head>
        <style type="text/css">
            #block {
                position: absolute;
                background-color: red;
                width: 100px;
                height: 80px;
                color: white;
                }
        </style>
    </head>
    <body>
        <div id="block">Наш блок</div>
        <script type="text/javascript">
                    var obj = document.getElementById("block"); 
            var i = 0; 
            /**   
             Функция moveBlock будет запускаться каждые 10 миллсекунд  
             **/   
            function moveBlock() {  
                obj.style.left = i; 
                obj.style.top = i; 
                i++; 
            }  
        //Каждые 5000 миллисекунд запускаем функцию test (5 секунд, 5000 миллисекунд)  
        setInterval(moveBlock, 10);   
        </script>
    </body>
</html>

Идейка с z-index появилась, в сети нашел это скрипт, но вот беда, срабатывает он только в том случая когда отсутствует доктайп, стоит его только добавить и конструкция перестает работать.

Все это можно сделать на SVG. Вот пример:
http://www.kevlindev.com/samples/orb.../orbit_svg.svg
правда тут не скрывается, но допилить несложно.

Цитата:

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

Значит не правильно используешь z-index...

Нашел на мой взгляд наиболее подходящее решение.

Все это дело выглядит следующим образом. Помогите допилить.
Необходимо что бы z-index у img с id "luna" становился отрицательным в определенный момент анимации.

Пробывал дописать if (omega>0.045) {obj.style.zIndex=(-10);} else {obj.style.zIndex=(10);}; где omega это время всей анимации, но ничего не вышло((

<!DOCTYPE html>
<html>
<head><title>Движение по эллипсу</title>
<link rel="stylesheet" href="css/docs.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">body {background:white}</style>
</head>
<script>
var x0=200,y0=250; // центр эллипса
function ellipse(xid,x0,y0,alpha,a,b,omega) // эллиптическая орбита
{
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
dt=5;      // приращение времени
t=0;
//omega - угловая скорость, знак задает направление вращения
var x=a*Math.cos(omega*t); // начальное положение на эллипсе
var y=b*Math.sin(omega*t);
obj=document.getElementById(xid);
obj.style.top=(-x*as+y*ac+y0)+"px";
obj.style.left=(x*ac+y*as+x0)+"px";
setInterval("move(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value,document.getElementById('omega1').value)",100)
}

function move(x0,y0,alpha,a,b,omega)// пересчет координат, вызывается из ellipse()
{
t=t+dt;
// x,y - координаты в собственной системе координат
var x=a*Math.cos(omega*t);
var y=b*Math.sin(omega*t);
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
obj.style.top=(-x*as+y*ac+y0)+"px"; // переход в экранную систему координат
obj.style.left=(x*ac+y*as+x0)+"px";
}


</script>
<head>

<body 
onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value,document.getElementById('omega1').value)">

<img id="planeta" src="planeta.png" style="position:absolute;top:200px;left:120px; width: 200px;"/>
<img id="luna" src="sputnik.png" style="position:absolute;top:300px;left:190px; width: 30px;"/>

<h2>Движение по эллипсу</h2>
<h3>Параметры:</h3>
<input id="alpha0" type="text" value=0 size=4/>
угол наклона эллипса, град.(альфа)<br/>
<input id ="a1" type ="text" value=140 size=4/> 
большая полуось (a) <br/>
<input id ="b1" type ="text" value=40 size=4/> 
малая полуось (b) <br/>
<input id ="omega1" type ="text" value=0.09 size=4/> 
угловая скорость (омега) 
</body>
</html>

1) Будешь выкладывать здесь неотформатированный код - боженька накажет - зашлет тебе вирусов на комп.
2) Понятно что это - прототип. Но черт, мне было бы стыдно показывать людям такой засранный код. Причеши немного.
3) Решение "в лоб". Наверно можно сделать лучше.

<!DOCTYPE html>
<html>
<head><title>Движение по эллипсу</title>
<link rel="stylesheet" href="css/docs.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">body {background:white}</style>
</head>
<script>
var x0=200,y0=250; // центр эллипса
function ellipse(xid,x0,y0,alpha,a,b,omega) // эллиптическая орбита
{
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
dt=5; // приращение времени
t=0;
//omega - угловая скорость, знак задает направление вращения
var x=a*Math.cos(omega*t); // начальное положение на эллипсе
var y=b*Math.sin(omega*t);
obj=document.getElementById(xid);
obj.style.top=(-x*as+y*ac+y0)+"px";
obj.style.left=(x*ac+y*as+x0)+"px";
setInterval("move(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value, document.getElementById('b1').value,document.getElementById('omega1').value)",20)
}

function move(x0,y0,alpha,a,b,omega)// пересчет координат, вызывается из ellipse()
{
t=t+dt;
// x,y - координаты в собственной системе координат
var x=a*Math.cos(omega*t);
var y=b*Math.sin(omega*t);
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
obj.style.top=(-x*as+y*ac+y0)+"px"; // переход в экранную систему координат
obj.style.left=(x*ac+y*as+x0)+"px";
obj.style.zIndex = y < 0 ? -1 : 1;
}


</script>
<style>
#planeta{border-radius: 100%;background: blue;height: 200px;}
#luna{border-radius: 100%;background: gray;height: 
30px}
</style>
<head>

<body 
onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value ,document.getElementById('omega1').value)">

<div id="planeta" style="position:absolute;top:200px;left:120px; width: 200px;"></div>
<div id="luna" style="position:absolute;top:300px;left:190px; width: 30px;"></div>

<h2>Движение по эллипсу</h2>
<h3>Параметры:</h3>
<input id="alpha0" type="text" value=0 size=4/>
угол наклона эллипса, град.(альфа)<br/>
<input id ="a1" type ="text" value=140 size=4/> 
большая полуось (a) <br/>
<input id ="b1" type ="text" value=40 size=4/> 
малая полуось (b) <br/>
<input id ="omega1" type ="text" value=0.01 size=4/> 
угловая скорость (омега) 
</body>
</html>

Цитата:

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

Необходимо что бы z-index у img с id "luna" становился отрицательным в определенный момент анимации.

Про отрицательный это сильно! Закончились натуральные числа? :)
У тебя меняется угол - вот его и нанализируй...

Форматирование подразумевает добавление отступов, для улучшения читабельности иерархии вложенности тегов?) я правильно понимаю?)

Спасибо огромное Вам за оперативную помощь и отзывчивость)

Цитата:

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

Да это мелочи. Но это бы помогло тебе обнаружить что у тебя два открывающих тега <head> и что скрипт находится где-то между головой и телом непонятно где.
Но беда не в этом. Скопируй свой код и попробуй запустить его. И отпишись о результатах

Да да, конструкция работает) еще раз спасибо)

Еще вопрос можно?

Параметры элипса задаются через html форму, а возможно сделать так что бы к ним не было доступа со стороны пользователя, и задавались они вручную в теле самого скрипта?

Я полагаю это позволило бы сократить вот это html строчку:

<body onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value ,document.getElementById('omega1').value)">

И проще было бы разобрать с тем как к событию onload (которое насколько мне известно может применяться только один раз), подключить несколько функций.

Вот вариант который имею на данный момент:

<!DOCTYPE html>

<html>
	<head>
		<title>Движение по эллипсу</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />

		<script>
			var x0=100,y0=100; // центр эллипса
			function ellipse(xid,x0,y0,alpha,a,b,omega) // эллиптическая орбита
				{
					var as=Math.sin(alpha*Math.PI/180);
					var ac=Math.cos(alpha*Math.PI/180);
					dt=5; // приращение времени
					t=0;
				//omega - угловая скорость, знак задает направление вращения
					var x=a*Math.cos(omega*t); // начальное положение на эллипсе
					var y=b*Math.sin(omega*t);
					obj=document.getElementById(xid);
					obj.style.top=(-x*as+y*ac+y0)+"px";
					obj.style.left=(x*ac+y*as+x0)+"px";
					setInterval("move(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value, document.getElementById('b1').value,document.getElementById('omega1').value)",20)
				}
			
			function move(x0,y0,alpha,a,b,omega)// пересчет координат, вызывается из ellipse()
				{
					t=t+dt;
				// x,y - координаты в собственной системе координат
					var x=a*Math.cos(omega*t);
					var y=b*Math.sin(omega*t);
					var as=Math.sin(alpha*Math.PI/180);
					var ac=Math.cos(alpha*Math.PI/180);
					obj.style.top=(-x*as+y*ac+y0)+"px"; // переход в экранную систему координат
					obj.style.left=(x*ac+y*as+x0)+"px";
					obj.style.zIndex = y < 0 ? -1 : 1;
				}
		</script>
		
		<style>
		
			#planeta {
			border-radius: 100%;
			background: blue;
			height: 200px;
			position:absolute;
			width: 200px;
			}
			
			#luna {
			border-radius: 100%;
			background: gray;
			height: 30px;
			position:absolute;
			width: 30px;
			}
			
			.none {
			display: none;
			}
			
		</style>
		
	</head>

	<body onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value ,document.getElementById('omega1').value)">
		
		<div id="planeta"></div>
		
		<div id="luna"></div>
			
			
				<!-- Угол наклона эллипса, град.(альфа) -->
			<input class="none" id="alpha0" type="text" value=0 size=4/>
				
				<!-- Большая полуось (a) -->
			<input class="none" id ="a1" type ="text" value=140 size=4/>
				
				<!-- Малая полуось (b) -->
			<input class="none" id ="b1" type ="text" value=40 size=4/>
				
				<!-- Угловая скорость (омега) -->
			<input class="none" id ="omega1" type ="text" value=0.01 size=4/>
				
	</body>

</html>

Наркоман чтоле?

Цитата:

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

<body onload="ellipse('luna','planeta',x0,y0,document.ge tElementById('alpha0').value,document.getElementBy

Зачем тут пробел в первом слове getElementById ???

Цитата:

Сообщение от danik.js

Зачем тут пробел в первом слове getElementById ???

его форум добавляет в длинные слова, что бы не корежить форум... Просто человеку нужно научится пользоватся тегами:

[JS]...[/JS] или [HTML]...[/HTML]

Вобще, меня больше смущает это:

Цитата:

Сообщение от danik.js

Скопируй свой код и попробуй запустить его. И отпишись о результатах

Цитата:

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

Да да, конструкция работает)

Что-то тут точно не так )

ну насчет пробелов, человек комментарием выше объяснил)
вот вопрос насчет наркомана не понял)
а твою фразу - "Скопируй свой код и попробуй запустить его. И отпишись о результатах" я воспринял , как опробывать исправленный тобой код)

Цитата:

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

вот вопрос насчет наркомана не понял)

Я сказал что под форматированием не это имел ввиду (не выравнивание)
Код, не обрамленый в

[html] .. [/html]

искажается. Чтоб ты понял предложил проверить самому. Как ты догалался нам приходится самим искать лишние пробелы и удалять. Не очень интересное времяпрепровождение. И тут на тебе! Заявляешь что все мол работает отлично, и в добавок постишь новую порцию неотформатированного искаженного кода. Нук какая тут еще реакция могла последовать? Правильно, мысли о наркомании..

ссори, яж новичок. ну теперь буду иметь ввиду)