砲台が回転する

JavaScriptメモ

http://home.h00.itscom.net/toku/jsexample/cannon/cannon.html

  • エレメントの取得は、document.getElementById(IDの文字列)にしておけば、IEでもFireFoxでも動くらしい。
  • 回転させた画像をあらかじめ用意する以外に、なにか良い手はないか？
<body onload="sampleMain()">

<script language="JavaScript">

function sampleMain(){
  cannonPattern = 0;
  setInterval("rotateCannon()",200); // 200m秒毎
}

function rotateCannon() {
  cannonPattern++;
  if(cannonPattern > 16) {
    cannonPattern = 0;
  }
  var imageNumber = cannonPattern < 9 ? cannonPattern : 17 - cannonPattern;
  document.getElementById("img1").src = "../img/friend_0_" + imageNumber + ".png";
}

</script>

<div id="div1" style="position:absolute">
<img id="img1" src="../img/friend_0_0.png">
</div>

</body>