このページの本文へ

enchant.jsで懐かしのインベーダーゲームを作ろう (2/4)

2012年08月29日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

敵の移動処理

 敵が左右に移動し、端まで来たら少し下に移動する処理を作ります。

 左右(X座標)の移動量を変数enemyDXに設定し、Y座標の移動量を入れる変数enemyDYも用意します。enemyDYの初期値は0です。

// 敵全体を移動させるための座標を用意する
var enemyDX = 4;
var enemyDY = 0;

 敵を左右に移動させるにはX座標に移動量を加算します。敵の情報は配列に入れてあるので、for()を使って繰り返し処理しています。

for(var i=0; i<count; i++){
 enemy[i].x = enemy[i].x + enemyDX;  // X座標の移動処理
 enemy[i].y= enemy[i].y + enemyDY; // Y座標の移動処理

 敵を左右に移動した結果、どれか1つでも端に達したら移動方向を反転する必要があります。ただし、すぐに反転処理してしまうのではなく、reverseFlagフラグをtrueにして、端に達したことだけを情報として持つようにしています。なお、左端のX座標は0、右端のX座標が330にしてあります。

// 左右の端に到達したか調べる
if ((enemy[i].y > 0) && ((enemy[i].x < 0) || (enemy[i].x > 330))){ reverseFlag = true; }

 左右の端に達した場合はenemyDYに移動量を設定し、敵を少し下に移動させます。そうでない場合は下への移動量は0にしておきます。

// 左右どちらかの端に到達した敵がいた場合の処理
if (reverseFlag){
 enemyDX = -enemyDX;
 enemyDY = 8;
}else{
 enemyDY = 0;
}

 インベーダータイプのゲームでは敵が下まで達したら侵略されたことになり、ゲームオーバーになります。ゲームオーバーの処理は以下のようになります。なお、下のY座標は415にしてあります。

if (enemy[i].y > 415){
 game.rootScene.backgroundColor = "red";   // ゲームの背景色を赤色に設定
 game.stop();
 alert("A帝国はG帝国に征服されました。スコアは"+game.score+"点でした");
 return;   // 以後の処理は行わないようにする
}

 敵のうち、どれか1つでも画面下に達したらゲームを停止させ、ゲームオーバーを示すアラートダイアログを表示します。また、画面の背景色を黒から赤色に変更し、侵略されたことを示します。

 敵の移動処理をまとめたのが、サンプル2のmoveEnemy関数です。

敵が左右に移動し下に攻めてくる

敵が左右に移動し下に攻めてくる

下まで来ると侵略したとみなされゲームオーバーになる

下まで来ると侵略したとみなされゲームオーバーになる

■サンプル2:ソースコードは省略(実際のゲームの実行ページ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く