初心者の方でも楽しくゲームの作り方やプログラミングを学べる情報を発信中!

enchant.js

ゲームを作成しながらプログラミング勉強!enchant.js講座 #5

前回は敵キャラを自動的に下に移動してくるプログラムを作りました。

複数敵キャラを表示させたのですが、今回は複数敵キャラの表示を”配列”と”繰り返し”というプログラミングテクニックを使って効率よく増やす技をレクチャーしたいと思います!

 

前回の記事

 

配列を使って白くまを作る用意をする

前回は以下の書き方で白クマを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&lt;=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();
}

 

スポンサーリンク
シェアする

関連記事

ゲームを作成しながらプログラミング勉強!enchant.js講座 #3

前回はクリックした場所へくまを移動させるプログラムを作りました。 今回は敵キャラを画面上に表示させるプログラムを作ろうと思います。   前回の記事   敵キャラ”しろく …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #2

こんにちは! 前回はcode.9leap.netのアカウント取得から、くまを表示させるところまで作りました。   今回はクリックした場所へくまを移動させるプログラムにチャレンジしたいと思いま …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #7

前回は”乱数”を使って、敵キャラをランダムに出現させるプログラムを作りました。 今回は、いよいよ敵キャラと自分のクマがぶつかった時の処理を作っていきたいと思います。 &nbsp …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #4

前回は敵キャラを画面上に表示させるプログラムを作りました。 今回は敵キャラを自動的に下に移動してくるプログラムを作ろうと思います。   前回の記事   敵キャラ”しろく …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #6

前回は”配列”と”繰り返し”を使って、敵キャラを複数表示させるプログラムを作りました。 しかし、敵キャラの位置が規則正しく並んでしまっていたので、ゲーム …