JavaScriptでゲーム制作⑥　～リンゴをキャッチしてスコアを表示する～

JavaScriptでゲーム制作⑤　～リンゴの落下を不規則に繰り返す～で落下を不規則にしてゲームらしい動きになってきました。
最後にカゴがリンゴをキャッチして得点する仕組みを作りましょう。

■カゴがリンゴをキャッチする

カゴがリンゴをキャッチするには、カゴとリンゴが重なり合った瞬間にリンゴが消えて再び上から落下するようにします。

「JavaScriptでゲーム制作⑤　～リンゴの落下を不規則に繰り返す～」でリンゴの垂直位置(y)が画面の最下部を超えたら垂直位置を0に戻しました。
これを応用し、カゴと重なり合ったら垂直位置を0以下の位置に戻します。
ループ処理に新しくコードを追加します。★が新コードです。

    // ループ処理の実装
    app.ticker.add(function(){
        //Pixiアプリの子要素に対する処理
        app.stage.children.forEach(element => {
            //カゴ以外の場合、落下処理を実施する
            if(basket != element){
                element.y = element.y + 1;//落下移動
                //リンゴのｙ位置が画面を超えた場合、新しいｙ位置を設定する
                if(element.y > app.view.scrollHeight){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                }
                //★リンゴとプレイヤーの位置が一致した場合、新しいｙ位置を設定する
                if(element.x == basket.x && element.y == basket.y){
                    //★配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );//★
                    element.y = y_positions[random];//★垂直位置にランダム値を設定
                }
            }
        });
    });

リンゴ（element）の水平位置と垂直位置が、カゴ（bascket）とピッタリ重なっているかを”if(element.x == basket.x && element.y == basket.y)”で判定します。
”==”は左と右の値が一致しているか条件を問い合わせます。
”&&”は２つの条件が満たされていたら処理を実行することを意味します。
一致していたら{}の中にある処理を実行します。

ブラウザで確認しましょう。カゴとリンゴが重なり合った瞬間リンゴが上に移動して再び落下しているのがわかります。

■リンゴをキャッチしたら得点する

カゴがリンゴをキャッチしたら得点し、得点数を表示するようにします。
下記コードを追加します。ループ処理の前に追加してください。

    // 得点
    const score = new PIXI.Text("得点:0");//変数に格納
    score.position.set(12, 12);//表示位置
    app.stage.addChild(score);//画面に追加

得点を表示するスコアパーツを作成します。PIXI.Text()でテキスト型のパーツが作成できます。
初期表示は"得点:0"としたいため、Text()の中に記述を追加すると表示されます。
position.set()で表示位置を指定。左上が垂直位置、水平位置ともに０であるため、そこから右に12px、下に12px移動したところに表示するようにします。

それではスコアパーツにリンゴをキャッチした数を表示しましょう。
★の行が追加・変更行です。

    // ループ処理の実装
    let count_up = 0;//★得点をカウントアップする変数を宣言
    app.ticker.add(function(){
        //Pixiアプリの子要素に対する処理
        app.stage.children.forEach(element => {
            //★カゴとスコア以外の場合、落下処理を実施する
            if(basket != element && score != element){//★
                element.y = element.y + 1;//落下移動
                //リンゴのｙ位置が画面を超えた場合、新しいｙ位置を設定する
                if(element.y > app.view.scrollHeight){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                }
                //リンゴとプレイヤーの位置が一致した場合、新しいｙ位置を設定する
                if(element.x == basket.x && element.y == basket.y){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                    //★得点を１つアップ
                    count_up = count_up + 1;//★カウントアップ
                    score.text = "得点:" + count_up;//★スコアパーツに代入
                }
            }
        });
    });

ループ処理の前に得点を入れる変数を宣言します。初期値は０です。
ループ処理の中で宣言するとループするたび０になってしまいます。
カゴとリンゴが重なったらという条件の中に得点を１つアップする処理を追加します。
１つアップした値と”得点：”を＋で繋げることができます。その結果、”得点：10”と表示できるようになります。

それではブラウザで確認しましょう。

リンゴをキャッチすると得点が0,1,2...とアップしていくようになりました。

これでゲームが完成しました。いかがでしたでしょうか。
この記事でJavaScriptによるゲーム作りの楽しさが伝わりましたら幸いです。