・実行画面
・画面表示
今回のゲームでは、画面用とは別に背景用のイメージを用意しました。 画面を表示する時には、まず画面用イメージ(screen)に背景用イメージ(bk) をコピーして、その上に自機を描きます。こうすれば、 毎回自機を上書きする形で背景が描き直されるので、 自機を移動ために今表示している自機を消して改めて描き直す、 という処理は不要です。さらに、 描き変え中のイメージは表示されないのでちらつきを抑えるためにも有利でしょう。
背景は、この手のゲームではやはり「宇宙」ですね。 背景用イメージを真っ黒に塗りつぶして、 乱数で1000個も星を散らせば「宇宙」の出来上がり。
では、次は自機の移動です。自機は、画面の下の方に表示されるので、 画面の下の方でマウスカーソルを動かすとその方向に移動するようにしましょう。 動ける方向は左右方向のみですので、マウスカーソルのx 座標を表す変数mx を用意して、この変数をマウスカーソルが動くと発生するmouseMove イベントの時に現在のマウスカーソルの座標に更新します。 ただし、画面の下の方にある時以外はカーソルを動かしても移動しないよう、変数を-1 にしておきましょう。そして、移動処理の時にmx がマイナスなら自機を移動しないようにします。
移動の処理は、スレッドを作りそのスレッドの中で一定時間ごとに、 現在のマウスカーソルと自機の座標を調べます。その時、 自機とマウスカーソルが離れていたなら、 自機をマウスカーソルの方に4ドットだけ移動させます。こうすれば、 自機がマウスカーソルの方へ移動していく事になるわけです。なお、 離れているかの判定条件で自機のx 座標(x)に4 を足したり引いたりしているのは、 判定条件を緩やかにするためで、こうしないと座標が厳密に一致しない場合 (自機は4ドットごとの移動なのでありうる) はずっと自機が左右に振動し続けてしまいます。