👾

JavaScriptでゲーム制作④　～落ちてくるリンゴを作る～

2022/05/03に公開

JavaScript

Game

PixiJS

tech

JavaScriptでゲーム制作③　～プレイヤーキャラを作る～でプレイヤーキャラを操作できるようになりました。
続いて画面上からカゴめがけて落下するリンゴを作ります。

■リンゴ

リンゴの画像はこちらです。

上の画像を右クリックして[名前を付けて画像を保存...]を選択、apple.pngの名前でデスクトップに保存します。

リンゴは下図のように４つの水平位置から落下するように作ります。

リンゴが落下する4つの水平位置(x軸)を決めましょう。下記のコードを入力します。

    // リンゴの水平位置
    const xpos1 = 96;
    const xpos2 = (xpos1*2);
    const xpos3 = (xpos1*3);
    const xpos4 = (xpos1*4);
    const x_positions = [xpos1, xpos2, xpos3, xpos4];

図の①は左端から96px目にあたりますので96と指定します。それから右に96pxごとに落下位置を指定します。
そして設定した値を配列x_positionsに入れます。配列とは，複数データを１つにまとめて格納したデータを指します。[]で変数を囲むことでx_positionsに４つの変数が入っています。

それではリンゴを４つ、画面に表示させましょう。下記コードを追加します。

    //リンゴを追加
    x_positions.forEach(function(xpos){ //水平位置の設定を１つずつ処理する
        let apple = PIXI.Sprite.from('apple.png');//リンゴの画像を変数に入れる
        apple.anchor.set(0.5);//基準点は中央にする
        apple.scale.set(2);//2倍の大きさにする
        apple.x = xpos;//水平位置
        apple.y = 0;//垂直位置
        app.stage.addChild(apple);//画面に追加する
    });

リンゴを４つ作成するために配列x_positionsのforEach関数を使用します。
forEach関数を使用すると４つの位置情報をもとにリンゴを４つ作成できます。
xposが位置情報であり、各リンゴのX位置に設定していくことができます。
x位置以外の各設定は上記コードの「//」で始まるコメントをご参照ください。

この状態でファイルを保存し、ブラウザで内容を確認します。

リンゴが変数の指定する水平位置に表示されました。

■リンゴを落下させる

次はいよいよリンゴを落下させましょう。
リンゴを上から下に移動させます。現在位置から下に1pxずつ移動を繰り返すプログラムにしましょう。

// ループ処理の実装
    app.ticker.add(function(){
        //Pixiアプリの子要素に対する処理
        app.stage.children.forEach(element => {
            //カゴ以外の場合、落下処理を実施する
            if(basket != element){
                element.y = element.y + 1;//落下移動
            }
        });
    });

app.tickerは繰り返し処理です。addで繰り返したい処理を記述できます。
app.stageに入れたカゴとリンゴはchildrenという配列に入っています。
forEachを使って配列のリンゴを下に移動しましょう。

配列の１つ１つの要素elementがリンゴか判定するためにif(){}を使用します。
カゴとイコールではないという判定表現はbasket != elementになります。判定と一致する場合はリンゴの垂直位置(y)に1pxを追加します。するとリンゴが1px下に移動します。

これでリンゴを落下させることができました。
次はリンゴの動作に変化をつけてゲームらしくしていきます。

■リンゴ

■リンゴを落下させる

Discussion