シューティングゲームアルゴリズムマニアックス

シューテングゲームを作る>第一回背景と自機の表示

 今回はシューテングゲームを作ります。シューテングゲームと言っても、 昔のBASICマニュアルなどに例として載っていたような (という説明でわかる人が何人いるだろうか)、ごく単純なものです。 自機が画面の下の方で左右に動き、それに上の方にいる敵が弾を打ってくる。 昔のBASICのマニュアルや入門書には、 こんな感じのゲームが良く紹介されていたので、 画面を見てプログラミングに没頭した「青春の日々」(^^; を思い出される方も多いでしょう。私も、 小学生の頃は良くこんな感じのゲームを作っていましたっけ。
 今回は、まず自機を動かす部分を作る事にします。

・実行画面

・画面表示

 今回のゲームでは、画面用とは別に背景用のイメージを用意しました。 画面を表示する時には、まず画面用イメージ(screen)に背景用イメージ(bk) をコピーして、その上に自機を描きます。こうすれば、 毎回自機を上書きする形で背景が描き直されるので、 自機を移動ために今表示している自機を消して改めて描き直す、 という処理は不要です。さらに、 描き変え中のイメージは表示されないのでちらつきを抑えるためにも有利でしょう。

 背景は、この手のゲームではやはり「宇宙」ですね。 背景用イメージを真っ黒に塗りつぶして、 乱数で1000個も星を散らせば「宇宙」の出来上がり。

 では、次は自機の移動です。自機は、画面の下の方に表示されるので、 画面の下の方でマウスカーソルを動かすとその方向に移動するようにしましょう。 動ける方向は左右方向のみですので、マウスカーソルのx 座標を表す変数mx を用意して、この変数をマウスカーソルが動くと発生するmouseMove イベントの時に現在のマウスカーソルの座標に更新します。 ただし、画面の下の方にある時以外はカーソルを動かしても移動しないよう、変数を-1 にしておきましょう。そして、移動処理の時にmx がマイナスなら自機を移動しないようにします。

 移動の処理は、スレッドを作りそのスレッドの中で一定時間ごとに、 現在のマウスカーソルと自機の座標を調べます。その時、 自機とマウスカーソルが離れていたなら、 自機をマウスカーソルの方に4ドットだけ移動させます。こうすれば、 自機がマウスカーソルの方へ移動していく事になるわけです。なお、 離れているかの判定条件で自機のx 座標(x)に4 を足したり引いたりしているのは、 判定条件を緩やかにするためで、こうしないと座標が厳密に一致しない場合 (自機は4ドットごとの移動なのでありうる) はずっと自機が左右に振動し続けてしまいます。

プログラムソース表示
戻る  トップページへ