ヘリコプターが水平移動・上昇・降下・ホバリングするアニメーション

<!-- HTML 表記 -->
<body style="background-color:lightblue;" onLoad="hyoji()">
    <img src="画像のURL" id="heri" style="position:absolute; visibility:hidden;" width="27%" height="auto">
    <form>
      <input type="button" value="start" onClick="startAnime()">
      <!-- <input type="button" value="Stop" onClick="teishi()"> -->
    </form>

<form>

</form>

//   JavaScript 表記
<script type="text/javascript">
<!--
  posLeft = 0;
  posTop = 0;
  startposLeft = 0;
  startposTop = 40;
  leftSpeed = 2;
  topSpeed = 2;

  current=0;
  var timer;
  animeImage=new Array(2);
  for (var i=0;i<2;i++){
    animeImage[i]=new Image();
    animeImage[i].src="image/heri/heri_r"+(i+1)+".gif";
  }
  clearInterval(timer);

function hyoji(){
  document.getElementById("heri").style.left = startposLeft;
  document.getElementById("heri").style.top = startposTop;
  document.getElementById("heri").style.visibility = "visible";
  document.getElementById("heri").src = animeImage[current].src; 
}

function startAnime(){
  current=0; topSpeed = 0; leftSpeed = 2;
  document.getElementById("heri").style.left = startposLeft;
  document.getElementById("heri").style.top = startposTop;
  posLeft = startposLeft;
  posTop = startposTop;
  timer=setInterval("anime()",40);
}

function anime(){
  document.getElementById("heri").style.left = posLeft;
  document.getElementById("heri").style.top = posTop;
  document.getElementById("heri").src = animeImage[current].src; 
  posLeft += leftSpeed;
  posTop += topSpeed;
  current++;

  if(current==2){
    current=0;
  }
   if(posLeft>30) {
   topSpeed = -1;
  }
   if(posLeft>60) {
   topSpeed = 0;
  }
   if(posLeft>80) {
   topSpeed = +1;
  }
  if(posLeft>200) {
     clearInterval(timer); 
     timer=setInterval("teishi()",160);
     teishi(); }
  }
}

//-->
</script>

// JavaScript 表記

<!--

posLeft = 0;

posTop = 0;

startposLeft = 0;

startposTop = 40;

leftSpeed = 2;

topSpeed = 2;

current=0;

var timer;

animeImage=new Array(2);

for (var i=0;i<2;i++){

animeImage[i]=new Image();

animeImage[i].src="image/heri/heri_r"+(i+1)+".gif";

}

clearInterval(timer);

function hyoji(){

document.getElementById("heri").style.left = startposLeft;

document.getElementById("heri").style.top = startposTop;

document.getElementById("heri").style.visibility = "visible";

document.getElementById("heri").src = animeImage[current].src;

}

function startAnime(){

current=0; topSpeed = 0; leftSpeed = 2;

document.getElementById("heri").style.left = startposLeft;

document.getElementById("heri").style.top = startposTop;

posLeft = startposLeft;

posTop = startposTop;

timer=setInterval("anime()",40);

}

function anime(){

document.getElementById("heri").style.left = posLeft;

document.getElementById("heri").style.top = posTop;

document.getElementById("heri").src = animeImage[current].src;

posLeft += leftSpeed;

posTop += topSpeed;

current++;

if(current==2){

current=0;

}

if(posLeft>30) {

topSpeed = -1;

}

if(posLeft>60) {

topSpeed = 0;

}

if(posLeft>80) {

topSpeed = +1;

}

if(posLeft>200) {

clearInterval(timer);

timer=setInterval("teishi()",160);

teishi(); }

}

//-->

</script>