当たり判定をする

当たり判定を行う

いよいよ当たり判定です。
ゲーム制作ではもっとも楽しい部分です。
例えばレースゲームで車がコースなど関係なく走れたり、壁をすり抜けたりしたら楽しくありません。
当たり判定が入ることで世界が作られるのです。

弾とエイリアンの当たり判定を入れます。
両方に入れる必要はなく、弾に組み込んで判定します。

<script>
    Crafty.init(500,400, document.getElementById('game'));
    Crafty.background('#bbbbbb');
    // エイリアン
    Crafty.sprite(69,85,"alien.png",{alien:[0,0]});
    Crafty.e('2D, Canvas, alien, Jumper, Gravity')
        .attr({x: 50, y: 0, w: 100, h: 100})
        .jumper(400, ['UP_ARROW', 'W'])
        .gravity('Floor');
    // 床
    Crafty.e('Floor, 2D, Canvas, Color')
        .attr({x: 0, y: 350, w: 250, h: 10})
        .color('blue');
    // 弾
    Crafty.e('2D, Canvas, Color, Collision')
        .attr({x: 200, y: 300, w: 50, h: 10})
        .color('red')
        .checkHits('alien')
        .bind('EnterFrame', function() {
            this.x -= 5;
            if (this.x < -50) this.x = 500;
        })
        .bind("HitOn", function() {
            console.log("hit");
        });
</script>

３箇所変更しました。

実行してみましょう。
何も変わりません。なぜならコンソールを使っているからです。
当たったときコンソールに hit と表示しています。

コンソールを表示する

ゲームを開発するとき、どうしても必要となるのがコンソールです。
とりあえず使ってみましょう。

使っているブラウザが Chrome のとき、メニューバーから
「表示」→「開発/管理」→「JavaScriptコンソール」で開きます。

コンソールは次のような表示です。
当たったとき hit と表示されます。左の数値は当たった回数です。

使っているブラウザが FireFox のとき、メニューバーから
「ツール」→「ウェブ開発」→「ウェブコンソール」で開きます。

コンソールは次のような表示です。
左側に hit と表示されます。Chromeと違い右側に当たった回数が表示されます。

使っているブラウザが Safari のとき、少し面倒です。
まず、環境設定の変更が必要です。
「環境設定」→「詳細」→「メニューバーに開発メニューを表示」
ここにチェックを入れます。

あとはメニューバーから
「開発」→「JavaScriptコンソールを表示」で開きます。

コンソールは次のような表示です。
左側に hit と表示されます。Chromeと似ていますね。

コンソールから hit の確認はできましたか？
メッセージを表示したいときは
console.log(“ここにメッセージ”)
を使いましょう。
それから変数も表示できます。
console.log(“ここにメッセージ”+変数名)
こんな感じでいけます。

当たり判定の説明

当たり判定の仕方を見てみましょう。
簡単に言ってしまえば下図のようになっています。

判定の対象の alien は、エイリアン表示をしているところの中にある名前です。

Crafty.e(‘2D, Canvas, alien, Jumper, Gravity’)

この alien に当たった時、HitOn の下の処理が実行されます。
ここではコンソールに hit を表示しています。

ゲームオーバーの表示

さぁ、ゲームオーバーを表示してこの講座を終わりにします。

弾の処理を次のように修正しましょう。
console.log(“hit”);　の下の5行を追加するだけです。

<script>
    // 弾
    Crafty.e('2D, Canvas, Color, Collision')
        .attr({x: 200, y: 300, w: 50, h: 10})
        .color('red')
        .checkHits('alien')
        .bind('EnterFrame', function() {
            this.x -= 5;
            if (this.x < -50) this.x = 500;
        })
        .bind("HitOn", function() {
            console.log("hit");
            Crafty.pause();     // EnterFrame も jumper も止まる
            Crafty.e('2D, DOM, Text')
            .attr({x:90, y:160, w:400})
            .text("GAME OVER").textColor('#ff6633')
            .textFont({size:'40px', weight:'bold'});
        });
</script>

エイリアンに弾が当たると GAME OVER と表示されます。

２つポイントがあります。
１つ目は Crafty.pause() です。これを使うと他の処理が止まります。
jumper のキー受け付けも、Gravity の重力処理も、EnterFrame の処理も止まります。

処理を止めた後、GAME OVER のテキストを表示をしています。
これが２つ目のポイントです。

テキストの表示には Crafty.e(‘2D, DOM, Text’) で行います。
パラメータはよく見ると、色やサイズ、太字などを指定しています。

Textに関する詳しい説明は、公式のドキュメントを見てください。
英語ですが、例を見れば使い方は分かります。

[ CraftyJS Text のドキュメント ]

これにてこの講座は終了です。お疲れさまでした。

これでゲームプログラミングができるようになった訳ではありませんが、階段を１つのぼったのは事実です。
引き続き学習していくことを強くおすすめします。
頑張ってください。

前に戻る