JavaScriptでimageに、y=sinxの動きをさせるシューティングゲームを作成しました。

はじめに

JavaScriptでシューティングゲームを作成しました。
目標(星の画像）にy=sinxの動きをさせる事が出来たので、投稿しました。

リンクはこちら

苦労した点

imageにy=sinxの動きをさせるに少し手間取りました。

改善したい点

setIntervalでモーションをつけているのですが、clearIntervalをしても（おそらくclearIntervalの挿入位置が悪い）、２回目以降は目標物が止まらなくなる点と、clearInterval出来ていないので２回目以降は衝突判定が効かない点。

imageにy=sinxの動きをどうやってつけたか

//imageOfStarにsinθの動きをさせる
  movingxStar = 1;
  positionxOfStar += movingxStar;
  movingyStar = Math.sin(positionxOfStar*Math.PI/180);
  positionyOfStar += movingyStar;
  document.getElementById("imageOfStar").style.left = positionxOfStar + "px";
  document.getElementById("imageOfStar").style.top = positionyOfStar + "px";

まず、動かしたいimageにidをセットしてsetInterval()で、上記のコードを繰り返し処理させます。
movingxStarは、setIntervalでの単位時間あたりのx軸方向での動かしたい移動量を書きます。上記ではmovingxStar = 1;となっていますが、movingxStar = 5と記述すると、単位時間あたりに5px動くようになります。私は、出来るだけ滑らかなモーションを実現したかった為、movingxStar = 1；としました。
positionxOfStarとpositionyOfStarは、移動量ではなく、その時におけるimageOfStar（画像）のx軸位置、y軸位置を表しています。
positionxOfStarをif文で判定することによって、画面上のどの位置まできたら、〜の処理をしたい、などを実装することが出来ます。
もし全てのコードを見たい、という方がいらっしゃった場合、上記のリンクからとんで頂けば見れると思います。