Форум

Questioner · #1 (**permalink**) 09.11.2011, 19:01

Здравствуйте! Я прочел статью http://beta.javascript.ru/tutorial/animation и попытался сделать маятник. получилось вот:

<!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">   

  <script>
function move(el) {
  var i = 0, fading = 180;
  el.style.left = 0;
  el.style.top = 0;
  function fc() {
  left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180);
  el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
  el.style.top = ((left / 320) * 320) + "px";
  i++;
  fading -= 0.125;
  if(fading <= 0) {clearInterval(b)}
  };
  var b = setInterval(fc, 10);
}
  </script>
  <div style = "height: 320px; width: 320px; position: absolute; left: 295px">
<div style="height: 20px; width: 20px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "move(this)"></div>
</div>
</body>
</html>

скажите пожалуйста, что я делаю не так?

ksa · #2 (**permalink**) 10.11.2011, 09:25

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

попытался сделать маятник

Раньше я маятник представлял себе иначе...

Или это какой-то броуновский маятник?

fiw · #3 (**permalink**) 10.11.2011, 13:43

Я полагаю что у вас проблемы именно с математическими операциями.
У вас получилась какая-то парабола неправильная)
Может быть код верный, а неточности проявляются от того, что при расчетах выводятся, числа с плавающей запятой. Точно не могу сказать. Я не знаю как сам маятник устроен.

ksa · #4 (**permalink**) 10.11.2011, 13:49

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

Я не знаю как сам маятник устроен.

Приезжай к нам в волгоградский планетарий - я тебе покажу...

http://volgogradplanetarium.volgadmin.ru/starhall.aspx
на фотке мало что видно...

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

У вас получилась какая-то парабола неправильная

И парабола вычисляется по формуле
y=A*(x*x)+B*x+C
где A, B и C константы из множества R... А никак не sin() и cos().

Questioner · #5 (**permalink**) 10.11.2011, 21:48

На основе этого кода придумал игру: поймай квадратик

<!DOCTYPE HTML>
<html>
<body onload = "move(document.getElementById('a'))">   

  <script>
var b;
function move(el) {
  var i = 0, fading = 180;
  el.style.left = 0;
  el.style.top = 0;
  function fc() {
  el.style.left = (Math.cos(i/180*Math.PI) * el.parentNode.clientWidth*fading/180) + "px";
  el.style.top = (Math.abs(Math.sin((i-fading/2)/180*Math.PI) * el.parentNode.clientHeight)) + "px";
  i++;
  fading -= 0.125;
  if(fading <= 0) {clearInterval(b); alert("Вы проиграли!"); document.getElementById("a").onclick = function() {alert("Поздно!")}}
  };
  b = setInterval(fc, 10);
}
  </script>
  <div style = "height: 295px; width: 320px; position: absolute; left: 295px">
<div style="height: 40px; width: 40px; background-color: blue; position: absolute; left: 0px; top: 0px" id = "a" onclick = "alert('Вы выиграли!'); clearInterval(b); this.onclick = function() {}"></div>
</div>
</body>
</html>

Questioner · #6 (**permalink**) 15.11.2011, 17:04

Кстати, маятник движется по сектору окружности, а не по параболе

trikadin · #7 (**permalink**) 15.11.2011, 17:08

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

На основе этого кода придумал игру: поймай квадратик

Улучшать и улучшать)

Форум

Справочник

Discord чат

Курсы javascript