カテゴリ

open all | close all

敵機描画1

敵機襲来

首都を襲う敵爆撃機。しかし恐れることはない。敵は対空兵装がなく数世代前の複葉機だ。応援部隊が来るまで時間をかせぐのだ。次から次へと湧き上がる敵機から首都を守るぞ!(しかし敵機の速度が徐々に増してきていないか?)

っていう感じで敵機を描画していきます。

画像

次の画像を使います。サイズが若干大きいので縮小し利用します。

画像のハンドリングを行うため<img>タグで読み込み、IDを利用してJavaScriptで要素を取得します。

定数

次の定数で表示最大機数や敵機の状態を管理します。

変数

一定間隔で出撃を行います。出撃機数、速度は出撃する度に増していくように、次の変数を定義しました。

敵機管理を二次元配列で実現します。

敵機描画

敵機の描画は描画処理(draw())から敵機描画処理(tekiMove())を呼び出します。

とりあえず直進させます。5行目~9行目で出撃間隔に達していたなら後述する出撃処理(fight())を呼び出しています。

10行目~19行目では全敵機の中から「出撃中」を探し描画しています。そして描画後に敵機を進めています。ここで敵機が画面下に達したなら状態を「待機中」にしています(15行~17行)

出撃処理

全敵機の中から「待機中」を検索し「戦闘中」にしています。これを1回の出撃数に達するまで行います(出撃数は徐々に増えます)。

座標の横位置はランダム、縦は画面上を設定し速度はその時点の速度(速度は徐々に増します)を格納しています。

22行、23行目で1回の出撃数、速度を増やしています。

実行

動作を確認します。実行画面へ


敵機を描画できましたが改善が必要です。まず直進以外の方向へ移動させます。