Урок 16. Движение объектов

Линейное движение

<html>
<head><title>Линейное движение картинки</title>
<script>
    function init_move() {
      dx = 8 // приращение по осям
      dy = 3
      setInterval("move()",200)
    }
    function move() { // изменение координат изображения
      // текущие координаты
      var y = parseInt(document.all.pic.style.top)
      var x = parseInt(document.all.pic.style.left)
      // новые координаты
      document.all.pic.style.top = y + dy
      document.all.pic.style.left = x + dx
    }
</script>
</head>
<body>
    <img name="pic" src="cat.jpg" style="position:absolute; top:10; left:20;">
    <script>
      init_move()
</script>
</body>
</html>

Движение по кривой

<html>
<head><title>Движение по кривой</title>
<script>
    function curve_move(xid, yexpr, xexpr, ztime) {
      if (!xid) return null
      if (!yexpr) yexpr = "x"
      if (!xexpr) xexpr = "x"
      if (!ztime) ztime = 100
      x = 0
      setInterval("move('" + xid + "','" + yexpr + "','" + xexpr + "')",ztime)
    }
    function move(xid, yexpr, xexpr) { 
      x += 1
      document.all[xid].style.top = eval(yexpr)
      document.all[xid].style.left = eval(xexpr)
    }
</script>
</head>
<body>
    <img name="pic" src="cat.jpg" style="position:absolute;">
    <script>
      curve_move("pic","100 + 50 * Math.sin(0.03*x)","50+x",30)
    </script>
</body>
</html>

Движение по кривой с возвратом назад:

<html>
<head><title>Движение по кривой с возвратом</title>
<script> // движение буквой V
    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)/3 - 200 ||
      px >= parseInt(document.body.offsetWidth)/3 + 200) {
        coef_px = -coef_px
      }
      pt = parseInt(dynamic.style.top);
      pt = pt + coef_pt * p_move;
      dynamic.style.top = pt;
      if(pt <= 0 || pt >= 200) {
        coef_pt = -coef_pt
      }
    }
</script>
</head>
<body onload=startmove()>
    <div id="dynamic" style="position:absolute;">
    <img src="cat.jpg"></div>
</body>
</html>