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

前回は敵キャラを画面上に表示させるプログラムを作りました。

今回は敵キャラを自動的に下に移動してくるプログラムを作ろうと思います。

 

前回の記事

 

敵キャラ”しろくま”を自動的に動かす

enchant.js講座 #2で使用したサンプルを元に改造したいと思います。

既にForkしたプロジェクトがある方はEditボタンを押して、編集しましょう。

まだForkしていない方は、「enchant.jsサンプル(基礎編)」→「クリックしたところにキャラを移動させてみよう」と書かれたサンプルをForkしましょう。

 

 

緑枠で囲った箇所を改造していきたいと思います。

 

では、早速以下のように改造して白クマを表示させましょう。

        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;
        });

        //白クマくん
        bear2 = new Sprite(32, 32); 
        bear2.image = game.assets['chara1.gif']; 
        bear2.x=50;
        bear2.y=20;
        bear2.frame=5;
        game.rootScene.addChild(bear2);//シーンに普通のクマを追加

 

前回同様にbear2を追加してRunボタンを押すと、白クマが出現することを確認できました。

 

次に白クマを下に移動させるための命令を追加したいと思います。

以下のようにコードを書き換えてみて下さい。

        //白クマくん
        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);//シーンに普通のクマを追加

 

「bear2.addEventListener(‘enterframe’,function(){this.y++;});」という命令を追加しました。

実はこの命令、前回でも同じような命令が書かれていましたが、一度に説明するとややこしいと思ったので、解説はしていませんでした。

この書き方、touchendでクマを操作する書き方と似ています。

「bear2.addEventListener(‘enterframe’」はbear2が定期的に処理するという意味になり、function(event) { から } の囲まれた間の処理を実行するという命令になります。

 

今回の場合、以下の処理がbear2が定期的に実行することになります。

this.y++;

 

thisという書き方は、定期的に処理を実行するbear2自身のことを指します。

つまり、bear2.y++;と同じ意味です。

y++という命令はyを+1するという意味になり、定期的にyが+1されることで下に移動するという仕組みです。

y–という書き方にするとy１を-1するという意味に変わるので、逆に上に移動するという意味になります。

 

白クマを増やしてみる

白クマが1匹だけだと寂しいので、増やしてみましょう。

以下のように書き換えて実行すると白クマが増えます！

        //白クマくん
        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);//シーンに普通のクマを追加

 

bear3、bear4を増やしました。

xの数値は適当にいじって下さい。

game.rootScene.addChildのかっこ内をbear3、bear4に書き換えないと増えないので注意！

 

完成コード

完成コードを用意したので、参考にして下さい！

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;
        });

        //白クマくん
        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);//シーンに普通のクマを追加
    }
    game.start();
}