前回は敵キャラを自動的に下に移動してくるプログラムを作りました。
複数敵キャラを表示させたのですが、今回は複数敵キャラの表示を”配列”と”繰り返し”というプログラミングテクニックを使って効率よく増やす技をレクチャーしたいと思います！
前回の記事
配列を使って白くまを作る用意をする
前回は以下の書き方で白クマを3匹出現させました。
まだ3匹くらいなら大丈夫ですが、これが100匹1000匹となると書くのが大変かと思います。
//白クマくん
bear2 = new Sprite(32, 32);
bear2.image = game.assets['chara1.gif'];
bear2.x=50;
bear2.y=20;
bear2.frame=5;
bear2.addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(bear2);//シーンに普通のクマを追加
//白クマくん
bear3 = new Sprite(32, 32);
bear3.image = game.assets['chara1.gif'];
bear3.x=150;
bear3.y=20;
bear3.frame=5;
bear3.addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(bear3);//シーンに普通のクマを追加
//白クマくん
bear4 = new Sprite(32, 32);
bear4.image = game.assets['chara1.gif'];
bear4.x=200;
bear4.y=20;
bear4.frame=5;
bear4.addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(bear4);//シーンに普通のクマを追加
そこで登場するのが”配列”です。
今までは新たにクマを追加する度にbear2、bear3、bear4と増やしていったのですが、配列を使うとこれを一つにまとめることが出来ます。
以下のようにコードを書き換えて、配列バージョンにします。
enemies = [];
//白クマくん
enemies[0] = new Sprite(32, 32);
enemies[0].image = game.assets['chara1.gif'];
enemies[0].x=50;
enemies[0].y=20;
enemies[0].frame=5;
enemies[0].addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(enemies[0]);//シーンに普通のクマを追加
//白クマくん
enemies[1] = new Sprite(32, 32);
enemies[1].image = game.assets['chara1.gif'];
enemies[1].x=150;
enemies[1].y=20;
enemies[1].frame=5;
enemies[1].addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(enemies[1]);//シーンに普通のクマを追加
//白クマくん
enemies[2] = new Sprite(32, 32);
enemies[2].image = game.assets['chara1.gif'];
enemies[2].x=200;
enemies[2].y=20;
enemies[2].frame=5;
enemies[2].addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(enemies[2]);//シーンに普通のクマを追加
先ほどとの違いは、「enemies = [];」を追加した点と、bear2やbear3をenemies[0]やenemies[1]に書き換えた点です。
今までの書き方と配列の書き方を表す図を作りました。（絵心ないですが・・・）
何が違うかと言いますと、bear2、bear3、bear4はそれぞれ単独のデータ（ばらばらの箱なイメージ）ですが、enemies[0]、enemies[1]はenemies[]という大きな箱の中に小箱が複数入っているイメージです。
ここまでだと、書き方の違いはあれど、あまり差が分からないかと思います。
実はこの”配列”と次に紹介する”繰り返し”を組み合わせると、すごく便利になります。
繰り返しを使って白くまを量産する
では、次に”繰り返し”を使ったコードに書き換えてみたいと思います。
以下のようにコードを書き換えて、繰り返しバージョンにします。
enemies = [];
for (var i=0; i<=2; i++) {
//白クマくん
enemies[i] = new Sprite(32, 32);
enemies[i].image = game.assets['chara1.gif'];
enemies[i].x=50+(i*10);
enemies[i].y=20;
enemies[i].frame=5;
enemies[i].addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
}
コードの解説は後程行いますが、まずはRunしてゲームを動かしてみましょう。
白クマが密着してシュールですが、3匹表示できています。
これはfor文という繰り返しする処理に書き換えたのがミソです。
この書き方にすると、緑枠の部分を指定した回数分繰り返すという意味になります。
繰り返す回数はforの右にあるかっこ内で指定しており、iの値が0から始まり、<=2(2以下)の間、i++(iを1ずつ足す)しながら、緑枠の処理を繰り返すという意味になります。
ですので、i<=2という記述を、i<=10やi<=20に書き換えると、繰り返す回数が増えるということになります。
また1匹ずつx座標がずれているのは、enemies[i].x=50+(i*10)という記述がポイントで、iが0の時は、enemies[0].x=50+(0*10)という結果になり、iが1の時は、enemies[1].x=50+(1*10)という結果になる為、iが0の時、xは50、iが1の時、xは60・・・と、それぞれの白クマが10ずつ右にずれて表示されるようになります。
※アスタリスク(*)は掛け算するという意味です。
それでは、試しにi<=20に書き換えて再度実行してみましょう。
白クマの大量生産に成功しました（笑）
完成コード
完成コードを用意したので、参考にして下さい！
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload('chara1.gif'); // chara1.gifを読み込む
game.onload = function() {
bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
game.rootScene.addChild(bear); //シーンに普通のクマを追加
//rootSceneへのイベントは画面全体のイベントとなる
game.rootScene.addEventListener('touchend', function(event) {
bear.x = event.x; //event変数にタップされた座標が入る
bear.y = event.y;
});
enemies = [];
for (var i=0; i<=20; i++) {
//白クマくん
enemies[i] = new Sprite(32, 32);
enemies[i].image = game.assets['chara1.gif'];
enemies[i].x=50+(i*10);
enemies[i].y=20;
enemies[i].frame=5;
enemies[i].addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
}
}
game.start();
}
