第二ステージの障害物の動作編
ご訪問いただき誠にありがとうございます。
今回は第二ステージの障害物の処理について解説いたします。第二ステージは、障害物が消灯している状態からスタートします。その後、自キャラが障害物へと近づいていくと仕掛けが動き始めます。仕掛けは障害物が3秒間点灯→2秒間点滅→2秒間消灯というサイクルを繰り返す処理になっています。障害物が点灯している状態で自キャラが触れてしまうとゲームオーバーとなります。障害物が消灯している間に通り抜けてステージの端まで辿り着けばクリアです。
実際の「避けゲー」で遊びたい方は以下よりアクセスしてください。
ソースコードはGitHub上にアップしていますので適宜参考にしてください。
第二ステージの制御
第二ステージはenemy3関数で制御しています。enemy3関数のアクティビティ図とソースコードを掲載しておきます。
enemy3関数のアクティビティ図
enemy3関数のコード(avoider.jsから抜粋)
function enemy3() {
ctx.beginPath();
ctx.rect(200+Rex, 40, 240, 240);
if (e3) {
ctx.fillStyle = "red"; //障害物が有効のときの背景色
}else{
ctx.fillStyle = "rgb( 200, 200, 200 )"; //障害物が無効のときの背景色
}
ctx.fill();
ctx.closePath();
if (x>=100&&x<=540&&em3==0) { //自キャラが障害物に近づいたとき
em3=1; //障害物を点滅開始
et3=0; //点滅用カウンタの初期化
e3=true; //障害物を有効にセット
}
if (em3!=0) {
et3++; //点滅中はカウントアップ
}
if (et3>=300&&et3<500) { //点滅期間の3秒~5秒の間
//0.2秒ごとに障害物を点滅させる
if (et3%20<=10) {
e3=true;
}else{
e3=false;
}
}
if (et3>=700) { //点滅開始してから7秒経過後
em3=0; //点滅を停止
}
if (e3) { //障害物が有効の時(赤色の期間)
if (x>=180&&x<=460) { //自キャラのx座標と障害物のx座標が重なった
gameover=true; //障害物にぶつかったと判定し、ゲームオーバーの判定をセットする
}
}
}
if (e3) {
変数e3は障害物が有効か無効かの状態を管理しており、e3の状態を見て、障害物の色を変えたり、障害物との当たり判定を行っています。有効か無効かのように2値しか使用しない場合はBoolean型の変数を使います。
if (et3>=300&&et3<500) {
if (x>=180&&x<=460) {
「障害物の点滅期間が3秒以上かつ5秒より小さい間」や「自キャラのx座標が180以上かつ460以下の場合」といった条件が複数あるような場合は論理演算を使います。
JavaScriptの関係演算子と等値演算子
関係演算子
記号 | 意味 |
---|---|
< | より小さい |
> | より大きい |
<= | 以下 |
>= | 以上 |
in | 与えられたプロパティをオブジェクトが持っているか |
instanceof | オブジェクトが別のオブジェクトのインスタンスかどうか |
等値演算子
記号 | 意味 |
---|---|
== | 等しいか |
!= | 等しくないか |
=== | 厳密に等しいか(オブジェクトの型まで含めて等しいか) |
!== | 厳密に等しくないか(オブジェクトの型まで含めて等しくないか) |
使える演算子は言語によって異なりますので必ず言語仕様を確認しましょう。また同じ演算子でも言語によって仕様が異なっていることもあります。
JavaScriptのバイナリー論理演算子
記号 | 意味 |
---|---|
&& | 論理積(AND、かつ) |
|| | 論理和(OR、または) |
?? | Null合体演算子 |
論理演算子は複数の条件式をまとめるときに使用する演算子です。論理演算子は短絡評価を持ちます。
Null合体演算子は演算子の左辺がnullからundefinedのときには右辺の値を返し、それ以外の場合には左辺の値を返す演算子です。
短絡評価
短絡評価とは論理演算する際に左辺の条件だけで全体の条件が決まってしまう場合、右辺を評価する意味がないため(無駄なため)、左辺の評価だけしか行わない仕組みをいいます。例えば論理積(&&)の場合、左辺がfalseであれば、その瞬間に全体の評価はfalseで確定するため、右辺がfalseでもtrueでも結局falseになります。同様に論理和(||)の場合、左辺がtrueであれば、全体の評価はtrueで確定します。このように左辺の評価しか行わない仕組みを短絡評価と呼んでいます。
最後までご覧いただきありがとうございます。
今回は第二ステージの障害物の動作について見ていきました。第二ステージは点灯・消灯を繰り返す障害物を消灯期間中に通り抜けるというだけの単純なステージなのですが、自キャラが障害物に近づくまで仕掛けが作動しなかったり、点滅させて惑わしたり、といった演出を加えています。ゲームにはちょっとした演出が加わるだけで楽しさが変わってきますよね。
次回は第三ステージの障害物の動きについて見ていきます。第三ステージの障害物は円を描きながらぐるぐると回る障害物が登場します。どのように円運動を制御しているのか?
次回のブログにもお付き合いいただけると嬉しいです。
【PR】FXを始めるなら【DMM FX】!