ミッション02：敵機の種類を増やしてみんとす！

お久しぶりです。pon_zuです。

前回に引き続きenchant.jsを使って「シューティングゲームを育成してみんとす！」をやっていきます。

第2回のテーマは「敵機の種類を増やしてみんとす！」です。

ステップ1：敵機の画像を変えてみんとす！

敵機の種類を増やす前に、まずは簡単に敵機の画像を変えてみましょう。

コードの差分はこれだけ。

view plainprint?

1. /** 
2. * Display enemy image. 
3. * You divide the http://jsrun.it/assets/x/7/A/x/x7AxY.png image into 16x16 lattices, 
4. * and start counting from 0 at the top left, and because the image you want to display is at 3, you set frame to 3. 
5. * 敵機の画像を表示する。 
6. * http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、 
7. * 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。 
8. */  
9. -        this.frame = 3;  
10. +        this.frame = 4;  

/**
* Display enemy image.
* You divide the http://jsrun.it/assets/x/7/A/x/x7AxY.png image into 16x16 lattices,
* and start counting from 0 at the top left, and because the image you want to display is at 3, you set frame to 3.
* 敵機の画像を表示する。
* http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、
* 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。
*/
-        this.frame = 3;
+        this.frame = 4;

ただ、これだと全部の敵の色が変わってしまっています。
今度は緑、赤、青の3色の敵が出現するようにしてみましょう。
こんな感じになります。

コード差分はこんな感じです。
Enemyクラスのコンストラクタの引数に敵機の種類を表す「type」変数を追加しましょう。

view plainprint?

1. @@ -63,7 +63,10 @@ window.onload = function () {  
2. if(rand(1000) < game.frame / 20 * Math.sin(game.frame / 100) + game.frame / 20 + 50) {  
3. var y = rand(320);  
4. var omega = y < 160 ? 0.01 : -0.01;  
5. -                var enemy = new Enemy(320, y, omega);  
6. +                // 敵機の種類をランダムで選択  
7. +                var type = rand(3);  
8. +                // コンストラクタの引数に敵機の種類を追加  
9. +                var enemy = new Enemy(320, y, omega, type);  
10. enemy.key = game.frame;  
11. enemies[game.frame] = enemy;  
12. }  

@@ -63,7 +63,10 @@ window.onload = function () {
if(rand(1000) < game.frame / 20 * Math.sin(game.frame / 100) + game.frame / 20 + 50) {
var y = rand(320);
var omega = y < 160 ? 0.01 : -0.01;
-                var enemy = new Enemy(320, y, omega);
+                // 敵機の種類をランダムで選択
+                var type = rand(3);
+                // コンストラクタの引数に敵機の種類を追加
+                var enemy = new Enemy(320, y, omega, type);
enemy.key = game.frame;
enemies[game.frame] = enemy;
}

view plainprint?

1. @@ -265,7 +268,7 @@ var Enemy = enchant.Class.create(enchant.Sprite, {  
2. * Player と異なり自律して動くため、そのための処理が追加されている。  
3. * コンストラクタには初期位置 (x, y) のほか、移動方向の角速度 omega を指定する。  
4. */  
5. -    initialize: function (x, y, omega) {  
6. +    initialize: function (x, y, omega, type) {  

@@ -265,7 +268,7 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* Player と異なり自律して動くため、そのための処理が追加されている。
* コンストラクタには初期位置 (x, y) のほか、移動方向の角速度 omega を指定する。
*/
-    initialize: function (x, y, omega) {
+    initialize: function (x, y, omega, type) {

敵機の種類によって「frame」の値を設定しておきます。 「type」はrand()によって0～2の値が入るので、 それぞれ「frame」に3～5の値を設定します。

view plainprint?

1. @@ -276,6 +279,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {  
2. this.y = y;  
3.   
4. /** 
5. +         * 敵機の種類によってパラメータを設定 
6. +         */  
7. +        var frame = 0;  
8. +        switch(type){  
9. +            case 0:  
10. +                frame = 3;  
11. +                break;  
12. +            case 1:  
13. +                frame = 4;  
14. +                break;  
15. +            case 2:  
16. +                frame = 5;  
17. +                break;  
18. +            default:  
19. +        }  

@@ -276,6 +279,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
this.y = y;

/**
+         * 敵機の種類によってパラメータを設定
+         */
+        var frame = 0;
+        switch(type){
+            case 0:
+                frame = 3;
+                break;
+            case 1:
+                frame = 4;
+                break;
+            case 2:
+                frame = 5;
+                break;
+            default:
+        }

ここで「this.frame」に先ほど設定した「frame」を代入します。

view plainprint?

1. @@ -283,7 +303,8 @@ var Enemy = enchant.Class.create(enchant.Sprite, {  
2. * http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、  
3. * 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。  
4. */  
5. -        this.frame = 4;  
6. +        this.frame = frame;  
7. +  

@@ -283,7 +303,8 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、
* 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。
*/
-        this.frame = 4;
+        this.frame = frame;
+

ステップ2：敵機の強さを変えてみんとす！

今度は敵機の強さを変えてみましょう。 今回は種類によって体力に差をつけてみます。 こんな感じになりました。どうでしょう？ 赤色や青色の敵は一撃で撃破できなくなっていると思います。 コードの差分は以下のとおりです。 まずは、敵機の種類によって「hp」の値を設定します。 以下の設定の場合、緑の敵機は1回、青の敵機は3回、赤の敵機は5回弾を当てることで撃破出来ます。 また、強さに応じて取得できるスコアを変えることにしました。

view plainprint?

1. @@ -282,15 +283,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {  
2. * 敵機の種類によってパラメータを設定  
3. */  
4. var frame = 0;  
5. +        var hp = 0;  
6. +        var score = 0;  
7. switch(type){  
8. case 0:  
9. frame = 3;  
10. +                hp = 1;  
11. +                score = 100;  
12. break;  
13. case 1:  
14. frame = 4;  
15. +                hp = 5;  
16. +                score = 300;  
17. break;  
18. case 2:  
19. frame = 5;  
20. +                hp = 3;  
21. +                score = 200;  
22. break;  
23. default:  
24. }  

@@ -282,15 +283,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* 敵機の種類によってパラメータを設定
*/
var frame = 0;
+        var hp = 0;
+        var score = 0;
switch(type){
case 0:
frame = 3;
+                hp = 1;
+                score = 100;
break;
case 1:
frame = 4;
+                hp = 5;
+                score = 300;
break;
case 2:
frame = 5;
+                hp = 3;
+                score = 200;
break;
default:
}

view plainprint?

1. @@ -323,6 +332,12 @@ var Enemy = enchant.Class.create(enchant.Sprite, {  
2. this.moveSpeed = 3;  
3.   
4. /** 
5. +         * 体力と撃破時のスコアを設定 
6. +         */  
7. +        this.hp = hp;  
8. +        this.score = score;  
9. +  

@@ -323,6 +332,12 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
this.moveSpeed = 3;

/**
+         * 体力と撃破時のスコアを設定
+         */
+        this.hp = hp;
+        this.score = score;
+

自機弾クラスであるEnemyShootクラスに敵機に弾が当たった時の処理が書かれています。 元々の処理は敵機に弾が当たった場合に敵機の削除と加点が行われていますが、 今回はif文を1つ追加して、敵の体力が0より小さくなった時だけ敵機の削除と加点の処理を行うようにしています。 また、元々は加点するポイントが100点で固定されていたのを、敵機ごとに設定された「score」の値を使うように変更しています。

view plainprint?

1. @@ -415,9 +430,12 @@ var PlayerShoot = enchant.Class.create(Shoot, {  
2. this.addEventListener('enterframe', function () {  
3. for (var i in enemies) {  
4. if(enemies[i].intersect(this)) {  
5. +                    enemies[i].hp--;  
6. this.remove();  
7. -                    enemies[i].remove();  
8. -                    game.score += 100;  
9. +                    if (enemies[i].hp <= 0) {  
10. +                        game.score += enemies[i].score;  
11. +                        enemies[i].remove();  
12. +                    }  

@@ -415,9 +430,12 @@ var PlayerShoot = enchant.Class.create(Shoot, {
this.addEventListener('enterframe', function () {
for (var i in enemies) {
if(enemies[i].intersect(this)) {
+                    enemies[i].hp--;
this.remove();
-                    enemies[i].remove();
-                    game.score += 100;
+                    if (enemies[i].hp <= 0) {
+                        game.score += enemies[i].score;
+                        enemies[i].remove();
+                    }

上では体力を変えましたが、同じ要領で移動スピード、軌道、弾の発射間隔なんかも変更できますね。 さて、今回はここまでです！ 次回は何を改造しましょうね？