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

enchant.js

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

前回は”乱数”を使って、敵キャラをランダムに出現させるプログラムを作りました。

今回は、いよいよ敵キャラと自分のクマがぶつかった時の処理を作っていきたいと思います。

 

前回の記事

 

白クマとの衝突判定を行う

白クマは定期的にyを加算する処理を行っていますが、さらに定期的に自分のクマとぶつかっているかどうかをチェックする処理を追加します。

変更箇所は以下のenterframeと書かれたところです。

            enemies[i].addEventListener('enterframe',function(){
                this.y++;});

 

function(){ から }までの間を以下のように書き換えましょう。

            enemies[i].addEventListener('enterframe',function(){
                this.y++;
                if(this.intersect(bear)) {
                    //衝突した時の処理
                    bear.frame = 3;
                }
            });

 

新たにifという命令が登場しました。

これは、ifのかっこ内の条件を満たす時に{から}までの間を実行するという意味になります。

{から}に記述している「bear.frame = 3;」は、自分のくまの絵をダメージを受けた絵に変えるという意味になります。

ifのかっこ内に書かれた「this.intersect(bear)」は、this(白クマ)がbear(自分のクマ)にぶつかった時、という意味になり、白クマと自分のクマがぶつかった時、bear.frame = 3を実行するという結果になります。

今のままだと、敵キャラにぶつかった後もそのままゲームが進行するので、ぶつかったらゲームオーバーと表示させるようにしましょう。

衝突した時の処理を以下のように書き加えましょう。

                if(this.intersect(bear)) {
                    //衝突した時の処理
                    bear.frame = 3;
                    game.end();
                }

これで、ぶつかった時にゲーム進行が止まり、ゲームオーバーと表示されるようになります。

 

微調整してゲームを完成させる

簡単なゲームではありますが、一通りの機能は作り終えました。

最後に微調整として、自分のクマの初期位置を変えたり、敵キャラの移動スピードを変更します。

まずは、以下のようにコードを書き換え、自分のクマの初期位置を変更します。

        bear = new Sprite(32, 32);
        bear.image = game.assets['chara1.gif'];
        bear.x = 320/2;
        bear.y = 320/2;
        game.rootScene.addChild(bear); //シーンに普通のクマを追加

 

bear.x、bear.yは自分のクマのx座標、y座標です。

320は画面の幅、高さですので、/2(割り算)をして画面の幅、高さの半分の位置を設定しました。

実は上の書き方だときっちり真ん中には設定されないです。くま自身の幅、高さ分をマイナスしないと、画面の中央はくまの左上にセットされてしまうからです。

ぴったり真ん中にするなら、くまの幅、高さ32を/2した分だけマイナスしましょう。

        bear = new Sprite(32, 32);
        bear.image = game.assets['chara1.gif'];
        bear.x = 320/2 - 32/2;
        bear.y = 320/2 - 32/2;
        game.rootScene.addChild(bear); //シーンに普通のクマを追加

 

次に敵のスピードを変えます。

敵キャラは「y++」ずつ進んでいるのですが、これは定期的にyを+1するという意味になります。

これを「y+=2」と書き換えると、定期的にyを+2するという意味に変わり、進行スピードが倍になります。

            enemies[i].addEventListener('enterframe',function(){
                this.y+=2;
                if(this.intersect(bear)) {
                    //衝突した時の処理
                    bear.frame = 3;
                    game.end();
                }
            });

 

ゲーム難易度に物足りなかったら、プラスする値を変えると白クマがスピードアップするので難しくなります!

出現する敵キャラの数を変えても難易度が上がりますね、私は以下のように設定してみました。

        for (var i=0; i<=30; i++) {
            //白クマくん
            enemies[i] = new Sprite(32, 32); 
            enemies[i].image = game.assets['chara1.gif']; 
            enemies[i].x=Math.random()*320;
            enemies[i].y=Math.random()*320 - 350;
            enemies[i].frame=5;
            enemies[i].addEventListener('enterframe',function(){
                this.y+=3;
                if(this.intersect(bear)) {
                    //衝突した時の処理
                    bear.frame = 3;
                    game.end();
                }
            });
            game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
        }

 

完成したゲームは以下のリンクからプレイ出来ますので、是非遊んでみて下さい!

(ゲームオーバーした後は、画面をリロードすると再度プレイ出来ます)

 

完成コード

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

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'];
        bear.x = 320/2 - 32/2;
        bear.y = 320/2 - 32/2;
        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<=30; i++) {
            //白クマくん
            enemies[i] = new Sprite(32, 32); 
            enemies[i].image = game.assets['chara1.gif']; 
            enemies[i].x=Math.random()*320;
            enemies[i].y=Math.random()*320 - 350;
            enemies[i].frame=5;
            enemies[i].addEventListener('enterframe',function(){
                this.y+=3;
                if(this.intersect(bear)) {
                    //衝突した時の処理
                    bear.frame = 3;
                    game.end();
                }
            });
            game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
        }
    }
    game.start();
}

 

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

関連記事

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

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

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

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

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

こんにちは! 今回はenchant.jsというゲームエンジンを使ってゲームを作成しながらプログラミングにチャレンジしたいと思います!     enchant.jsとは enchan …

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

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

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

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